Hi, I am new to CSS. I am fighting hard so far, but I hit a wall. maybe you can help me understand: I am trying to "draw" a DIV layout with a page, containing a header and a left column that stands below the header... very simple. Here is the CSS code: .border_small { border-style: solid; border-width: 1px; } .border_gray { border-style: solid; border-color: gray; } div.page { position: relative; /*set ref. block for rel. position*/ margin-top: 50px; margin-right: auto; margin-left: auto; width: 902px; height: 1000px; } div.header { position: absolute; left: 10px; top: 10px; width: 880px; height: 200px; } div.leftcol { position: absolute; left: 0px; top: 210px; width: 200px; height: 650px; } Code (markup): here is th html code: <body> <div class="page border_small border_gray"> <div class="header border_small border_gray"> <div/> <div class="leftcol border_small border_gray"> <div/> <div/> </body> Code (markup): Dead simple. Now what I do not understand is why the leftcol block is positioned relatively to the header block hereas its position is defined a absolute ... I cannot wrap my head around that. My logic says that the value for the div.leftcol top and left should be 220 and 10. But by doing so I dont get the result I expect. Anyone can help me understand what I am "thinking" wrong here? Many thanks Dan
well, It is more me trying to understand the CSS logic rather than solving a problem (since I managed to get what I wanted). My question is: why does the leftcol DIV seem to be positioned relatively to the header in some ways (i.e. if I change the left value of the header to 20px, the leftcol DIV "moves" left too), despite the fact that its "position" value is set to "absolute". Another way of putting it is: why, if I remove the DIV header from the html code, does the leftcol DIV change position (it is not supposed to since it is positioned "absolute"). Absolute DIV should not affect other DIV (they are out of the "document flow" from what I have read) but they do. I hope this is a bit clearer to some.
Absolutely positioned elements are always positioned according to the nearest positioned parent element (containing block).
Petiot: the problem might be your HTML: <div/> What's that? It means nothing. Your browser is making a guess. In true SGML that would mean a wholly open-and-closed empty div, not a messed-up closing tag. Because normally, yes, child of a positioned box who are absolutely positioned should only use their positioned ancestor's edges as a reference. But with the way you're closing (trying to close) those divs, it may not be clear to the browser who is a child of who. You are also giving the page box a top margin. Margins can collapse like that. Absolutely positioned boxes shouldn't ever collapse their margins, but sometimes in IE they do (because IE is a...). If you later decide to use a "normal" design like most (good) web pages, you might see the tops not sitting where you want depending on what that margin's doing. So I'm just saying, be careful with top margins on boxes who are children of boxes (in this case, page is a child of the body box, and that should work as you think it will, but when you try that on the children (when they're not abso-po'd), you'll be in for a surprise).
Yeah, I forgot to mention that. If he were serving it as XHTML, that would be fine, but in this case, he runs the risk of some browsers sometimes stopping processing at that point.
To be honest, I think MOST of your 'problem' is (in addition to the typo SP caught) the use of absolute positioning for no good reason. You are taking them out of flow and that can cause hordes of headaches... Is that left column isolated to just the header, or is it supposed to sit next to the page content that I'd assume will go BELOW the header? In general a column like that would also be content - so fixing it's height is also made of /FAIL and why you keep that in flow. That you seem to be using presentational classes instead of saying what the elements are is not exactly helping matters either. Using CSS it's supposed to be SEPARATION of presentation from content, so **** like "border_small" and "border_gray" have no business being in the markup in the first place. What ARE these elements you are applying styling to? Also, that 'left column' is that going to go next to the body area? I'm going to assume (adding the content element to the mix) that this is what you are trying to do. <div id="pageWrapper"> <div id="header"> Header <!-- #header --></div> <div id="sideBar"> Test Sidebar <!-- #sideBar --></div> <div id="content"> Some Test Content <!-- #content --></div> <!-- #pageWrapper --></div> Code (markup): With this for CSS: body { /* use padding here instead of margin-top on #page to avoid collapse issues */ padding:50px 0; } #pageWrapper { overflow:hidden; /* wrap floats */ width:902px; /* also trips haslayout, so floats are wrapped in IE */ margin:0 auto; border:1px solid #CCC; } #header { margin:10px 0 0 10px; border:1px solid #CCC; } #sideBar { float:left; width:200px; border:1px solid #CCC; } #content { margin-left:212px; } Code (markup): Notice no heights are declared. Declaring heights on content elements (aka anything but the header and footer) is pretty much made of /FAIL/ - and this is what float is for. You'll also notice I don't even have to declare the width of the content or header areas - non-positioned DIV's automatically expand to the size of the container around them, so #header doesn't NEED a width. Using absolute positioning like that is taking something really simple, and making it not only more complex than need be, but shooting yourself in the foot when it comes time to plug in the content - especially if you use %/EM for fonts like you are supposed to.
Hi deathsahdow, I absolutely agreed with you regarding the absolute positioning. I fact I came to use absolute positioning because the float was not working at all due to the typo mistake. So I was looking for alternative solutions and eventually got to experiment the absolute positioning. Now that the float works and the elements flow nicely I came back to a more classic approach. But thanks a lot for pointing that out. I do need to learn what are the good practices, so your post is all bonus to me.