The floated divs give parent no height problem

HTML & CSS
1

I have tried to create a responsive design with a border graphic.
The problem part is a div containing 3 floated divs.
The left floated div has an 1px high image in it set to be 100% height and the div is set to be 100% height. The right is the same.
The center div has a large graphic in it which gives it height. (this is just to simulate content for now)
This height is not transferred to the parent, thus the left and right divs do not expand to match the height of the center div.

Hope that makes sense. It does actually work in Safari/Chrome so you can see what I want in one of those browsers
It does not work in Firefox. Is there a trick to fix this?
Example here http://gasolicious.com/questions/curves_images_2.html

while I am asking what causes the gap in the side borders at the bottom in Safari/Chrome?

2

Ok seems I fixed the parent height by putting a clear:both div after the 3 floated divs.
My parent div shows height in firebug. My left and right divs and the images they contain do not expand to match though even with height:100% on both?

3

yup, whenever you float elements they are taken out of the ‘regular flow’ and thus the parent no longer 'contains ’ them. to fix this you need to auto clear the parent.

you found ONE way to do it. That is by putting (or using an existing ) a child element after the floats with clear:both;
another way is to float the parent element; ( of course, now the parent is now out of the regular flow of it’s parent)
you can create a pseudo element as well! .parent:after { content:“”; display:block; clear:both; }
by far the most popular method is to give the parent overflow:hidden|auto ; do note that display:table; and display:inline-block; also work but have their own specific limitations.

and that’s the crash course on containing floats. hope it helps.

4

Thanks,
I still have the issue of the child divs, ‘left’ and ‘right’ and the images in them not inheriting their height from the parent. If you look at the page you will see two 1 pixel high x 18px wide images. I am trying to set these to be as full height side borders. I don’t want to use background repeat as they will not scale with the div on different screens.
I have this CSS, inner is the parent of all 3 floated elements, left content, right. content has the big test image which gives it height. In chrome the left/right border images stretch, in Firefox they do not.

#inner{
width:100%
height:100%;
overflow:hidden;
}

#content{
float:left;
width:97%;
height:100%;
text-align:center;
}

#left{
float:left;
width:1.5%;
height:100%;
}

#right{
float:right;
width:1.5%;
height:100%;
}

#left img, #right img{
width:100%;
height:100%;
}
5

Hi,

You can’t base a percentage height on a parent that has no height defined or is height:auto or its height is only determined by its content. That more or less precludes you from ever using height:100% for static elements as it just won’t work and if it does work then it’s because the parent has a fixed height anyway (read the css faq on 100% height for a more detailed answer).

It would be possible to place the element absolutely and it will match a relatively place parent as long as the absolute element contains no actual content other than the decoration image.

In your layout this would equate to:


#contain{min-width:940px}
#inner{
position:relative;
zoom:1.0;
min-width:940px;
}

#left,#right{
position:absolute;
left:0;
top:0;
bottom:0;
width:18px;
}
#right{
left:auto;
right:0;
}

However you are unlikely to get a smooth join because your top and bottom images are scaled and when squashed are no longer 18px wide and do not match your side images.

Also as you have a fixed width image in the middle of the page you will need to set a min-width on your page to match that image or the page will shrink behind the image and look odd.

6

This seems to work following your idea and using percentages. I already suggested to the designer that he make a new graphic with side images an even whole number percentage of the top and bottom graphic as opposed to 1.5%.
Works in Firefox, except for the tiny space on top of the left and right, any idea what would fix that?
http://gasolicious.com/questions/curves_images_2.html

#inner{
width:100%
height:100%;
overflow:hidden;
position:relative;
zoom:1.0;
}

#content{
float:left;
width:97%;
height:100%;
margin-left:1.5%;
text-align:center;
}

#content img{
width:90%;
height:auto;
}

#left{
position:absolute;
left:0;
top:0;
bottom:0;
width:1.5%;
}

#right{
position:absolute;
top:0;
bottom:0;
left:auto;
right:0;
width:1.5%;
}

#left img, #right img{
width:100%;
height:100%;
}
7

Hi,

I’m not sure I can see a space exactly. There is obviously a slight pixelated effect on the join but I don’t see a gap as such.

If it’s a rounding error you could try top:-1px instead of top:0 but I’m not sure that’s what you meant.