• 0

3-Column CSS Layout Not Displaying Background Color in Container

Asked by Dork Of Nerky,

 Share

Question

Enthusiast

Dork Of Nerky

Posted
Posted

So, I figured I'd jump on this whole CSS layout fun. Following a few layout sites, I think I set up the site appropriately, but seems I either missed a step somewhere or just really have no idea what I'm doing (most likely the latter).

I'm trying to create a site that looks like this:

post-36528-1185405558_thumb.png

Sadly, once it's rendered, it looks like this:

post-36528-1185405707_thumb.png

Looking at the code, I know it has to do with my #container ID not doing its job properly. When I added a border, I could see that it only shows up as a line between the header and the content. Any ideas and assistance would be appreciated!

<!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>notMyWebSite</title>
<style type="text/css">
<!--

body {
	font: 13px Arial, Helvetica, sans-serif;
	color: #000;
	background: #c4c4c4 url(images/bg.jpg) repeat-x top;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: center;
}

p {
	margin: 0px;
	padding: 0px;
}

#navigate {
	font: 12px Arial, Helvetica, sans-serif;
	width: 955px;
	margin: 0px auto 0px;
	padding: 14px 0px 14px;
	text-align: left;
}

#navigate a {
	text-decoration: none;
}
#navigate a:hover {
	text-decoration: underline;
}
#navigate .main {
	font-weight: bold;
	letter-spacing: -0.3px;
}

#top {
	color: #c4c4c4;
}
#top a {
	color: #c4c4c4;
}

#bottom {
	color: #818181;
}
#bottom a {
	color: #818181;
}

#header {
	width: 955px;
	height: 100px;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: left;
	background: #7795cc url(images/test-header.jpg) no-repeat;
}

#container {
	width: 955px;
	margin: 0px auto;
	text-align: left;
	background-color: #fff;
}

#main {  
    width: 500px;    
    padding: 20px 20px 10px 20px;
    float: left;
    line-height: 18px;
    color: #000;
}

#sidebar {
    width: 195px;    
    padding: 20px 20px 10px 0px;
    float: left;
    line-height: 18px;
    color: #000;
}

#searchad {
    width: 160px;    
    padding: 20px 20px 10px 20px;
    float: left;
    line-height: 18px;
    color: #000;
	background: #e0e0e0 url(images/test-searchad.jpg) no-repeat top;
}

#searchbox {
    padding-bottom: 20px;
	text-align: right;
}
#searchbox .field {
	width: 155px;
	border: 1px solid #fff;
}
#searchbox .button {
	border: 1px solid #fff;
	background-color: c4c4c4;
}

#adbox {
    padding-top: 20px;
	text-align: center;
}

#end {
	font-size: 2px;
	line-height: 0px;
}

#footer {
	width: 955px;
	height: 10px;
	margin: 0px auto 0px;
	padding: 0px;
	text-align: left;
	background: #fff url(images/footer.jpg) no-repeat;
	clear: both;
}


-->
</style>
</head>

<body>

<div id="navigate">
<div id="top">
  <a href="/" class="main">notMyWebSite</a>

  ?

  <a href="/blog/" class="main">blog</a>
    <a href="/blog/archives/">archives</a>
    <a href="/blog/friends/">friends</a>

  ?

  <a href="/media/" class="main">media</a>
    <a href="/media/movies/">movies</a>
    <a href="/media/music/">music</a>
    <a href="/media/pictures/">pictures</a>

  ?

  <a href="/more/" class="main">more...</a>
    <a href="/links/">links</a>
    <a href="/more/lists/">the list</a>

  ?

  <a href="/contact/" class="main">contact</a>
</div>
</div>

<div id="header"></div>

