[css] div problem

[thesti]

hi,

english isn't my native language. i'm sorry if i don't describe my problem clearly

so, it's like this

i have a div tag, which work like a wrapper/container. inside it i have two div tags, one with float:left (i put image inside this div), the other is float:right. these two tags have different height. the problem is, the outer div only wrap until the shorter one, the div containing and image appear over the wrapper.

how to make the div wrap all of it? or is there any work around?
thx.

[drhowarddrfine]

Elements are never to expand to contain floated elements. This is proper behavior. To get an element to expand, add 'overflow:auto' to the CSS of the wrapping div.

[thesti]

thx drhowarddrfine for your great help,

it works !

[thesti]

oh no....,

it doesn't work in IE 6. is there any work around with IE 6?

thx

[drhowarddrfine]

It may be because they have different heights but I need to see the markup to help. IE treats 'height' as 'min-height' but min-height doesn't work in IE. Any wonder why I say IE is the worst browser on the planet?

[thesti]

thx drhowarddrfine,

well this is not the one that have different heights, but IE 6 also doesn't wrap until the bottom of the inner divs. because the inner div is floated.

here is the html code

[HTML]
<div class="block">
<div class="people" >
<div class="noPictur e">NA</div>
<div style="text-align:center">
<a class="name" href="profile/viewprofile.php ?922f4556" >iwan</a>
</div>
</div>
<div class="people" >
<img class="picture" src="images/imgs/d97b01ea" />
<div style="text-align:center">
<a class="name" href="profile/viewprofile.php ?d97b01ea" >ucok</a>
</div>
</div>
</div>
[/HTML]

here is the css style

.block
{
    background-color:#D1EFFA;
    overflow:auto;
	
	max-width:424px;
	
	padding:18px 24px 18px 18px;
	margin-bottom:32px;
}

.people
{
    float:left;
    margin-right:32px;
}

.picture
{
    max-width:64px;
    max-height:64px;
    
    width: expression(this.width > 64 ? 64: true); /* for IE 6 */
    height: expression(this.height > 64 ? 64: true); /* for IE 6 */
}

.noPicture
{
    width:64px;
    height:64px;

    text-align:center;
    vertical-align:text-center;
    
    border:1px solid black;
}

.name
{
     font-size:11px;
     text-decoration:none;
     color:#1D3381;
}

well, actually all that i want to achieve is a - horizontally aligned blocks within a wrapping block. if there are other ways than using float, it's okay as long as it works on browsers.

thx

[karlectomy]

oops i did it again...