Div problems

Div problems (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

BeTheBall -> Div problems (2/13/2007 12:42:26)
Here is the essential layout css for a simple two-column layout I am using: #hdr{ width: 100%; height: 50px; margin: 0; border: solid #333333; border-width: 0 0 2px 0; background: #eeeeee; color: #333333; text-align:center; padding:5px; } #lh-col{ width: 18%; float:left; background: green; color: #eeeeee; margin: 0; padding: 5px; border:0; } #rh-col{ float: right; background: #FFFFFF; color: #333333; margin-left: 0; border: solid #333333; border-width: 0 0 0 2px; padding-right:20px; } Is there a tweak I can make so that no matter how narrow the user adjusts the window to, the right div will not slip under the the left div?

rdouglass -> RE: Div problems (2/13/2007 12:49:45)

I would remove the left hand column float and put the right hand column inside the left hand column <div>.

#lh-col{ 
width: 100%; 
background: green; 
color: #eeeeee; 
margin: 0; 
padding: 5px; 
border:0; 
} 

#rh-col{ 
width: 82%;
float: right; 
background: #FFFFFF; 
color: #333333; 
margin-left: 0; 
border: solid #333333; 
border-width: 0 0 0 2px; 
padding-right:20px; 
} 

<div id="lh-col">
Left hand content

<div id="rh=col">
Right hand content
</div>
</div>

There are probably more 'elegant' solutions but that's how I do mine and it seems to work everywhere except for the most narrowest of browser windows.

jaybee -> RE: Div problems (2/13/2007 13:08:54)
Or you could apply a clear then they stack.

BeTheBall -> RE: Div problems (2/13/2007 13:49:34)
I think the problem in my case is that a form in the right div has a dropdown that is about 3 to 31/2 inches wide. As I adjust the width of the window, the div slips under the left div when it gets to the point that the dropdown can no longer fit. What I would like is for the dropdown to just start going out of view to the right and for the div to stay in place to the right of the left div. Roger, I tried your solution, but it made the right div go below the left no matter how big the window was.

BeTheBall -> RE: Div problems (2/13/2007 13:55:14)
Couldn't understand what jaybee meant. Then the light went on. I just put clear:left in the right-hand div and voila. Exactly what I was after. Thanks to both of you.

jaybee -> RE: Div problems (2/13/2007 14:24:58)
Amazing little beasts aren't they. [:D]

rdouglass -> RE: Div problems (2/13/2007 15:46:56)
quote: Roger, I tried your solution, but it made the right div go below the left no matter how big the window was. I must have missed a positioning item or something 'cause I do it like that quite often.[&o] However, I like jaybee's solution; much cleaner. I won't soon forget that one...

BeTheBall -> RE: Div problems (2/13/2007 18:12:14)
quote: ORIGINAL: rdouglass quote: Roger, I tried your solution, but it made the right div go below the left no matter how big the window was. I must have missed a positioning item or something 'cause I do it like that quite often.[&o] However, I like jaybee's solution; much cleaner. I won't soon forget that one... Could have been my code. I had other divs nested inside that may have skewed things a bit.

Page: [1]

0.09375