Sorry if this has been discussed elsewhere - as I'm new to using CSS for layout I'm probably searching for it using the wrong words! I'm trying to reproduce a 2-column table - the left column having a fixed width, and the right column filling the rest of the page. You need to log in to see the actual ASP page, but here's a link to a static mock-up of the same thing: http://www.virnuls.co.uk/test/index.html (using http://www.virnuls.co.uk/test/default.css) The layout for the page (with JavaScript functions removed) is basically: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="default.css" media="screen" type="text/css"> <TITLE>Staff Home Page</TITLE> </HEAD> <body> <div class="header"> <h1 class="heading">Staff Home Page for Joe Bloggs</h1> </div> <div class="button_area"> <div onMouseOver="show_text(2);" onMouseOut="default_text();"><input type="button" class="menu_button" onClick="location.href='attendance/admin.asp';" value="Administration and Set-up" style="height: 78px;"></div> <div onMouseOver="show_text(1);" onMouseOut="default_text();"><input type="button" class="menu_button" onClick="change_style();" value="Change System Appearance" style="height: 78px;"></div> <div onMouseOver="show_text(0);" onMouseOut="default_text();"><input type="button" class="menu_button" onClick="change_password();" value="Change Password" style="height: 78px;"></div> </div> <div id="help_area"> <h3>Help Area</h3> <p>If you move the mouse pointer over a button, a description of what the button does appears here. </p> </div> <div class="footer"> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></a> <a href="http://jigsaw.w3.org/css-validator/"><img height="31" width="88" border="0" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a> </div> </body> </html> Code (markup): The CSS for the DIVs is as follows: .button_area {float: left; width: 300px; text-align:center} #help_area {float:left; text-align:left; width:auto} .header {width: 100%; text-align:left; float: left} .footer {width: 100%; text-align:center; clear:both; padding: 10px} Code (markup): [Before anyone points out that there's no point in the "header" and "footer" DIVs, I intend to put more in them.] This works exactly as I'd like in IE7 - if the browser width is reduced then the text in the "Help Area" wraps until there isn't enough room for it, and then it moves down to underneath the buttons. The problem is that the text doesn't wrap in Firefox, Opera or Safari - if the text in the "Help Area" is too wide to fit the gap between the buttons and the right of the page then the whole DIV moves underneath the buttons. This means that the DIV jumps up and down and you move the mouse pointer over the buttons. The text wraps if I fix the width of help_area, but I don't want to do that because I'd like my page to fill the window. Am I doing something wrong? Is it possible to get Firefox, Opera and Safari to do what I want?
Well certainly IE and modern browsers deal with floats differently. By floating the right side, you've triggered Haslayout on it. What I often do is set NO width and NO floats on the other side. What I think id going on though isn't the Haslayout but the whole width: auto on the float. Floats should shrink-wrap, but not all browsers do that the same. If you take float off the right side, I think the text should then do what you want it to do, like in IE. However, the safest thing to do then is go ahead and add a left margin on the right side equal to or a bit bigger than the left side. .header { width: 100%; (this is default btw) text-align:left; (this is default btw) float: left[b];[/b] (any reason for this?) } .button_area { float: left; width: 300px; text-align:center[b];[/b] } #help_area { text-align:left; margin-left: 310px; } .footer { width: 100%; (this is default btw) text-align:center; clear: left; padding: 10px[b];[/b] } Code (markup): Even though it's allowed, I would recommend you DON'T get in the habit of leaving off the last ; the reason being that when you add new properties, you should not need to edit the line above it. It's always safer to end every line with a ; And, I would also recommend setting your CSS in the order of the elements on the page. This can (sometimes) prevent issues with the Cascade later on as this page gets more complicated.
Excellent, thanks! Although your suggestion didn't do exactly what I wanted (because I wanted the help_area DIV to wrap underneath the buttons), adding a margin sorts out the problem - even if it's 0px: #help_area { margin-left: 0px; } Code (markup): Why should explicitly setting the left margin of a DIV to its default value affect the way the text wraps inside the DIV? Surely that must be a bug?
Ah, I found a typo I made, though I think you understood me : ) Yes, having the left margin equal to the sidebar's width would stop wrapping underneath. You wouldn't have gotten that with two floats either. I dunno, that seems strange-- which browser does this margin-left: 0 affect? If it's several of them it wouldn't be a bug. Maybe I have to build it and play with it... *Edit, built the copy real quick, margin-left does nothing... and the only reason I advocated margin-left was to keep IE and FF looking the same. I didn't know the text was supposed to wrap-- that'll cause a problem if you ever trigger Haslayout on that right side. See, if I remember correctly, IE will look like everyone else if you don't trigger haslayout on the right side. But if you do (by floating it, setting a height, or a width, or position:relative or position: absolute... I can't remember all the triggers, but they are listed here). If you later need one of these properties, then you'll trigger Haslayout, which means then the text will NO LONGER wrap underneath. See, if you put a background colour on Help Area, you'll see (currently in all browsers) the colour show the Help area sliding underneath the float (as well as the h3, if you give it a different background colour). The inline stuff like the text of the p and the text of the h3 wrap around the float cause they "see" it. The block elements do not. In IE though, if you give, say, a height to the right side, then the block elements will NOT slide underneath, at least not until the whole box can be "dropped down" (IE6 sometimes does this on some people's pages anyway, called "float drop" and that's partly the fault of it's width calculations too due to bugs like 3px jog or double margin float bug). This would mean the text cannot wrap underneath the float "naturally" (the whole block can still drop underneath though). I did see, when using position: relative as the trigger, that sometimes the whole box would just move over and cover the buttons, making the text seem to wrap if there's no background colour on help area... might be acceptable to you. So, setting the left margin also doesn't allow, but since on most pages that left side is a sidebar where you don't want text going to anyway, I've always added the margin so that FF and IE won't look and act different should Haslayout come into play. But becuase you DO want the text to wrap, you'll just have to be extra careful NOT to trigger Haslayout on that container. It's fine to set it on its children, no problem. Just keep that in mind, and go ahead and remove the margin-left: 0 since it's doing nothing in no browsers : ) If you want to see what I'm talking about, if you have IE and FF (or Opera or Saffy), look at my version in both those browsers: http://stommepoes.nl/joebloggs.html I had to take the JS stuff out becuase every time my mouse moved, IE6 gave me an error box that I could not get to close-- not needed for this demo anyway. I've triggered Haslayout by setting a height on help area and gave it a red background so you can see what it does. PLay with resizing and then remove height declaration. You'll see the difference right away. I noticed IE6 was of course quicker to drop the help area box than IE7-- IE7 usually has no "float drop" problems but it still has Haslayout. IE8 is supposedly not going to have this problem : )