How to take up center space between to divs? - html

Question

I have 3 divs inside a div wrapper.
Div 1 is set to float:left, Div 3 to float:right.
How can I force Div 2 to take up all the space left, be centered and that all 3 are still in one row?
If i try margin: 0 auto; or overflow: hidden; Div 3 doesn't stay in the same row.
.div_wrapper {
width: 600px;
}
.div_1{
float: left;
}
.div_2 {
margin: 0 auto; NOT WORKING
overflow: hidden; NOT WORKING
}
.div_3 {
width: 60px;
float: right;
}

Answer 1

If you float all three to the left and set their widths to 33.33333%.

Answer 2

The trick to your problem is with the order of your <div> elements, and setting overflow:auto on the parent. The <div> is a block-level element by default, so you don't need to do anything special for it to try to use all available width.
Notice the order of the children: 1, 3, 2
<style>
.div_wrapper {width: 600px; overflow:auto;}
.div_1 {width:60px; float:left;}
.div_2 {}
.div_3 {width:60px; float:right;}
</style>
<div class="div_wrapper">
<div class="div_1">Morbi mollis iaculis egestas. Nullam quis nisi at lorem laoreet congue non sollicitudin ante.</div>
<div class="div_3">Pellentesque sodales, justo eget iaculis egestas, nulla lectus consectetur est, pharetra rhoncus purus tortor vel mauris. </div>
<div class="div_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id justo quis purus suscipit finibus nec eu augue. Suspendisse sollicitudin rhoncus risus, sit amet consequat velit suscipit non. Vivamus faucibus faucibus nisl eu gravida. Etiam id ipsum non lorem semper tincidunt. Suspendisse potenti. Quisque massa orci, venenatis at purus sed, maximus ullamcorper sem. Cras non sollicitudin quam, ut iaculis felis. Donec rhoncus nisi quis sapien imperdiet tincidunt nec et massa. Mauris felis leo, viverra in consectetur quis, malesuada non neque. Cras at magna massa. Cras non tellus vel ex euismod blandit et non dolor. Nullam at ex nisi. Integer feugiat congue euismod. Quisque consequat urna eget ligula finibus pellentesque.</div>
</div>

Answer 3

You can simply use another wrapper inside the first wrapper with the max width of 540px, if 600px is the max width which is also floated to the left. And inside the inner_wrapper it you can simply assign them again a % width.
HTML:
<div class="div_wrapper">
<div class="div_inner_wrapper">
<div class="div_1_2 div_1"></div>
<div class="div_1_2 div_2"></div>
</div>
<div class="div_1_2_3 div_3"></div>
</div>
CSS:
.div_wrapper {
width: 600px;
}
.div_inner_wrapper {
float: left;
width: 540px;
}
.div_1_2 {
float: left;
width:50%;
}
.div_1 {
height: 30px; // only here for displaying the div
background-color: green; // only here for displaying the div
}
.div_2 {
height: 30px; // only here for displaying the div
background-color: yellow; // only here for displaying the div
}
.div_3 {
float:left;
width:60px;
height: 30px; // only here for displaying the div
background-color: red; // only here for displaying the div
}
Example