• 0

3-Column CSS Layout Not Displaying Background Color in Container


Question

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

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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Electron sucks. I was much happier when Teams moved off it.
    • iOS 27 will focus on features for Apple's first foldable phone coming 2026 by Taras Buria Foldable smartphones are hardly a novel thing anymore. The form factor has been around for a while, and Samsung, the pioneer of the idea, is already at the seventh generation. Now, with the concept and tech being plenty mature, Apple is joining the party with its first foldable, rumored to arrive in 2026. According to Mark Gurman from Bloomberg, Apple's next iOS 27 update will prioritize new features for the rumored foldable iPhone. The development of iOS 27 is starting soon, and Apple wants to put a lot of focus on the folding experience. With the first foldable iPhone, Apple is entering a well-developed market, and the company is not expected to bring major innovations, unlike the original Apple Vision Pro. Apple is reportedly focusing on a design similar to the Galaxy Z Fold7 with an inward-folding display. Still, the first iPhone is rumored to feature some notable improvements for the inner display crease and the hinge. Foldable phones are becoming increasingly popular in China, and Apple can no longer ignore the market. Offering an expensive foldable iPhone will help the company boost revenue and reignite interest in its main product. There are plenty of users who are interested in giving a book-like foldable a try, but having Android as the only platform choice is a big turn-off for many. With Apple joining the party, the form factor will become much more interesting to many users. Still, those users will have to make sure their pockets are plenty deep. The first foldable iPhone is not expected to cost less than $2,000, so the sticker shock of the original iPhone X from 2017 and Apple Vision Pro from 2023 is coming next year. Source: Bloomberg
    • Hmmm, my fiber still falls under CenturyLink and not Quantum. I am also in Tucson.
    • Well, in nature... we do have zombie ants and zombie deer... so if that fungus gets a hold of that lichen and crosses the species barrier... hmmm... self-healing zombies? Master Oogway: "One often meets his destiny on the road he takes to avoid it."
  • 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
      497
    2. 2
      Michael Scrip
      205
    3. 3
      ATLien_0
      201
    4. 4
      Xenon
      138
    5. 5
      +FloatingFatMan
      117
  • Tell a friend

    Love Neowin? Tell a friend!