4 replies [Last post]
aj2taylo
Offline
newbie
Last seen: 11 years 30 weeks ago
Joined: 2008-06-26
Posts: 3
Points: 0

Hello,

I'm attempting to get a new 3 column layout, and the right column height is not extending for the height of the page.

Below is my HTML and CSS - any idea where I've gone wrong?

HTML:

 <div id="body">
 
  <div id="body2">
 
   <div id="leftshoulder">L&nbsp;</div>
 
   <div id="rightshoulder">R&nbsp;</div>
 
   <div id="bodycontent">
    <div id="header"><a href="/"><img id="logo" 
      alt="Our Company Logo" 
      height="50" src="/images/logo.jpg" width="250" 
     /></a></div>
 
   </div>
 
  </div>
 
 </div>

CSS

body {
 text-align: center;
 z-index: 0;
 background-image: url(/images/rd09/background.jpg);
 background-repeat: repeat-x;
 background-color: white;
}
a:link, a:visited, a:active {
 color: #6C739F;
 text-decoration: none;
}
a:hover {
 color: #859C00;
 text-decoration: underline;
}
 
 div#body {
  width: 982px;
  margin: 0 auto -90px; /* the bottom margin is the negative value of the footer's height */
  padding:0;
  text-align: center;
  min-height: 100%;
  height: auto !important;
  height: 100%;
 z-index: 0;
  background:url("/images/rd09/topshoulder-gradient.jpg") top left no-repeat;
 }
  div#body2 {
   margin: 0px ; 
   padding: 0px;
   background:url("/images/rd09/topshoulder-gradient.jpg") top right repeat;
  }
 
  div#leftshoulder {
  float:left;
  width:10px;
  margin:0; 
  padding:0;
 }
 
  div#rightshoulder {
  float:right;
  width:10px;
   margin: 0px;
   padding: 0px;
  }
 
div#bodycontent {
  margin:0 10px;
  width: 962px;
  background: #FFF;
   z-index: 0;
 min-height: 100%;
 height: auto !important;
 height: 100%;
   text-align: left;
}
 
   div#header {
    padding: 10px 0 10px 20px;
}
IMG#logo {
   border: none;
  }

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 35 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Since there was no link to

Since there was no link to your page, and I didn't feel like plopping the code in and rendering it myself, I'm only guessing, but might it be needing some faux columns?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

lets hope to god this isnt

lets hope to god this isnt all your XHTML. Always post complete code, not partial. Also, !important should be avoided. tap is right, research faux col.

aj2taylo
Offline
newbie
Last seen: 11 years 30 weeks ago
Joined: 2008-06-26
Posts: 3
Points: 0

The full HTML is below. I

The full HTML is below. I don't have the page public, I'm developing it locally at the moment.

I took a look at the faux columns solution, which unfortunately won't work for me. The design I've been handed has a gradient image, fading vertically, so I need to have the left & right columns show this image as a bg (i.e. so I can't use repeat-y with a 1px-tall image).

I'll continue my research.

CupidsToejam: I appreciate the response, however, "lets hope to god" is a bit extreme and rude. All I'm asking is a question, no reason to go overboard that I've caused you some irreparable harm. Take care.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="body">
 
  <div id="body2">
 
   <div id="leftshoulder">L&nbsp;</div>
 
   <div id="rightshoulder">R&nbsp;</div>
 
   <div id="bodycontent">
    <div id="header"><a href="/"><img id="logo" 
      alt="Our Company Logo" 
      height="50" src="/images/logo.jpg" width="250" 
     /></a></div>
 
   </div>
 
  </div>
 
 </div>
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 1 week ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

the gradient image, how many

the gradient image, how many colors does it have? If it has two colors, you can have the image be one color fading to 0%, and have the container have the background color of the secondary color of the current image you have. make sense? So, you'll have the image have one color that fades to zero( this will be an alpha transparent PNG ), then just apply the second color to the container background.

better yet, use the secondary color with faux col, not the container so it has 100% height.

Oh, and stop crying, you sound like my 4mth-old