CODEWITHSUNDEEP
htmlcss
deja87
deja87

Reputation: 31

Position a sidebar to absolute left, from within a container, but keep the height of the sidebar

A weird one... I have a website with a container for 960px, with a sidebar inside it... I need to position the sidebar to the absolute left, however I still need the sidebar to have a height, so the page is as large as the sidebar, so that the footer sits below it...

Please look at the links so I've got the whole setup in there

So an example of what I started with is this:

    .sidebar {
    background:#fff;
    border: solid 1px #000;
    width:100px;
    float:left;
    margin:25px;

}

http://jsfiddle.net/nMeqp/3/

And what I've been able to do is the below:

    .sidebar {
    background:#fff;
    border: solid 1px #000;
    width:100px;
    float:left;
    margin:25px;
    position:absolute;
    left:25px;

}

http://jsfiddle.net/nMeqp/2/

So what I want is kinda like the second one, however I need the sidebar to have a height...

The way the site is setup I can't just remove the sidebar from the container, trust me I've tried for hours.

I need this positioned to the left of the browser window, not the wrapper.

Any help would be awesome!

Thanks.

EDIT

I just hid the element and used jQuery to fade it in and move it outside of the wrapper at the same time.

jQuery('.sidebar').prependTo(".page").fadeIn()

Thanks for your help

Upvotes: 0

Views: 1299

Answers (2)

Priya Sunanthan
Priya Sunanthan

Reputation: 439

I am not sure. Is this you need.

Try this:

Chech here: http://jsfiddle.net/nMeqp/7/

.sidebar {
    background:#fff;
    border: solid 1px #000;
    width:100px;
    float:left;
    margin:0px;
    position:absolute;
    left:25px;

}

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Change your HTML order and remove position:absolute

<div class="sidebar">        
     content here
</div>    

<div class="wrapper">  
Content here
    <div class="clearfix"></div>      
</div>
<div class="footer"></div>

DEMO

Upvotes: 1

Related Questions