How do I use floats to align the text to either side but when c_bar1 is longer that c_bar2, then you can still see the bg color of content? When I try to do it the content div doesn't expand to contain c_bar1 and c_bar2. My code looks something like this: HTML code: <div id="main"> <div id="bar1"></div> <div id="content"> <div id="c_bar1"></div> <div id="c_bar2"></div> </div> </div> Code (markup): For the CSS: I aligned main to the center and made its width 100% I set the margins of content to auto to align it to the center, and its position is relative for other content, bg color is set c_bar1 is floated to the left, width is set, height is 500px c_bar2 is floated to the right, width is set, height is 400px Thanks! ~imozeb
not sure 100% on what you are after so I will go with the easiest help. insert a div clear-fix after c_bar2, set to 100% width; clear: both; and the content div should expand. problem is both of the interior DIVs are floated. Thus #content believes it has nothing inside of it.
Sorry that I didn't explain my question well... What I meant is that I want to have two divs (c_bar1 and c_bar2) lined up side by side within the content wrapper. I want to do this so if c_bar2 or c_bar1 is shorter than the other div then the color of the content wrapper is shown. Heres my lame attempt at a picture: -------------------------- |``````|````````|``| |``````|````````|``| | c_bar1| c_bar2``|``| |``````|````````|``| |``````|------------``| ----------- `#Content``| --------------------------- From what you said about using float means that the content wrapper assumes there's nothing inside makes me think that a solution is impossible. Mabye I could use absolute or relative positioning? Thanks! ~imozeb
You're explaining it fine, I'm just having a problem with what you are after. My first thought is you are looking for faux columns but that would be where c_bar2 appears to match c_bar1's length. Because if that's not what you want, the div clear-fix should do what you want. Positioning isn't the problem. If you assign a height to content it would fix your problem right? But of couse, the height of c_bar1 and 2 is going to be a variable (or is 90%+ of the time). see if this code is close or not (probably won't work right in IE since I left out the doctype). <html> <head> <style> #main { margin: 0 auto; width: 900px; } #content { margin: 0 auto; width: 900px; background: #afafaf;} #c_bar1 { width: 400px; float: left; height: 500px; } #c_bar2 { width: 400px; float: right; height: 400px; background: #cfcfcf; } .clear { clear: both; width: 100%; height: 2px;} </style> </head> <body> <div id="main"> <div id="bar1"></div> <div id="content"> <div id="c_bar1"> <p>Lorem my ipsum </p> </div> <div id="c_bar2"> <p>Lorem my ipsum </p> </div> <div class="clear"> </div> </div> </div> </body> </html> Code (markup):
Uhm... I think what you are asking for is called float clearing. Floats are removed from flow for the calculation of most boxes, even their parents; they are ONLY under normal circumstances considered in flow for display:inline elements and NOT 'display:block' type elements. There are several triggers that will get you the behavior you are after - you in fact have one of those present for IE; Width. Width triggers IE's 'haslayout' which means it should already be doing what you ask there... Unfortunately that's not how the standards say it should be done, so we have to look at another trigger. The best one to use is usually overflow:hidden; that said, #main appears to be the same width as #content, so there is no reason to be saying width, or margin on #content... It also means there is ZERO reason to be dicking around with a clearing div as imozeb suggests - since that's more 2001 than 2010. So, for this markup: <div id="content"> <div id="c_bar1"> <p>Lorem my ipsum </p> </div> <div id="c_bar2"> <p>Lorem my ipsum </p> </div> <!-- #content --></div> Code (markup): You'd use this CSS: #content { overflow:hidden; /* wrap floats */ width:100%; /* trips haslayout, wrap floats in IE */ background:#afafaf; } #c_bar1 { float:left; width:400px; height:500px; } #c_bar2 { float: right; width:400px; height: 400px; background: #cfcfcf; } Code (markup): Any constraining width belonging on the outermost container.
I'll dick around with whatever I want tyvm. And Imozeb you can use other values for overflow, auto, scroll or hidden. And you can get more details here http://www.quirksmode.org/css/clearing.html if that's the actual solution to your question.
uuuuuuuuuuuuuuuuuuuuuugh its still not working.... been trying a load of different attributes, and I cant get the container divider to advance down along the y-axis when the right/left classes' content overflows the container divider... WHYYY ITS THIS HAPPENING TO MEEEEEEEEEEEEEEEEEEEEEEEEEe