Jump to content

Fixed and dynamic widths


MacGoose
 Share

Recommended Posts

So I have two div's next to each other. One called left, and the other called right.How can I, with css, make sure the left div has an absolute width of 300px and the other a dynamic width that takes up the rest of the window?As it is now I have set the divs like this:#left { width: 30%; height: 100%; float: left; max-width: 30%; max-height: 100%; overflow-x: auto; overflow-y: scroll;}#right { width: 70%; height: 100%; float: left;}So I can set left to be 300px, but I don't know how to set up right so it sizes to what's left of the window...

Link to comment
Share on other sites

You let the right column have auto width, and then give it a margin-left of 300px. Then place the #left element inside the right element (floated left, #right does not need to float at all), and then use positioning to move it 300px to the left, before using negative margin-right to negate the, uh, hole left by it.

<div id="right" style="margin-left:300px"><div id="left" style="width:300px; float:left; position:relative;  left:-300px; margin-right:-300px; "><p>Left column</p></div><p>Right column<br>Blah blah<br>Blah blah</p></div>

Link to comment
Share on other sites

You let the right column have auto width, and then give it a margin-left of 300px. Then place the #left element inside the right element (floated left, #right does not need to float at all), and then use positioning to move it 300px to the left, before using negative margin-right to negate the, uh, hole left by it.
<div id="right" style="margin-left:300px"><div id="left" style="width:300px; float:left; position:relative;  left:-300px; margin-right:-300px; "><p>Left column</p></div><p>Right column<br>Blah blah<br>Blah blah</p></div>

Sounds kinda messy. Why not just put them both in a container and float the left div while leaving the right div as it is?
<div id='container'>   <div id='left' style='float: left;'></div>   <div id='right'></div></div>

Link to comment
Share on other sites

Sounds kinda messy. Why not just put them both in a container and float the left div while leaving the right div as it is?
<div id='container'>   <div id='left' style='float: left;'></div>   <div id='right'></div></div>

Because then the content of the right column will wrap around the left one if the height of the right column is greater. Try it!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...