<div id="container">
  <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer facilisis dictum sem. Integer neque massa, commodo vel, malesuada pharetra, vestibulum ac, libero. Donec congue, eros ac condimentum aliquet, eros nisi cursus metus, ac auctor elit urna sed nulla. Fusce est turpis, euismod sed, tristique in, consectetuer ac, turpis. Suspendisse et lorem at nisl viverra cursus. Nam interdum. In vel quam vitae erat molestie pretium. Curabitur cursus ullamcorper elit. Proin volutpat lorem id magna. Nulla sit amet lacus.</p>
    <p>Nulla sit amet diam et nulla malesuada ultrices. Suspendisse blandit. Integer luctus fermentum risus. Duis a augue. Aliquam et lorem. Fusce vitae metus. Ut vel nulla in eros interdum gravida. Suspendisse imperdiet malesuada tellus. Pellentesque ante. Vestibulum dui velit, semper in, luctus et, mollis vitae, tellus. Maecenas erat. Proin rhoncus pede in ligula. Etiam sem.</p>
    <p>Aliquam turpis risus, porta at, mattis ac, euismod scelerisque, nibh. Vestibulum eu nisi a arcu feugiat vestibulum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui. Proin rutrum viverra arcu. Morbi massa. Aliquam semper. Donec gravida tincidunt dolor. Duis leo nibh, facilisis dapibus, tincidunt in, congue a, metus. Fusce interdum orci nec diam. Sed pede urna, ullamcorper in, bibendum euismod, consectetuer quis, magna. Nullam aliquam, nisi ac ornare fringilla, nibh risus rutrum lectus, eget euismod pede est non sapien. Aliquam erat volutpat. Maecenas erat orci, pretium in, venenatis sit amet, ultrices sed, lectus. Pellentesque consectetuer tempus enim. Phasellus eleifend.</p>
    <p>Morbi adipiscing congue nunc. Sed quis ipsum vitae neque tristique congue. Etiam turpis nisi, suscipit in, lacinia ac, eleifend sed, nunc. Nulla facilisi. Sed arcu sem, ullamcorper eu, eleifend a, dignissim a, augue. In faucibus blandit sem. Integer mauris. Quisque vel ipsum. Quisque tincidunt, eros sit amet blandit vestibulum, sem lacus tempus erat, ac malesuada sem eros eu lectus. Curabitur eu tellus. Aenean libero massa, scelerisque quis, egestas sed, congue non, dui. Phasellus faucibus. Proin vulputate, elit id sodales feugiat, libero urna blandit libero, in tincidunt diam orci eget urna. Aenean aliquet, mi non feugiat consectetuer, nisl enim scelerisque eros, at eleifend nibh nibh a justo. Nunc nec nulla a lorem lobortis condimentum. Donec a arcu quis turpis dignissim laoreet.</p>
    <p>Praesent ullamcorper velit quis sem. Nulla facilisi. Etiam ut orci id ligula sodales euismod. Proin aliquam odio vitae justo. Aliquam quis dolor ut augue molestie aliquet. Phasellus non leo. In urna. Integer varius porttitor tellus. Vivamus gravida, nulla a eleifend pulvinar, magna eros congue erat, in facilisis ligula velit at nisi. Phasellus quam dui, tincidunt et, consequat quis, malesuada et, orci. Donec erat. Maecenas velit diam, iaculis quis, commodo eget, interdum ut, purus. Mauris at turpis et lorem porta sodales. Sed consectetuer orci ac quam. Sed dui. Curabitur fermentum. In id quam vitae eros faucibus tristique. In quis erat.</p>
  </div>

  <div id="sidebar">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper, dui dictum feugiat dignissim, nibh est hendrerit pede, quis euismod justo elit eget enim. Vivamus ornare ante volutpat sapien. Donec nunc. Quisque sodales ultrices nulla. Donec lacus. Nulla quis neque at nibh iaculis bibendum. Phasellus suscipit, lorem at porttitor lacinia, est nulla condimentum est, eu luctus libero dui et diam. Morbi iaculis erat commodo quam. Phasellus tristique justo et magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nullam at sapien. Nam ultricies, justo id euismod semper, risus dolor auctor nibh, et ultricies lectus felis id leo. Praesent auctor ultricies elit.  </div>

  <div id="searchad">
    <div id="searchbox"><input name="search" type="text" class="field" /><br />
      <input name="searchbutton" type="submit" class="button" id="search" value="search" />
    </div>
    <div id="adbox"><img src="images/sidead.gif" width="160" height="600" /></div>
  </div>

