I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.
For example:
<div id="wrapper">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
</div>
Css:
#first,#second,#third,#fourth{
float:left;
}
#second{
width:auto;
overflow:hidden;
}
#first,#third,#fourth{
width: 200px;
}
Thanks for help
This can be achieved using display: table-cell jsfiddle
#wrapper .item{
display: table-cell;
width: 150px;
min-width: 150px;
border: 1px solid #777;
background: #eee;
text-align: center;
}
#wrapper #second{
width: 100%
}
<div id="wrapper">
<div id="first" class="item">First
</div>
<div id="second" class="item">Second
</div>
<div id="third" class="item">Third
</div>
<div id="fourth" class="item">Fourth
</div>
</div>
#wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;}
#first{
float: left;
}
#wrapper #second{
width: auto;
background: #ffc;
border: 1px solid #f00;
min-width: 100px;
overflow: hidden;
}
#first, #third, #fourth{
width: 200px;
}
#third, #fourth{float: right;}
Markup, Move #second to end
<div id="wrapper">
<div id="first">First</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
<div id="second">Second</div>
</div>
i think you might be looking for this one:
This is for your reference if you are having such a thing then you can do the trick with this, i exactly don't know how your css looks like but this is basic idea.
CSS
#wrapper
{
width:960px;
}
#first
{
float:left;
width:240px;
}
#second
{
width:240px;
float:left;
}
#third
{
float:left;
width:240px
}
Here your last div width will be set automatically.
