aylnon Posted November 1, 2010 Share Posted November 1, 2010 I'm trying to set up a basic layout for my site, and setting various element rules depending on where they are. So far the left and right bars are fine, but for my central content pane whenever I use a <p> tag it moves the whole pane down. If I set the <p> margin to 0 for that pane it sits where it belongs, is there a work around?CSS code below, HTML follows: body { background: #400; margin: 0px auto; padding: 0px; font-size: .8em; color: #000;}#container { background: #bbb; margin: auto; width: 80%;}#title { background: #000; width: 100%; height: 100px; font-size: 6em; color: #fff; text-align: center;}#lbar { background: #777; float: left; width: 20%; min-height: 200px;}#rbar { background: #777; float: right; width: 20%; min-height: 300px;}#content { background: #fff; width: 60%; margin: auto; min-height: 500px;}#footer { width: 100%; height: 50px; background: #000; text-align: center; color: #fff;}#lbar p { margin: 10px;}#rbar p { margin: 10px;}#content p { margin: 10px;} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><a name="top"></a><div id="container"> <div id="title"> Free-Flair </div> <div id="lbar"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> <div id="rbar"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div id="content"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div id="footer"> <a href="#top">Return to Top</a> <br> Free-Flair.net owned and maintained by Adrian Calton </div></div></html> Any help is greatly appreciated! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 1, 2010 Share Posted November 1, 2010 to fix this problem, either use 1px padding or border along top edge (and maybe the bottom edge as well), this problem is known as collapsing margins http://reference.sitepoint.com/css/collapsingmargins Link to comment Share on other sites More sharing options...
aylnon Posted November 1, 2010 Author Share Posted November 1, 2010 Thank you! Worked like a charm! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.