CSS div height - auto doesn't go to end and absolute wrecks footer position

**as4s1n** · 04-16-2010 11:56 AM

On my website I have a right column that, if someone is logged in, shows their recent posts. However, the auto setting doesn't go to the end of page, which is what I would like, and if I set it to absolute then the footer with the 'clear:both' property makes it hover just after the right column ends. I was sure that the auto works if the div it is inside has an absolute height, but if I set that then the page goes out of order when someone tries to post a new entry.

CSS:

Code:

div#content-wrapper 
{
 width:80%;
 float:left;
}
div#right 
{
 width:20%;
 float:right;
 min-height:300px;
}
div#right-inner 
{
 border-left: 5px solid black;
}
div#footer 
{
 clear:both;
 text-align:center;
}

HTML (for HTML view source code)

Example: http://sikuneh.x10hosting.com

Note: Please ignore posts, those are just tests.

**misson** · 04-16-2010 01:14 PM

Do you have a picture illustrating the affect you want? Do you want the right column to stretch down to the footer, or end at the viewport? Will the right column have a background? If not, you could simply give the left column a right border, rather than giving the right column a left border.

A web search for "two column layout" should turn up various methods of achieving what you want.

**as4s1n** · 04-16-2010 08:43 PM

My plan was to get the border to go to the footer but since I use relative width attributes (%s) and I use a 5 px border it puts the right column down below the left column and when I lower the left/right column width then there is a gap between the two that doesn't look quite right. Should I just change to absolute positioning or is there another solution?

**misson** · 04-17-2010 06:21 PM

Originally Posted by as4s1n

Should I just change to absolute positioning or is there another solution?

Absolute positioning will just introduce more problems.

Rather than trying to get the right column to stretch to the footer, put the border on the main content, but as a child of the left column element so it doesn't mess up your relative widths.

HTML Code:

<style type="text/css">
    #MainCol {
        float: left;
        width: 80%;
    }
    #SideCol {
        float: right;
        width: 20%;
    }
    #MainContent {
        border: 5px solid black;
    }
    ...
</style>
</head>
<body>
  <div id="Header">...</div>
  <div id="Torso">
      <div id="MainCol">
          <div id="MainContent">
            ...
          </div>
      </div>
      <div id="SideCol"></div>
  </div>
  <div id="Footer">...</div>

You could also try negative margins on #MainCol equal in size to the border width, but not all browsers handle negative margins the same way.

Thread: CSS div height - auto doesn't go to end and absolute wrecks footer position

LinkBack

Thread Tools

Display

CSS div height - auto doesn't go to end and absolute wrecks footer position

Re: CSS div height - auto doesn't go to end and absolute wrecks footer position

Re: CSS div height - auto doesn't go to end and absolute wrecks footer position

Re: CSS div height - auto doesn't go to end and absolute wrecks footer position

Similar Threads

Expand div height to fit parent

100% height with CSS

Line-Height?

Getting a Div to stretch the whole height of a page

How to control table height

Posting Permissions