MacGoose Posted January 20, 2011 Share Posted January 20, 2011 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 More sharing options...
Synook Posted January 20, 2011 Share Posted January 20, 2011 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 More sharing options...
ShadowMage Posted January 20, 2011 Share Posted January 20, 2011 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 More sharing options...
Synook Posted January 21, 2011 Share Posted January 21, 2011 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 More sharing options...
ShadowMage Posted January 21, 2011 Share Posted January 21, 2011 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!Not if you also add overflow: auto; to the right column Link to comment Share on other sites More sharing options...
Synook Posted January 22, 2011 Share Posted January 22, 2011 Well, let's just see what he is able to implement. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.