Container background gone couse of floating divs

HTML & CSS
1

Hey,

I’m having a little difficulty with my design.

Here’s problematic html piece:

<div class="komenhold"><div class="komentatorius">...</div><div class="komentaras">Komentarai cia visokiausi</div><div class="comID">5</div></div>

Here’s css piece:

.komenhold
{
	width: 593px;
	height: 150px;
	border: 1px solid #c3c2c2;

	background-image:url('grafika/combg.png');
	background-repeat: repeat;
}

.komentatorius
{
	width: 100px;
	height: 100px;

	background-color: #6f6f6f;

	text-align: center;

	margin: 10px 10px 10px 10px;

	float: left;

}

.komentaras
{

	float: left;
}

.comID
{
	display: inline;
	float: right;
}

As you can see there is holding div and 3 other divs inside it. I have set background and border for holding div (the divs inside are floating, two first to left, comID div to right), and if holder div (komenhold) has height set everything is okey and looks like this:

But the thing is that I dont want a fixer height on “komenholde” div, so I’m removing it and holder div doesn’t count floating div’s as content and I get this:

You can see only border of holding div…

What can I do to have wanted result without fixed holder height?

2

Try adding

overflow: hidden;

to the container.

For a better explanation that I could offer, try googling “containing floats”. :slight_smile:

3

Yup, worked :slight_smile: Thanks!

I feel so lame, have to lear a lot of things… Good that there are such places as SitePoint ^.^

4

No applause, just send money.