2 replies [Last post]
Luton UK
Last seen: 14 years 30 weeks ago
Luton UK
Joined: 2007-08-12
Posts: 29
Points: 0

Hey all

I have some floating containers of extendable height, and I wanted a vertical spacer similar to but obviously the equivalent.

Now I know doesnt actually exist, so I wondered (without using tables), is it possible for a div to get its height from its container if that height isnt set?

As I understand it, a div will be 100% if its parent container has a set height, but the container it will be in, gets its height from the child which expands depending on the contents.

I would just give one of the containers a side border but it needs to be a tiled image vertical rule

I know I have posted no code, but I havent started yet its more of a question than a 'fix my code' request

cheers in advance

briski's picture
Last seen: 10 years 34 weeks ago
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

HI, Really not quite sure


Really not quite sure what you are asking exactly as you seem to answer your own question, in that, no a div can't get it's height from it's container.

Have you looked at http://www.alistapart.com/articles/fauxcolumns/ which deals with pretending boxes are the same height?

Stomme poes
Stomme poes's picture
Last seen: 11 years 15 weeks ago
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

So no, you dont' get a 100%

So no, you dont' get a 100% height like you get 100% width by default... however you could set a min-height on stuff, which means it will keep that height even when there's not enough content.

Or, you can actually set a height, but in most browsers that means the content can't make it grow further (unless you use overflow: auto or scroll so that the height remains and a scrollbar lets people read further).

There is a trick I saw some guy in India do, it was pretty clever.... someone wanted a three-column page where the middle one was variable content and could grow... he wanted the sidebars to go along with whatever height the middle was. So, this Indian guy floated and wrapped each column with each other, and the length of the middle could then set the length of the rest.

It was something like,
left column, 100% width, floated left, and containing:
middle and right were one div 66% width, floated right, and containing:
actual middle column, 33% width and floated left... since it's the innermost float, it set the height for the other two.

It was a neat trick.

I'm no expert, but I fake one on teh Internets