bigcheez Posted February 28, 2010 Share Posted February 28, 2010 I am trying to create a css page layout with a div that will grow with its content correctly.I have tried searching the net and this forum and found many suggestions that do not seem to fix my problem.There is a commented line in this code that seems to fix it, but I do not see why it does.I would think that this line should put the #content div 200px above the bottom of #wrapper div.Instead, it puts it right even with it.I would think that I could remove that line and thing would work fine.But if I do that, the #content div extends 200px beyond the bottom of the #wrapper div.Can someone help me understand this behavior? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <style type="text/css">body{background-color:silver;}#wrapper{border-style:solid;border-width:1px;border-color:black;position:relative;width:800px;margin-left:auto;margin-right:auto;}#content{background-color:white;position:relative;top:200px;left:200px;width:600px;margin-bottom:200px; /* property in question */} </style> <title>css div test</title> </head> <body> <div id="wrapper"> <div id="content"><p>Lorem ipsum dolor sit amet consectetuer id in id odio egestas. Consectetuer malesuada mauris interdum natoque nulla vestibulum venenatis Praesent et eros. Aliquet laoreet ac tristique ac sed velit ac quis Integer sem. Sed justo Nunc odio tristique Cras id ac eget wisi augue. Pellentesque dolor tempus.</p><p>Nam et justo enim eu pellentesque lacus congue faucibus adipiscing montes. Lacinia consectetuer ut lacus sapien sodales mus at porttitor dictum Nam. A ultrices a id magna nibh est felis nunc nibh ac. Lorem ligula Pellentesque odio semper scelerisque Quisque Sed felis quis Vestibulum. Vel fringilla venenatis aliquet Nullam tellus In Donec elit eleifend.</p><p>Tortor est pellentesque tellus pellentesque auctor leo Maecenas cursus Aenean faucibus. Vestibulum Vestibulum Nulla felis gravida Integer ac id et In Nunc. Proin enim eu pellentesque vel wisi Vestibulum quis adipiscing Aenean lorem. Amet cursus non urna pede Integer lacinia orci Nunc ante eget. Tellus lacus laoreet Quisque Vivamus felis ligula Donec vitae Sed a. Cursus Quisque vitae laoreet sit Ut lobortis pede eget sit nec. Et wisi.</p><p>Nam dolor Nulla turpis metus ut vel felis pellentesque interdum nunc. Id magna convallis libero ridiculus quis sem iaculis quis tempor commodo. Lacus nunc In congue sagittis mus elit urna Morbi eu sed. Nibh wisi convallis tellus Maecenas malesuada ante Nulla nec eros nascetur. Augue Proin habitant amet malesuada pede dui.</p><p>In Maecenas ante laoreet lacinia feugiat et dolor non dis purus. Aliquam tellus quam metus et interdum felis Nam et orci ut. Morbi nibh Ut Vestibulum Proin nibh volutpat nec Aliquam dolor adipiscing. Nibh tellus rhoncus ut scelerisque tempor vitae nunc pretium diam sit. Sem Integer mi sit Vestibulum justo ipsum rutrum orci dui congue. Ut elit lacinia Vestibulum.</p><p>Egestas ac sagittis Morbi id rhoncus accumsan sit condimentum cursus Fusce. Phasellus condimentum orci eu amet semper consequat ac Nam pede odio. Enim vel hendrerit nibh Lorem Ut velit malesuada mauris Aenean venenatis. Leo fringilla sed laoreet nulla ut volutpat sit Phasellus interdum tortor. Magna senectus interdum nisl orci congue tincidunt condimentum pretium Praesent at. Gravida metus.</p><p>Congue dolor Curabitur tincidunt fames et pellentesque mauris lacinia mauris pellentesque. Felis elit ligula tempus ipsum felis tellus In eget dolor lacus. Eu urna tincidunt turpis Nam In consequat pede urna justo Vivamus. Pulvinar pellentesque sem sed nonummy lacinia ante Vivamus eget wisi ac. Id laoreet pellentesque Cras sagittis volutpat nunc ultrices sit sit quis. Phasellus ipsum dictumst lobortis vel parturient velit vitae suscipit ac.</p> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
jeffman Posted February 28, 2010 Share Posted February 28, 2010 It's a combination of properties. Setting the content's position to relative allows the content to offset by 200px toward the right and bottom. But the wrapper div is still sizing itself vertically to the actual size of the content div, without making the 200px adjustment. That's why you get the overhang. Adding a 200px bottom-margin to the content div adds 200px to the length of the wrapper div. It seems that the length of the wrapper and the length of the content are now the same. They are, but the content is still offset by 200 px. The content div's margin is now occupying the space overhang space.The same things would happen horizontally, except that the width of the content div has been deliberately set 200px smaller than the width of the content div.It's a useful trick to know about, but not the sort of thing you'll use every day. Link to comment Share on other sites More sharing options...
bigcheez Posted February 28, 2010 Author Share Posted February 28, 2010 It's a useful trick to know about, but not the sort of thing you'll use every day.Thanks for your direct-to-the-point response. This is what I was wondering about. What would be the standard and/or proper way to maintain the 200px offset at the top and to get the bottoms to stay even while more content is added? Link to comment Share on other sites More sharing options...
jeffman Posted February 28, 2010 Share Posted February 28, 2010 To give a complete answer, I might need to understand the application better.If your content element's position is static (the default value, so it needs no explicit declaration), you can create a simple gap with margin-top. Designers regularly use margins to keep page elements from crowding each other. (Padding creates space on the interior of an element and should be reserved for that purpose.)I'm having a hard time understanding why you would want a 200px gap between the top of your container and the top of your content element. Since the space is defined by a margin, you would not be able to put anything else there. All that would be visible is the container's background, or the body background if the container is transparent.I can understand all this better if, say, the 200px was an experiment for illustrating the issue. Link to comment Share on other sites More sharing options...
bigcheez Posted February 28, 2010 Author Share Posted February 28, 2010 If your content element's position is static (the default value, so it needs no explicit declaration), you can create a simple gap with margin-top. Designers regularly use margins to keep page elements from crowding each other. (Padding creates space on the interior of an element and should be reserved for that purpose.)I'm having a hard time understanding why you would want a 200px gap between the top of your container and the top of your content element. Since the space is defined by a margin, you would not be able to put anything else there. All that would be visible is the container's background, or the body background if the container is transparent.I can understand all this better if, say, the 200px was an experiment for illustrating the issue.This was an an experiment using nice round numbers, easy for me to comprehend. Although this is in planning for creation of a web actual page. I chose to pear things down to see if I am missing something and easier to post in the forum. I do realize adding other elements may effect the outcome. But I am trying to tackle and understand one thing at a time.My end goal is to also have a div with a graphic filling the complete width of the wrapper div and above the content. Also planned is a div containing navigation buttons under the top graphic and to the left of the content. The navigation div should also grow and fill in space as the wrapper div grows with the content. Link to comment Share on other sites More sharing options...
jeffman Posted February 28, 2010 Share Posted February 28, 2010 Nothing wrong with using using background graphics to fill up "empty space." It makes the HTML smaller, and it avoids the stupid outlines you get when users click on img elements just to see what will happen.So -- you're good for now? Link to comment Share on other sites More sharing options...
bigcheez Posted February 28, 2010 Author Share Posted February 28, 2010 Nothing wrong with using using background graphics to fill up "empty space." It makes the HTML smaller, and it avoids the stupid outlines you get when users click on img elements just to see what will happen.So -- you're good for now?I am except for the mental comprehension ...... I originally thought that I could use bottom:0 for the content, but then the content extended beyond the wrapper by 200px. By using margin-bottom:0 I get the desired effect when I thought I would get a 200px gap at the bottom also. Link to comment Share on other sites More sharing options...
jeffman Posted February 28, 2010 Share Posted February 28, 2010 top,left,right,bottom coordinates only work with positioning that is not static. If you have no position property at all, those values will have no effect. And in most circumstances, that is the way you want to operate. Absolute and relative positioning have their uses (try to make a dropdown menu without them!) but in most other situations, they create more problems than they solve.margin-bottom:0 is your default margin for most elements, so usually it is the same as having no margin definition at all.Since we're on the topic, let me recommend resetting the margin and padding of all your elements to 0. Then, if an element needs a value for one of those properties, define it explicitly. Many of us do that because the default values for some elements are surprising and vary from one browser to the next. Paragraphs and list elements are notorious for this. Just add a thing like this to the top of your CSS. The * character is the universal selector, so it affects every element on your page. * { margin: 0; padding: 0;} Link to comment Share on other sites More sharing options...
bigcheez Posted February 28, 2010 Author Share Posted February 28, 2010 Thanks for your help and the tips.I did not realize you could use a wildcard for the selector.The defaults have been my biggest problem moving from html to xhtml/css.Who woulda thought that I would need to define border-style:solid. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.