Hi! I`m trying to learn how to make a fluid multiple column layout. And i´m having problems with floats and clearing, especially the clearing part. I just don´t get it. I´ve tried reading about it but still can´t get it to work. Here´s an example what i´ve tried http://koti.mbnet.fi/thinner/multitest/ As you can see when there´s a lot of content the left and right boxes push down. I was wondering if you could check the css and tell me if it´s all wrong and maybe explain me with a sample about those clearings. here´s the css: body { width: 100%; margin: 0; background: #E4BC67; } #container { background: ; margin: 0; width: 100%; } #header{ background:white; margin: 0; width: 100%; height: 100px; } #menu { width: 100%; padding: 0; margin: 0; float: left; } #menu ul { padding:0; margin: 0; width: 100%; background: #F3F3F3; } #menu ul li { display: inline; margin: 0; padding: 0; } #menu ul li a { margin: 0; font: normal 0.7em Verdana; text-decoration: none; color: #A6A6A6; padding: 0; } #menu ul li a:hover { background: #E1E1E1; margin: 0; color: #8345C0; text-decoration: none; padding: 0; } #main { background:yellow; margin: 0 ; width: 100%; } /*content*/ #content { background: magenta; width: 60%; float: left; margin: 0; } p { margin: 0; padding: 7px;} /*leftboxes*/ #boxone { background: green; width: 20%; height: 200px; margin: 0; padding: 0; float: left; } #boxtwo{ background: cyan; width: 20%; height: 200px; margin: 0; padding: 0; float: left; clear: left; } #boxthree { background: blue; width: 20%; height: 200px; margin: 0; padding: 0; float: left; clear: left; } /*rightboxes*/ #rightone { background: green; width: 20%; height: 200px; margin: 0; padding: 0; float: right; } #righttwo{ background: cyan; width: 20%; height: 200px; margin: 0; padding: 0; float: right; } #rightthree { background: blue; width: 20%; height: 200px; margin: 0; padding: 0; float: right; } Code (markup): Thanks in advance!
You should simplify the setup first. You have a left sidebar, a middle content, and a right sidebar. Get those set up first. I forgot which was first in source... okay, you have the middle part first, which makes it more complicated. Maybe first try the "normal" way first while you're learning floats. Usually, a float comes before the static part, in source. SO if you had: <left> <right> <middle> <foot> then you'd float the left left, the right right, and just make side margins on the middle part large enough to make room for the floats (though if the middle part only contains inline stuff, you don't have too... meaning the sidefloats would have a magenta background too cause the middle part is a block and slides under the floats). Then, you can have the other little blue boxes as children of those sidebars. If the sidebars are floated, either their parent container should have overflow: hidden to wrap them, OR let the footer clear them. The floats which are inside the sidebars, then, should only be clearing any float above them (meaning, the green part if that's a float, clears nobody, while the next one down can clear the one above it, and the last one basically doesn't get cleared at all, so the sidebars also should wrap the floats with overflow: hidden). If you want a better idea of float clearing, there are a couple of pages out there (one from PositionIsEverything and there's one on Sitepoint with the overflow: hidden magic). Basically, when something is floated, it's as if it's above the page, yet attatched to its parent at the very top. As far as other block elements on the page are concerned, the float isn't there (not sure if IE screws this part up) and so can slide underneath. Inline elements however DO see the float, thus text will wrap around a floated image or block, while an h2 with a red background will have the text part next to the float but the red background sliding underneath the float). When you float an element, it becomes a block. If there's room in the parent, the next block to come along (if floated) will usually try to sit alongside the float. If this floated block clears the float, though, then that block sits underneath the float as if the float were just another block. Inline elements will try to site alongside the float too and only sit underneath if they clear the float. Non-floated blocks will, as I said, slide under the float and you'll only see them if they're wider than the float. So, in a narrow sidebar with wide floats inside, you could possibly leave them floated, as there's not enough room for the next float to sit alongside anyway, which means they will drop down and act like normal blocks (visually)... meaning you might rather want to not float anything inside the sidebars anyway, since there's no room. Just make them blocks. Another thing, you prolly already know this stuff but I'm not sure what you don't know, but the floats, as I said, are kinda only attatched to their parents at the top (of the float), so the rest of the float can "hang out". It can stick out further than the parent even. IE does not allow this; it incorrectly wraps the float, making the parent element long enough to cover the bottom of the float. The other browsers don't allow this. To make the parent wrap the float then, you can set overflow to something other than visible (the default) OR you can set a non-floated element after the float (but still inside the parent container) with the clear:whatever command. That's why sometimes you see something like <div style="clear:left;">& nbsp; </div> in pages... that's a clearing div. I try to avoid them cause they don't mean anything as far as the page is concerned, but they do work cross-browser. So does overflow: hidden on the parent's CSS usually (there are times when you don't want to use that one... esp menus, where text-enlargment on the floated li's or a's makes the whole menu fall behind the next block on the page, making it unreadable or unclickable). One thing that happens on people's pages is that they have a main content box, and a (let's say left) floated sidebar. Stuff in the main content area might also be floated, and so of course the next element is used to clear that float... but then everything afterwards stays in the main content box but BELOW the end of the sidebar! Why? Because clearing a float clears all floats in the same level--- same level meaning, if the main content had also been floated, then clearing something inside the main content would not also clear the sidebar (one reason why people sometimes float everything in a page). If you want to keep the magenta part first in source, then you've got a different problem. You will need to use negative margins and a little trick with the main container to get that to work. (If you want this solution you can either find it on the forums or teh interwebs or I can explain that here too).
I´ve managed to do this now: http://koti.mbnet.fi/thinner/multitest/ I made a leftside and a center and a right side. Floated them and then but another divs inside the left and right divs. I don´t know if it´s semantically right but it works also in 800x600 resolution.
quick look seems okay... CSS error: #container { background: ; margin: 5px; width: 99%; } no background... you site seems okay in FF1.5 on Ubuntu at 1400px width and scales well. http://stommepoes.nl/hdaddy.gif I didn't look at the code except really quickly nor test in IE (the one most likely to give you problems if anyone gives you problems).
I´ve made some changes to the layout, just <h1> and color changes...look at it now. And it seem to work in FF, IE6, Opera, Safari for Windows and scales quite good. But i think using images as box backgrounds is out of the question because of the scaling difference in 1152x864 and 800x600. Because the image will go over if the image is fit to 1152x864 resolution and then viewed in 800x600(tried it). But otherwise could you call this a liquid layout?
It's liquid, but you could possibly have scaling images as well (if you set their heights and widths in % instead of px...) I've seen scaling images. They usually look like crapola but it depends on the image. Another image option is to have a large image and center it using center center in your background positioning (so long as the important part of the image is also in the center of the image). The edges get cut off as the container gets smaller. I've used this for a header inside a flex-width container. Sometimes the edges get cut off, but the container never gets bigger than the image.
Thanks for this Stomme poes. Actually it was so obvious that i never thought of it I´ve scaled images millions of times in PS using % scaling. I´ll see what i can do with those % images.
If you search teh googles for Paul O'Brien's 3-column css layout (which has the floats first in source), he's got one somewhere with blue background and there's a scaling photo of a mountain... and it actually still looks okay at any size. I guess it depends on the image. : ) But remember the other trick if it looks craptastic when scaling. Set as background image, and parts of the image will show as the container grows. Sometimes this is a better bet. I used it on a page I'm building for work... if you have a ginormous screen width, you can shrink and grow this page and watch the dog img. get wider: http://stommepoes.nl/Guis/guis.html
Paul sets the width of the image to 50% inside the image's width attribute in that example, which is how it works, Mallory.
I knew he set % 's but I didn't know that it was never making the original iamge bigger. So, the biggest it gets is actually its full size? Brilliant.