• 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

    • The official Funny Pictures thread

      By +primortal · Posted

    • Denmark ditching Windows and Office for Linux as it may not want to rely on Microsoft, Trump

      By Lamp Post · Posted

      "A Microsoft spokesperson said that it had been in contact with the court since February “throughout the process that resulted in the disconnection of its sanctioned official from Microsoft services.” The spokesperson added that “at no point did Microsoft cease or suspend its services to the ICC.” Microsoft declined to comment further in response to questions regarding the exact process that led to Khan's email disconnection, and exactly what it meant by “disconnection.” The ICC declined to comment. However, German business magazine WirtschaftsWoche reported Tuesday that Microsoft's lawyers have now reached the view that it merely provides a technical platform and that its customers decide whether to give their employees access to its services. Microsoft would no longer intervene in scenarios similar to the ICC case, WirtschaftsWoche wrote." Source: https://www.politico.eu/articl...ump-tech-icc-amazon-google/ So while they haven't targeted the ICC, they seem to have targeted a sanctioned individual and cut that individual off from their services. At least I cannot read the statement from their spokesperson in any other way. It can however be understood as they did this on behalf of the ICC, which would line up with Smith's statements that they never cut off services to the ICC. But I don't know if there is any confirmed sources back that up.
    • Latest Patch Tuesday has broken DHCP Server in all Windows Server editions

      By Nick H. · Posted

      Oof, that's a pretty glaring issue. They seem to be consistently proving that they don't do the necessary QA before sending things out.
    • Politically funny images of the World

      By +primortal · Posted

    • Rufus 4.9.2256

      By xillibit · Posted

      They have removed th way to download directly the iso of windows from rufus ? i have tried the version 4.9, the button selection isn't a select list to choose download

  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      617
    2. 2
      ATLien_0
      281
    3. 3
      +FloatingFatMan
      174
    4. 4
      Michael Scrip
      153
    5. 5
      Steven P.
      125
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!