CODEWITHSUNDEEP
csslayoutheight
zach
zach

Reputation:

Sidebar Div extend entire height of container

I have one container div holding two sidebars on each side and a content box in the middle. Standard 'blog' layout. The content is way past the sidebars, and the sidebar height stops at my last sentence. How can I extend the height so that is auto extends to the bottom of the page, thus the end of the content box in the middle?

Upvotes: 0

Views: 11777

Answers (6)

asdfsdf
asdfsdf

Reputation: 33

Here is how to do it:

The HTML:

<div id="container">
    <div id="main">
        Content...
    </div>
    <div id="sidebar">
        Content...
    </div>
</div>

The CSS:

#container {
   width: 1000px;
   background: url(http://yourwebsite.com/images/dot.jpg) repeat;
   overflow: auto;
}
#main {
   width: 70%;
   float: left;
}
#sidebar {
   width: 30%;
   float: right;
}

How to make "dot.jpg":

  1. open photoshop or any image editor
  2. make a new image that is 1px height and 1px width.
  3. color it whatever color you want your background to be.
  4. save the image as "dot.jpg" and upload to your "images" folder on your website.

Doesn't work?

Visit http://yourwebsite.com/images/dot.jpg and see if you see a dot image. If you see a "404 not found" error then you are using the wrong URL. Fix the URL and it will work.

NOTE:

Change "yourwebsite.com" to your website.

Good luck!

Upvotes: 2

TheLibzter
TheLibzter

Reputation: 777

You're right! Good catch - the 100% height declarations are not necessary! thanks :) the two most important things are that the background image or color of the sidebar is the same as that of the container, and that the bottom div ("footer" in this example) has the property "clear:both". I think everything else can be edited as much as you want...

Upvotes: 0

TheLibzter
TheLibzter

Reputation: 777

I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

I wrote a more in-depth blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Please let me know if you have any questions. Hope this helps!

Upvotes: 0

Andrew Moore
Andrew Moore

Reputation: 95364

Unfortunately, there is no fool-proof way of achieving this.

One way to do the following without using JavaScript is via a technique called Faux-Columns.

It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height.

More information available at:

A List Apart: Articles: Faux Columns

Upvotes: 0

ChssPly76
ChssPly76

Reputation: 100706

Take a look at CssPlay.co.uk

Upvotes: 1

Jason
Jason

Reputation: 52523

Basically you can't. If you're trying to get a design element (say a background image) to extend all the way to the bottom, the best way is to fake it. What I mean by this is create a wrapper that wraps all your sidebars and content and make your background image the background of that wrapper. Then it will extend all the way to the bottom.

Another way to do this, if you really want (cringe) is to use tables. But please don't.

Upvotes: 0

Related Questions