ok, so i know this has got to be the easiest thing in the world, but i cannot figure it out. I have a containing div. I want two boxes to sit right next to each other within the containing div. I want the first to have a fixed width and height. I want the second to fill the remaining width (to fill the containing div), and to have the same height as the first box. When using inline elements you have no control over width and height, but block elements cannot sit next to one another. There has got to be a simple answer here. ps. I do not want two %widths, but one fixed width for the first box, and the second box to fill the rest of the container
Did you try coding them? If yes, show us the codes. If I understand you right, it should be very simple using the float element.
simulastral, this is a frustrating problem - I take it the issue is using 100% for the second column which results in the column being too wide. I do it do this way: #sidebar { float: left; width: 200px; margin: 0; padding: 0; } #sidebarInner { padding: 10px; } #main { margin-right: 200px; padding: 0; } #mainInner { padding: 10px; } ... <div id="content"> <div id="sidebar"> <div id="sidebarInner"> sidebar content... </div> </div> <div id="main"> <div id="mainInner"> main content... </div> </div> </div> Code (markup):
Dude, ease up on the DIV's - you've got about twice what you should need given what you are doing... in fact, I think you should be able to do this with just TWO. Of course the real problem is you have the margin on the wrong side <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled</title> <!-- <link href="screen.css" rel="stylesheet" type="text/css" /> --> <style type="text/css"> * { margin:0; padding:0; } #content { width:100%; float:left; /* make sure content pays attention to height of float */ } #sidebar { float:left; width:180px; padding:10px; background:#EEF; } #main { margin-left:200px; /* same as total width of #sidebar */ padding:10px; background:#FEE; } </style> </head><body> <div id="content"> <div id="sidebar"> sidebar content... </div> <div id="main"> main content... </div> </div> </body></html> Code (markup): Works just fine in IE, FF, Op and Saffy.
deathshadow, if you add width and padding to your divs, firefox adds the padding to the div width, so you'd end up with a 200px wide div instead of a 180px one.
Which is why margin-left is set to 200px and not 180. KRT's inner had the inner div set to 10px padding, the outer set to 200px wide - when you combine them to get the same size, you set width to 180px and the padding to 10. Oh, and all browsers should total 200px, not just FF - there's a reason there's a valid doctype on my version. Though thinking on it, I'd probably yank the padding-right so it only totals 190px, but keep the 200px margin-left on the content area - that way you have 10px of no padding so should you have a box model error you at least have a little room to play with... all depends on how it's going to be styled though.
I use 2 sets of divs as it promotes cross browser compatibility, especially when I'm making edits. Strangely, I find it simpler Also, often when a similar issue comes across, I have some child elements of the outer <div> that should not be affected by the padding and positioning them is easier with a separate <div> for padding. BTW, thanks for pointing out that I used margin-right instead of margin-left!
Yup. However, I used that code in similar cases years ago when it did matter so what now are subtleties like that became a habit.