• 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

    • Windows 11 is getting a useful new audio feature

      By +sphbecker · Posted

      Ironically, I do have audio engineering experience, but still find the different flavors of VB-Audio's VoiceMeeter (and more advanced options like Banana and Potato) to be a little unintuitive. Yes, I can figure them out, but despite having a UI that looks like an audio mixer, they don't exactly follow typical audio mixing conventions, so it takes a little time to figure out how the software works. Still, I feel like for what you are asking for, VoiceMeeter is a good solution. If you're interested, I could probably create a quick how-to video.
    • Notepad is losing its focus

      By +Random Stranger · Posted

      If it was not for AI push, you have a point but as I already use notepad++ and I really don’t see the need for all the extras in a damn NOTEPAD… I also disagree real notepad with pen does not offer spell check, so why NOTEPAD app should? you already have free Word online.. if this is what you need.
    • One of the best file managers for Windows 11 gets brand-new Omnibar and more

      By MikeK13 · Posted

      How is it "one of the best file managers in Windows"? It is slow as hell and crashes like it's the offspring of Windows Me
    • How can I remove some of this Right-click menu crap?

      By strotee · Posted

      Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Shell Extensions\Blocked] "{e2bf9676-5f8f-435c-97eb-11607a5bedf7}"="Share" [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Shell Extensions\Blocked] "{e2bf9676-5f8f-435c-97eb-11607a5bedf7}"="Share" [-HKEY_CLASSES_ROOT\*\shellex\ContextMenuHandlers\ModernSharing] Remove that Share text.
    • WhatsApp for Windows is ditching UWP for a web app

      By freedonX · Posted

      Meh could never use the UWP as I use WhatsApp business and it's features are available on the standard. Thos this applies to both windows and macos+ipad versions. So I'm stuck on using web versions for whatever platform.

  • 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
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!