</div>

<div id="footer"></div>

<div id="navigate">
<div id="bottom">
  <a href="/" class="main">notMyWebSite</a>

  ?

  <a href="/blog/" class="main">blog</a>
    <a href="/blog/archives/">archives</a>
    <a href="/blog/friends/">friends</a>

  ?

  <a href="/media/" class="main">media</a>
    <a href="/media/movies/">movies</a>
    <a href="/media/music/">music</a>
    <a href="/media/pictures/">pictures</a>

  ?

  <a href="/more/" class="main">more...</a>
    <a href="/links/">links</a>
    <a href="/more/lists/">the list</a>

  ?

  <a href="/contact/" class="main">contact</a>
</div>
</div>

</body>
</html>

2 answers to this question

Recommended Posts

  • 0
Grand Master

kjordan2001

Posted
Posted

The unfortunate thing is you have to wrap your divs in yet another container. The first one (id="tcontainer", created by me) will do the centering and the next one (id="container") has to be floated so that the divs inside it will be counted by the browser as being content inside it, otherwise it gets a clientHeight of 0.

<!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>notMyWebSite</title>
<style type="text/css">
<!--

body {
font: 13px Arial, Helvetica, sans-serif;
color: #000;
background: #c4c4c4 url(images/bg.jpg) repeat-x top;
margin: 0px auto 0px;
padding: 0px;
text-align: center;
}

p {
margin: 0px;
padding: 0px;
}

#navigate {
font: 12px Arial, Helvetica, sans-serif;
padding: 14px 0px 14px;
text-align: left;
float:left;
}
#tnavigate {
width: 955px;
margin: 0px auto;
}

#navigate a {
text-decoration: none;
}
#navigate a:hover {
text-decoration: underline;
}
#navigate .main {
font-weight: bold;
letter-spacing: -0.3px;
}

#top {
color: #c4c4c4;
}
#top a {
color: #c4c4c4;
}

#bottom {
color: #818181;
}
#bottom a {
color: #818181;
}

#header {
width: 955px;
height: 100px;
margin: 0px auto 0px;
padding: 0px;
text-align: left;
background: #7795cc url(images/test-header.jpg) no-repeat;
}

#tcontainer {
width:955px;
margin:0px auto;
}

#container {
text-align: left;
background-color: #fff;
float:left;
}

#main {
width: 500px;
padding: 20px 20px 10px 20px;
float: left;
line-height: 18px;
color: #000;
}

#sidebar {
width: 195px;
padding: 20px 20px 10px 0px;
float: left;
line-height: 18px;
color: #000;
}

#searchad {
width: 160px;
padding: 20px 20px 10px 20px;
float: left;
line-height: 18px;
color: #000;
background: #e0e0e0 url(images/test-searchad.jpg) no-repeat top;
}

#searchbox {
padding-bottom: 20px;
text-align: right;
}
#searchbox .field {
width: 155px;
border: 1px solid #fff;
}
#searchbox .button {
border: 1px solid #fff;
background-color: c4c4c4;
}

#adbox {
padding-top: 20px;
text-align: center;
}

#end {
font-size: 2px;
line-height: 0px;
}

#footer {
width: 955px;
height: 10px;
margin: 0px auto 0px;
padding: 0px;
text-align: left;
background: #fff url(images/footer.jpg) no-repeat;
clear: both;
}


-->
</style>
</head>

<body>
<div id="tnavigate">
<div id="navigate">
<div id="top">
<a href="/" class="main">notMyWebSite</a>

.

<a href="/blog/" class="main">blog</a>
<a href="/blog/archives/">archives</a>
<a href="/blog/friends/">friends</a>

.

<a href="/media/" class="main">media</a>
<a href="/media/movies/">movies</a>
<a href="/media/music/">music</a>
<a href="/media/pictures/">pictures</a>

