linton Posted January 13, 2012 Report Share Posted January 13, 2012 I am a newbie. I finally dared and created a two column layout page comprising a header, a horizontal navigation bar, a left and right sidebar/columns under the navigation div and a footer. All the divs are within the wrapper div but there is a thin line under the navigation bar and it displays the background color of the wrapper. The page looks fine in live view, IE, Safari, Chrome etc but the only problem is the color of the wrapper div showing underneath the navigation bar. I can change the background color of the wrapper so it blends with the color of the page but I will like to know the right solution. The navigation bar has a width of 100% and a height of 40px. Thanks in advance for any solutions. CSS Style * { margin: 0px; padding: 0px; } body { text-align: center; } #wrapper { background-color: #CCC; text-align: left; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } #header { background-color: #660; height: 100px; } #nav { background-color: #960; height: 40px; width: 100%; } #leftcol { background-color: #C90; float: left; width: 300px; } #rightcol { background-color: #CC0; float: right; width: 600px; } #footer { background-color: #CF6; clear: both; height: 50px; } HTML Code <div id="wrapper"><!--start wrapper div--> <div id="header">Content for id "header" Goes Here </div> <div id="nav">Content for id "nav" Goes Here</div> <div id="leftcol">Content for id "leftcol" Goes Here</div> <div id="rightcol">Content for id "rightcol" Goes Here</div> <div id="footer">Content for id "footer" Goes Here</div> </div><!--end wrapper div--> Possible Solution: Increasing the width of the navigation bar to 48px caused it to flesh out and fill the break. It is looking fine now but I will like to understand the cause. Linton Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 13, 2012 Report Share Posted January 13, 2012 If you have the page online, please post a link. Otherwise, post or attach html and css here, please. Quote Link to comment Share on other sites More sharing options...
linton Posted January 13, 2012 Author Report Share Posted January 13, 2012 If you have the page online, please post a link. Otherwise, post or attach html and css here, please. Thanks, I have pasted the code and style to the original post. Increasing the size of the box to 48px seems to have resolved the problem but I will appreciate any explanations you might have. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 13, 2012 Report Share Posted January 13, 2012 Please post the entire HTML from that page. Quote Link to comment Share on other sites More sharing options...
linton Posted January 14, 2012 Author Report Share Posted January 14, 2012 Please post the entire HTML from that page. Hello again, Thanks for your interest in helping. Below is the entire HTML page. It's a practice run before the real thing. Have a nice weekend. <link href="my2colteststyle.css" rel="stylesheet" type="text/css" /> </head> <body><!--start body div--> <div id="wrapper"><!--start wrapper div--> <div id="header">Content for id "header" Goes Here </div><!--end header div--> <div id="nav"> <ul> <li><a href="Test.html">Home</a></li> <li><a href="#">Events</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Location</a></li> <li><a href="#">Members</a></li> <li><a href="#">Forms</a></li> </ul> </div><!-- end nav div--> <div id="leftcol"><!--start leftcol div--> <p>The Boy King</p> <p>Ironically, our greatest royal treasure from ancient Egypt comes from a short lived boy king. King Tutankhamun was not even in the same category of achievement as the great Egyptian kings such as Khufu (builder of the Great Pyramid), Amenhotep III (prolific builder of temples and statuary throughout Egypt), or Ramesses II (prolific builder and usurper), in terms of the length of his reign or the depth of his accomplishments.<br /> Indeed, it is his little known status that contributed to the successful hiding of his tomb, which was covered over by a later pharaoh who was clearing away an area in which to cut his own tomb.</p> <p>On November 26, 1922, Howard Carter made archaeological history by unearthing the first Egyptian pharaonic tomb that still contained most of its treasures. Still, even this tomb had been robbed in antiquity, although the the robbery attempt was apparently thwarted before the thieves could make away with most of the treasure. <br /> This tomb also yielded something else that had never been found in modern history - the pristine mummy of an Egyptian king, laying intact in his original burial furniture.<br /> Thus, Tut's tomb gives us a unique opportunity to explore the life of King Tut and allows us to learn more about this essential period in New Kingdom Egyptian history.<br /> </p> </div><!--end leftcol div--> <div id="rightcol"><!--starts rightcol div--> <p>The Boy King</p> <p>Ironically, our greatest royal treasure from ancient Egypt comes from a short lived boy king. King Tutankhamun was not even in the same category of achievement as the great Egyptian kings such as Khufu (builder of the Great Pyramid), Amenhotep III (prolific builder of temples and statuary throughout Egypt), or Ramesses II (prolific builder and usurper), in terms of the length of his reign or the depth of his accomplishments.<br /> Indeed, it is his little known status that contributed to the successful hiding of his tomb, which was covered over by a later pharaoh who was clearing away an area in which to cut his own tomb.</p> <p>On November 26, 1922, Howard Carter made archaeological history by unearthing the first Egyptian pharaonic tomb that still contained most of its treasures. Still, even this tomb had been robbed in antiquity, although the the robbery attempt was apparently thwarted before the thieves could make away with most of the treasure. </p> <p>This tomb also yielded something else that had never been found in modern history - the pristine mummy of an Egyptian king, laying intact in his original burial furniture.</p> <p>Thus, Tut's tomb gives us a unique opportunity to explore the life of King Tut and allows us to learn more about this essential period in New Kingdom Egyptian history.<br /> </p> <p>The Story of King Tut<br /> <br /> When British archaeologist Howard Carter uncovered the remarkably preserved tomb of Tutankhamun in 1922, he created a worldwide sensation. The only tomb of its era found intact and full of indescribable treasures, it was also the first major discovery in the age of easy worldwide communication. That, along with rumors of a mysterious curse, helped make Tutankhamun the most popular of the Egyptian pharaohs in the modern world.</p> <p>But what was Tutankhamun's world really like? Who were the men who helped this boy king run an empire? Crowned at the tender age of nine, how did this child train for his roles as head of the state, church, and military? And what led to his death before his twentieth birthday?</p> <p>Learn the answers to these questions and more as you read "The Story of King Tut" and view the marvelous objects that give us a picture of his life.</p> <p>Explore King Tutankhamun's Story chronologically by continuing to Before Tut's Reign, or select a specific topic from the list of chapters below.</p> </div><!--end rightcol div--> <div id="footer">Content for id "footer" Goes Here</div><!--end footer div--> </div><!--end wrapper div--> </body><!--end body div--> </html> Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 14, 2012 Report Share Posted January 14, 2012 By 'entire' I kind of meant ALL OF IT - I assume you have something missing towards the top of what you provided? If I upload what you provided (after adding what's missing in your head section), I see this - I checked your page in FX, IE9, Chrome, Opera, and Safari, and on none of them did I see a small space under the navigation bar. On some of them, however, I saw gray sticking out under your right-hand column. Depending on the font size each browser displays, the right column is sometimes shorter than the left. Curious enough, when I just looked at it in design view of my Dreamweaver MX4, the left column is the shorter one. That, however, is a natural occurrence and things will be different from page to page throughout your site, depending on the exact amount and size of the varying content in each column. There are several ways to fix that, but you weren't asking about that issue (btw, matching the background color is the simplest solution.) I made some minor, mostly strategic changes to your CSS and uploaded it here: here - right-click and view source to read the comments I left to explain my changes. In the html, I noticed that you are not coding the headings properly. "The Boy King" for example, should have an H tag, <h1>, <h2>, etc, for example. And you should not use the <br> tag to create space. For paragraphs, use the p tag, and if you need more space around something, add margins or padding to your CSS. But, since I never say the small space under your navigation you had mentioned, this doesn't really answer your question - but it's still good info. Quote Link to comment Share on other sites More sharing options...
linton Posted January 14, 2012 Author Report Share Posted January 14, 2012 By 'entire' I kind of meant ALL OF IT - I assume you have something missing towards the top of what you provided? If I upload what you provided (after adding what's missing in your head section), I see this - I checked your page in FX, IE9, Chrome, Opera, and Safari, and on none of them did I see a small space under the navigation bar. On some of them, however, I saw gray sticking out under your right-hand column. Depending on the font size each browser displays, the right column is sometimes shorter than the left. Curious enough, when I just looked at it in design view of my Dreamweaver MX4, the left column is the shorter one. That, however, is a natural occurrence and things will be different from page to page throughout your site, depending on the exact amount and size of the varying content in each column. There are several ways to fix that, but you weren't asking about that issue (btw, matching the background color is the simplest solution.) I made some minor, mostly strategic changes to your CSS and uploaded it here: here - right-click and view source to read the comments I left to explain my changes. In the html, I noticed that you are not coding the headings properly. "The Boy King" for example, should have an H tag, <h1>, <h2>, etc, for example. And you should not use the <br> tag to create space. For paragraphs, use the p tag, and if you need more space around something, add margins or padding to your CSS. But, since I never say the small space under your navigation you had mentioned, this doesn't really answer your question - but it's still good info. Hello, Andrea, sincere thanks for your time and all the hard work and thoughtful suggestions. Increasing the NAV bar div to 48px seems to have resolved the problem. I have pasted the original CSS and HTML that I used below, please create or add horizontal navigation links plus text and see if the break occurs again. For now, my test page/structure is looking fine in FX, IE 8 and 9, Safari and Chrome. I apologize for not pasting everything verbatim earlier since I was still working on it. My goal was to get a working structure/outline/template before proceeding and eventually put it up on a site so I can see the results of my adventure. Will keep your styling suggestions in mind. CSS @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { text-align: center; } #wrapper { background-color: #CCC; text-align: left; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; } #header { background-color: #660; height: 100px; } #nav { background-color: #960; height: 40px; width: 100%; } #leftcol { background-color: #C90; float: left; width: 300px; } #rightcol { background-color: #CC0; float: right; width: 600px; } #footer { background-color: #CF6; clear: both; height: 50px; } HTML <!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>2collayout-test</title> <link href="2colstyle.css" rel="stylesheet" type="text/css" /> </head> <body><!--start body div--> <div id="wrapper"><!--start wrapper div--> <div id="header">Content for id "header" Goes Here </div><!--end header div--> <div id="nav">Content for id "nav" Goes Here</div><!-- end nav div--> <div id="leftcol">Content for id "leftcol" Goes Here</div><!--end leftcol div--> <div id="rightcol">Content for id "rightcol" Goes Here</div><!--end rightcol div--> <div id="footer">Content for id "footer" Goes Here</div><!--end footer div--> </div><!--end wrapper div--> </body><!--end body div--> </html> Thanks again. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 14, 2012 Report Share Posted January 14, 2012 I didn't see the space you are talking about in the fist version where the nav does NOT have a height of 48px: http://aandbwebdesign.com/KSforum/space5.html. I also do not see the space when I reduce the nav height to just 20px, or when I increase it to 80px. Can you upload the page where you see the problem and post the link? Quote Link to comment Share on other sites More sharing options...
linton Posted January 15, 2012 Author Report Share Posted January 15, 2012 I didn't see the space you are talking about in the fist version where the nav does NOT have a height of 48px: http://aandbwebdesign.com/KSforum/space5.html. I also do not see the space when I reduce the nav height to just 20px, or when I increase it to 80px. Can you upload the page where you see the problem and post the link? Unfortunately I did not save it after I increased the div to 48px. Also, adding links and text did not recreate the problem but this is not the first time it's happened. Will save it next time. Thanks for your time and everything, will keep you posted as I crawl along. I am planning on picking a domain name and a web host soon. Hopefully, that will make things easier. Thanks a bunch. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.