Hi all,

ok I have problem with getting 3 divs adjusted in the width the way I want.

ok here's what i got:

3 divs within 1 div (parent)
all 3 divs float left
1 div has a fixed width of 220 px
the other 2 I want to adjust automatically in size so I set their width:auto

however, when I type text into one of them not the text goes into a new line but the whole setup creates a new line and breaks the last div into a new line which messes up my design

the text within a div set to width:auto only creates new lines once I change the width from width:auto to something else i.e. 200px or a percentage.

that way however they do not adjust its box size to the content

any smart way to do this?

here's my code:

HTML Code:
<div class="mid">
<div class="picbox">1</div>
<div class="midbox">text that does not create a line break ....</div>
<div class="midbox2">3</div>
</div>
Code CSS:
.mid {
    margin-left:auto;
    margin-right:auto;
    margin-top:3px;
    margin-bottom:3px;
    width:700px;
    height:79px;            
    border:0px solid #000000;
 
 
}
 
.midbox { 
    margin:auto 5px auto auto;
    float:left;
    width:auto;
    height:77px;
    border:1px solid #a2a2a2;
    background-image:url(h2_liste_bgtext.jpg);
    background-repeat:repeat-x; 
    background-position:bottom;
    background-color:#e7e7e7;
 
 
}
 
.midbox2 { 
    margin:auto 5px auto auto;
    float:left;
    width:220px;
    height:77px;
    border:1px solid #a2a2a2;
    background-image:url(h2_liste_bgtext.jpg);
    background-repeat:repeat-x; 
    background-position:bottom;
 
 
}
 
.picbox { 
    margin:auto 5px auto 5px;
    float:left;
    width:auto;
    height:77px;
    border:1px solid #a2a2a2;
    background-color:#FFFFFF;
}


thanks a million

Tino