|
| |
|
|
BeTheBall
Posts: 6352
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
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?
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
rdouglass
Posts: 9167
From: Biddeford, ME USA
Status: offline
|
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
BeTheBall
Posts: 6352
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
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.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
BeTheBall
Posts: 6352
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
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.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
