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

as4s1n

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
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: [URL]http://sikuneh.x10hosting.com[/URL]

Note: Please ignore posts, those are just tests.
 
Last edited:
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.
 
Last edited:
as4s1n

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
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?
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
as4s1n said:
Should I just change to absolute positioning or is there another solution?
Click to expand...
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: 
<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.
 
You must log in or register to reply here.
Top