.

<a href="/more/" class="main">more...</a>
<a href="/links/">links</a>
<a href="/more/lists/">the list</a>

.

<a href="/contact/" class="main">contact</a>
</div>
</div>
</div>
<div id="header"></div>
<div id="tcontainer">
<div id="container">
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer facilisis dictum sem. Integer neque massa, commodo vel, malesuada pharetra, vestibulum ac, libero. Donec congue, eros ac condimentum aliquet, eros nisi cursus metus, ac auctor elit urna sed nulla. Fusce est turpis, euismod sed, tristique in, consectetuer ac, turpis. Suspendisse et lorem at nisl viverra cursus. Nam interdum. In vel quam vitae erat molestie pretium. Curabitur cursus ullamcorper elit. Proin volutpat lorem id magna. Nulla sit amet lacus.</p>
<p>Nulla sit amet diam et nulla malesuada ultrices. Suspendisse blandit. Integer luctus fermentum risus. Duis a augue. Aliquam et lorem. Fusce vitae metus. Ut vel nulla in eros interdum gravida. Suspendisse imperdiet malesuada tellus. Pellentesque ante. Vestibulum dui velit, semper in, luctus et, mollis vitae, tellus. Maecenas erat. Proin rhoncus pede in ligula. Etiam sem.</p>
<p>Aliquam turpis risus, porta at, mattis ac, euismod scelerisque, nibh. Vestibulum eu nisi a arcu feugiat vestibulum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui. Proin rutrum viverra arcu. Morbi massa. Aliquam semper. Donec gravida tincidunt dolor. Duis leo nibh, facilisis dapibus, tincidunt in, congue a, metus. Fusce interdum orci nec diam. Sed pede urna, ullamcorper in, bibendum euismod, consectetuer quis, magna. Nullam aliquam, nisi ac ornare fringilla, nibh risus rutrum lectus, eget euismod pede est non sapien. Aliquam erat volutpat. Maecenas erat orci, pretium in, venenatis sit amet, ultrices sed, lectus. Pellentesque consectetuer tempus enim. Phasellus eleifend.</p>
<p>Morbi adipiscing congue nunc. Sed quis ipsum vitae neque tristique congue. Etiam turpis nisi, suscipit in, lacinia ac, eleifend sed, nunc. Nulla facilisi. Sed arcu sem, ullamcorper eu, eleifend a, dignissim a, augue. In faucibus blandit sem. Integer mauris. Quisque vel ipsum. Quisque tincidunt, eros sit amet blandit vestibulum, sem lacus tempus erat, ac malesuada sem eros eu lectus. Curabitur eu tellus. Aenean libero massa, scelerisque quis, egestas sed, congue non, dui. Phasellus faucibus. Proin vulputate, elit id sodales feugiat, libero urna blandit libero, in tincidunt diam orci eget urna. Aenean aliquet, mi non feugiat consectetuer, nisl enim scelerisque eros, at eleifend nibh nibh a justo. Nunc nec nulla a lorem lobortis condimentum. Donec a arcu quis turpis dignissim laoreet.</p>
<p>Praesent ullamcorper velit quis sem. Nulla facilisi. Etiam ut orci id ligula sodales euismod. Proin aliquam odio vitae justo. Aliquam quis dolor ut augue molestie aliquet. Phasellus non leo. In urna. Integer varius porttitor tellus. Vivamus gravida, nulla a eleifend pulvinar, magna eros congue erat, in facilisis ligula velit at nisi. Phasellus quam dui, tincidunt et, consequat quis, malesuada et, orci. Donec erat. Maecenas velit diam, iaculis quis, commodo eget, interdum ut, purus. Mauris at turpis et lorem porta sodales. Sed consectetuer orci ac quam. Sed dui. Curabitur fermentum. In id quam vitae eros faucibus tristique. In quis erat.</p>
</div>

