943,670 Members | Top Members by Rank

Ad:
Feb 6th, 2009
0

3 div problem

Expand Post »
Hi,

I want middle Div to be automatically adjusted between left and right divs. When i write a long sentence or add something into middle div, the right div is pushed down. How can i make them stable?

Thanks

HTML and CSS Syntax (Toggle Plain Text)
  1. <body>
  2. <div style="height:100px; background-color:#CCCCCC">TOP
  3. </div>
  4. <div style="width:200px; height:800px; float:left; background-color:#E9F3DE">LEFT
  5. </div>
  6. <div style="width:auto; height:800px; float:left; background-color:#E7E6C7">MIDLE
  7. </div>
  8. <div style="width:200px; height:800px; float:right; background-color:#EEF7F7">RIGHT
  9. </div>
  10. </body>
Similar Threads
Reputation Points: 38
Solved Threads: 0
Master Poster
veledrom is offline Offline
724 posts
since Apr 2008
Feb 7th, 2009
0

Re: 3 div problem

i would suggest using some css to control all of those properties, it will make your life so much easier.

your problem is caused by the cumulative width of your divs being too wide for your screen size. one solution would be to give your center div a max-width to limit its width to a size that wont cause such problems.

one question, do you really want the width of your center div to vary based on the amount of text used? if so using max width is your best bet.

if i were u, i would use something that looks like this to create a three column styled sheet:
html Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. #page {
  3. width:900px;
  4. margin-left:auto;
  5. margin-right:auto;
  6. }
  7.  
  8. .left {
  9. width:220px;
  10. float:left;
  11. }
  12.  
  13. .center {
  14. width:460px;
  15. float:left;
  16. }
  17.  
  18. .right {
  19. width:220px;
  20. float:left;
  21. }
  22. </style>
  23. <html>
  24. <div id="page">
  25.  
  26. <div class="left">
  27. </div>
  28.  
  29. <div class="center">
  30. </div>
  31.  
  32. <div class="right">
  33. </div>
  34.  
  35. </div>
  36. </html>

this will create the same basic effect of three columns, but they will always be the same size and should be easier to use as a site wide design...
Last edited by peter_budo; Feb 15th, 2009 at 12:16 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reputation Points: 10
Solved Threads: 0
Light Poster
thacravedawg is offline Offline
38 posts
since Feb 2009
Feb 7th, 2009
0

Re: 3 div problem

I want all page to be filled from left to right. I don't want already defined width.
Thanks
Reputation Points: 38
Solved Threads: 0
Master Poster
veledrom is offline Offline
724 posts
since Apr 2008
Feb 11th, 2009
0

Re: 3 div problem

First of all, stop using pixels. Pixels freeze your page to work for only one screen resolution.

Use percent, and use points for font sizes.

Put 0 margins, borders, and padding on the divs that are using percents.

Text can not be placed directly inside a div. It must be inside another container, such as p.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Feb 13th, 2009
0

Re: 3 div problem

Hi veledrom, for your own good try keeping your css external, or at least in the head. To move those divs I would use some positioning:

Beware! This code is not tested.

<style type="text/css">
.right{
background-color:green;
height:auto;
width:33%;
position:fixed;
left:0%;
}
.left{
background-color:green;
height:auto;
width:33%;
position:fixed;
left:0%;
}
.center{
background-color:green;
margin:0 auto;
height:auto;
width:auto;
</style>

Naturally, you will have to apply the classes, like so:

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
Last edited by ccube921; Feb 13th, 2009 at 3:24 pm. Reason: Extra comma
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Feb 18th, 2009
0

Re: 3 div problem

margin:auto;
Reputation Points: 10
Solved Threads: 0
Newbie Poster
manishbhatt is offline Offline
1 posts
since Feb 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Messy code
Next Thread in HTML and CSS Forum Timeline: I've got 6 weeks to produce an on-line shop!!





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC