Box dosent fill 100% when scrooling

Hi

I have a left box who is set to height:100%, it fills 100% when opening page, but when scroolig it dosent follow.

Have also tryed with background-repeat: repeat-y;background-attachment: scroll; but also it will not follow when scrooling.

Anyone have i idea why i cant get this working.

Excample can be seen here: http://www.power-up.dk/test2/test/index.php

Css url: http://www.power-up.dk/test2/css/css.css

CSS Source:

#left{
position:absolute;
top:0px;
left:5px;
width: 155px;
height: 100%;
background-color:#8fbee8;
z-index:1;
}

Thanks in advance

Ryan

 

I feel for you my friend, this is one of the biggest pains of CSS, but there is workarounds!

The way i've solved it is put both my sidenav and maincontent in a container div. e.g.

<div id="container">
<div id="sidenav">
</div>
<div id="maincontent">
</div>
</div>

Now don't specify the heights of any of those items, e.g. don't specify a fixed height or a percentage, CSS doesn't do heights like tables e.g. it only calculates the height of a percentage once while rendering a page (my biggest beef about CSS)

so sidenav would be

#sidenav{
float: left;
width: 100px;
}

Maincontent

#maincontent{
float: right;
width: 700px;
}

#container{
width: 800px;
}

That's very basic but I hope you get the idea,

also don't get me wrong CSS is the way of the future but some of the way it calculates heights and widths I hate compared to tables.

You can see an example of how I implemented this idea at my site http://www.psdesignzone.com (view the CSS file).

Another option to solving this would be Javascript

 

Hi, thank you for your answer.

I can see the point but just cant get it working at all.

Any idea what im doing wrong.

And another think, how do you get your background repeat? Can see in your css that you dont have the repeat-y.

http://www.power-up.dk/test2/test/index.php

Again thanks

 

Not sure if I understand your question correctly, but I think your answer is Faux Columns:
http://alistapart.com/articles/fauxcolumns/

 

Hi Mano70

My problem is when i have a long page with scroolbars. My left box dosent follow when i scrool down.

My english suck a little, sorry

Ryan

 

I don't see any background color in your left box (I think your CSS is pointing to a wrong image location).

Anyway, using absolute positioning is not the right thing to do, you take your div out of the flow of the page.

If you wan't the left box to have the same height (give the impression of having the same height) as your content, faux columns is your answer.

 

I had figured out a little more, begin to look like something

Yes i know absolute not is the best, but how else will i be able to place layers on layers. Ex in my header i should have a php clock script. But without absolute i will not be able to place it on top of the header.

http://www.power-up.dk/test2/test/index.php