Creating header , footer and a left side bar using CSS

Question

I am trying to create header , footer and a side bar that extends throughout the content but I am having problem. I have jsfiddle. but I am unsuccessful creating sidbar that is equal and with the containt in height.

you want a full height sidebar? – SpaceBeers Jul 18 '12 at 09:50 — SpaceBeers, Jul 18 '12 at 09:50

score 0 · Answer 1 · edited May 23 '17 at 11:48

0

See this answer. The user suggests that you give a large bottom padding and a negative bottom padding of the same amount for the sidebar and main divs. Put a container around your sidebar and main div and hide the overflow in it.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 18 '12 at 09:54

Arvind Sridharan

3,885
4
29
54

score 0 · Answer 2 · answered Jul 18 '12 at 09:54

For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.

Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.

eg.

.container {
    background: url(your_image) repeat-y left top;
}

<div class="container">
    <div class="sidebar">SIDEBAR</div>
    <div class="content">CONTENT</div>
</div>

You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/

score 0 · Answer 3 · answered Jul 18 '12 at 10:17

0

Hey now define your sidebar and content bar

width in %

as like this

live demo http://jsfiddle.net/zAYru/5/

answered Jul 18 '12 at 10:17

Rohit Azad Malik

31,410
17
69
97

the height of wrap is not to the footer can't we make it from header to footer – kinkajou Jul 18 '12 at 10:29

Creating header , footer and a left side bar using CSS

3 Answers3