<div id="sidebar">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper, dui dictum feugiat dignissim, nibh est hendrerit pede, quis euismod justo elit eget enim. Vivamus ornare ante volutpat sapien. Donec nunc. Quisque sodales ultrices nulla. Donec lacus. Nulla quis neque at nibh iaculis bibendum. Phasellus suscipit, lorem at porttitor lacinia, est nulla condimentum est, eu luctus libero dui et diam. Morbi iaculis erat commodo quam. Phasellus tristique justo et magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nullam at sapien. Nam ultricies, justo id euismod semper, risus dolor auctor nibh, et ultricies lectus felis id leo. Praesent auctor ultricies elit. </div>

<div id="searchad">
<div id="searchbox"><input name="search" type="text" class="field" /><br />
<input name="searchbutton" type="submit" class="button" id="search" value="search" />
</div>
<div id="adbox"><img src="images/sidead.gif" width="160" height="600" /></div>
</div>

</div>

<div id="footer"></div>

<div id="navigate">
<div id="bottom">
<a href="/" class="main">notMyWebSite</a>

.

<a href="/blog/" class="main">blog</a>
<a href="/blog/archives/">archives</a>
<a href="/blog/friends/">friends</a>

.

<a href="/media/" class="main">media</a>
<a href="/media/movies/">movies</a>
<a href="/media/music/">music</a>
<a href="/media/pictures/">pictures</a>

.

<a href="/more/" class="main">more...</a>
<a href="/links/">links</a>
<a href="/more/lists/">the list</a>

.

<a href="/contact/" class="main">contact</a>
</div>
</div>
</div>
</body>
</html>

  • 0
Enthusiast

Dork Of Nerky

Posted
  • Author
Posted

YAY!!! Perfecto! I thank you very much. I still have so much to learn about CSS, but this definitely helps out. I really appreciate your help!

  kjordan2001 said:
The unfortunate thing is you have to wrap your divs in yet another container. The first one (id="tcontainer", created by me) will do the centering and the next one (id="container") has to be floated so that the divs inside it will be counted by the browser as being content inside it, otherwise it gets a clientHeight of 0.
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • WhatsApp for Windows is ditching UWP for a web app

      By SnyPer456 · Posted

      Oh no... here we go again. Tha same sh*t that happaned to Mail & Calendar...
    • Windows 11 is getting a useful new audio feature

      By excalpius · Posted

      I too have worked with pro gear for decades and so I found the interface to be unintuitive from both the pro and casual side (a rare "accomplishment" by what are obviously otherwise skilled coders, hehe). I eventually got it to work, thanks for offering, but I found other compatibility issues with my own use case, so I just dropped it entirely. Right now, I just use an analog line out/line in approach which works as expected across all usage scenarios. With both machines on the same power block/outlet, I'm not getting any analog hum or hiss. My next step will be to try the updated Multiplicity 4 when a bug, addressing this very issue unfortunately, is resolved. Knowing Stardock, that could be tomorrow or five years from now, so I check back every few months to see it it's fixed and I want to upgrade. Again, thanks for offering to help.
    • One of the best file managers for Windows 11 gets brand-new Omnibar and more

      By Files App · Posted

      We recognize that performance can use some improvements, and we continue to work on improving it. However, it's worth noting that massive performance improvements don't happen overnight, they take a lot of work and effort, and in most cases, the improvements are more noticeable when you compare across several updates. That said, Files is open-source and everyone is invited to help with these efforts 🙂
    • One of the best file managers for Windows 11 gets brand-new Omnibar and more

      By Files App · Posted

      A lot of effort has gone into improving stability and Files Preview now has a 99% crash free rate. These improvements will make their way to Files Stable when v4 is released later this year. If you're still experiencing issues, please report them on GitHub or Discord so we can track them properly.
    • Media Player Classic - Home Cinema 2.5.1

      By Jose_49 · Posted

      The best of the best.

  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well

  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      Michael Scrip
      203
    3. 3
      ATLien_0
      197
    4. 4
      Xenon
      137
    5. 5
      +FloatingFatMan
      115
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!