can anyone help to understand the problem here i think it such a simple problem but difficult for me <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> body{ background-color:#CCCCCC } #container{width:720; margin: 0 auto } #header{ background:#666666; padding: 20px 20px 20px 60px } #content{ width:520; float:right; background-color:#ffffff } #leftsidebar{ width:180; float:left; background-color:#999999; padding-top:20; padding-bottom:20; } #clear{ clear:both; } #footer{ text-align:center } </style> </head> <body> <div id="container"> <div id="header"><h1>header</h1></div> <div id="content"> <h2>Simple Beauty H2 SubTitle</h2> <p>This site design is open source, so feel free to use it as you want, but you must keep the link "Design by Pikanai.com" live on the design. Enjoy!</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus non erat eu dui dignissim dictum. Integer iaculis nulla at nisl. Proin ut enim non ipsum varius laoreet. Integer feugiat, ante fringilla blandit convallis, leo sapien egestas velit, non condimentum nulla sem vitae risus. Mauris aliquam auctor quam. Sed ac enim. Donec mattis dui id ligula. Integer vel sem eget ante cursus tristique. Nullam vel orci vitae sem interdum placerat. In eget lectus. Donec blandit. Quisque lacus urna, malesuada vel, mollis sit amet, rutrum nec, est. Proin blandit ornare nibh. Duis et felis.</p> <p class="quote">There could be your favourite quote or slogan.</p> <p>Fusce euismod nisi at libero malesuada consectetuer. Proin laoreet, nunc quis hendrerit gravida, neque leo placerat sapien, et semper tortor leo et urna. Ut tincidunt posuere tortor. Sed tristique, odio at luctus facilisis, nulla quam rhoncus tortor, at congue lacus elit nec metus. Sed tempor sapien ut elit. Donec ac turpis feugiat nisi porta vehicula.</p> <h2>H2 SubTitle #2</h2> <p>Aenean eu lorem at odio placerat fringilla. Cras faucibus velit quis dui. Proin scelerisque orci nec arcu. Pellentesque cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam mattis iaculis purus. Curabitur velit. Vivamus et diam pharetra elit auctor molestie. Suspendisse potenti. Praesent enim. Vivamus at magna. Ut et dolor eu erat facilisis sollicitudin. Duis sed ante. Suspendisse lorem. Suspendisse mollis, dolor sit amet pellentesque sodales, diam risus adipiscing diam, vel ornare lorem pede ac ipsum.</p> </div> <div id="leftsidebar"> So far, all the examples have used widths defined in pixels. This type of layout is known as fixed-width layout, or sometimes ice layout due to its rigid nature. Fixed-width layouts are very common as they give the developer more control over layout and positioning. If you set the width of your design to be 720 pixels wide, it will always be 720 pixels. </div> <div id="clear"></div> <div id="footer"> <strong>Copyright © 2007</strong> | <a href="#">Your Site</a> | <b>Design by</b> <a href="http://www.pikanai.com">Pikanai.com</a></div> </div> </body> </html> thx
this image from a book" css mastery advanced web standards solutions" page 139 goal: try to learn how to make float-based layouts
Try this. http://www.dan-schulz.com/temp/2columnlayout/ Also note that you should be using an unordered list with no class or ID for your footer links. It's a list of links - mark it up as such. You can also use the parent ID as a reference when targeting the list as well. It will need to be tweaked a bit to match your particular layout, but it works.
thx Dan schulz so much this URL will help so much as try learn layouts but sorry i learned that we add id for footer and then style it as #footer{}
I was talking specifically about this: <div id="footer"> <strong>Copyright © 2007</strong> | <a href="#">Your Site</a> | <b>Design by</b> <a href="http://www.pikanai.com">Pikanai.com</a></div> Code (markup): It's far better to mark it up like this: <div id="footer"> <em>Copyright &#169; 2007, <a href="#">your site</a></em><br /> Design by <a href="http://www.pikanai.com">Pikanai.com</a> </div> Code (markup): (Note: I took a closer look at the code you used and in this case a list would not be necessary. Anyway, you'd want to style the footer's contents by targeting the #footer ID and then the element you want to style.)
Suprised nobody noticed this: 720 what? You need a metric there. Same problem on #content, #leftsidebar, etc, etc. #leftsidebar also has that issue not just on width, but the padding too. You have a perfectly good footer - put the clear there instead of wasting an extra DIV. There's no reason for that wrapping DIV around the h1 to exist - since there should only be one H1 per page, just style it directly. class="quote" - usually a good indication you should be using 'blockquote' instead of wasting a class. You also never close #container - while because you didn't post inside CODE bbcode I can't see your formatting, the lack of carriage returns probably means you also didn't bother indenting correctly - which would show that missing </div> immediately. It would also be simpler to apply #content's background to #container so the color stretches. Since the header has it's own color that top part just gets hidden behind. Is this what you are trying to do? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Untitled Document </title> <style type="text/css"> * { margin:0; padding:0; } body { background:#CCC; text-align:center; /* center #container in IE 5.x */ } #container{ width:720px; margin:0 auto; text-align:left; /* return to 'normal' after IE 5.x centering */ background:#FFF; } h1 { background:#666; padding:20px 20px 20px 60px } p { padding:0.5em 0; } blockquote { font-style:italic; } #content{ width:520px; float:right; } #content p { padding-right:20px; } #sideBar{ width:180px; float:left; background:#999; } #sideBar p { padding:0.5em; } #footer{ clear:both; text-align:center; background:#DDD; } #footer ul { list-style:none; } #footer li { display:inline; padding:0 0.5em; border-right:1px solid #000; font-weight:bold; } #footer .last { border:0; } #footer li a { font-weight:normal; } </style> </head><body> <div id="container"> <h1>header</h1> <div id="content"> <h2>Simple Beauty H2 SubTitle</h2> <p> This site design is open source, so feel free to use it as you want, but you must keep the link "Design by Pikanai.com" live on the design. Enjoy! </p><p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus non erat eu dui dignissim dictum. Integer iaculis nulla at nisl. Proin ut enim non ipsum varius laoreet. Integer feugiat, ante fringilla blandit convallis, leo sapien egestas velit, non condimentum nulla sem vitae risus. Mauris aliquam auctor quam. Sed ac enim. Donec mattis dui id ligula. Integer vel sem eget ante cursus tristique. Nullam vel orci vitae sem interdum placerat. In eget lectus. Donec blandit. Quisque lacus urna, malesuada vel, mollis sit amet, rutrum nec, est. Proin blandit ornare nibh. Duis et felis. </p> <blockquote> <p>There could be your favourite quote or slogan.</p> </blockquote> <p> Fusce euismod nisi at libero malesuada consectetuer. Proin laoreet, nunc quis hendrerit gravida, neque leo placerat sapien, et semper tortor leo et urna. Ut tincidunt posuere tortor. Sed tristique, odio at luctus facilisis, nulla quam rhoncus tortor, at congue lacus elit nec metus. Sed tempor sapien ut elit. Donec ac turpis feugiat nisi porta vehicula. </p> <h2>H2 SubTitle #2</h2> <p> Aenean eu lorem at odio placerat fringilla. Cras faucibus velit quis dui. Proin scelerisque orci nec arcu. Pellentesque cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam mattis iaculis purus. Curabitur velit. Vivamus et diam pharetra elit auctor molestie. Suspendisse potenti. Praesent enim. Vivamus at magna. Ut et dolor eu erat facilisis sollicitudin. Duis sed ante. Suspendisse lorem. Suspendisse mollis, dolor sit amet pellentesque sodales, diam risus adipiscing diam, vel ornare lorem pede ac ipsum. </p> <!-- #content --></div> <div id="sideBar"> <p> So far, all the examples have used widths defined in pixels. This type of layout is known as fixed-width layout, or sometimes ice layout due to its rigid nature. Fixed-width layouts are very common as they give the developer more control over layout and positioning. If you set the width of your design to be 720 pixels wide, it will always be 720 pixels. </p> <!-- #sideBar --></div> <div id="footer"> <ul> <li>Copyright © 2007</li> <li><a href="#">Your Site</a></li> <li class="last"> Design by <a href="http://www.pikanai.com">Pikanai.com</a> </li> </ul> <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): Hope this helps.
thanks Dan Schulz for ur notifcation many more thanks deathshadow u really get what i want and u help me more