How to put three floated div with different widths? - html

Question

Look at the next image. I drew three rectangules (black, red and yellow) and each one receives different widths:
First column: 33%
Segund column: Remaining width (?)
Third column: 15px;
All of them are float. My first try was putting the first two columns, but was not a big deal (putting 66% in the second), but when I introduced the third column, I got trouble. I´m not sure what approach could I use to deal with these widths.
This is the DOM I have created:
<article class="cart-item">
<div class="left">
<img src="images/item1.jpg"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
</div>
</article>
Some of the CSS I have:
.left {
float: left;
width: 33.33%;
padding-left: 15px;
}
.center{
float: left;
width: ?;
padding-left: 15px;
padding-right: 15px;
}
.right {
float: left;
width: 15px;
background-color: #CCCCCC;;
}

Answer 1

First column: 33% Second column: Remaining width (?) Third column:
15px;
All of them are float.
If you are stuck up with float and cannot change the markup, then a simple calc would serve your purpose. But, that will introduce other problems. You will need to specify the height of the container, otherwise getting the images to align will become a nightmare for you. Especially the last one.
It will look something like this:
.cart-item {
width: 320px; height: 120px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div { float: left; height: 100%; }
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66;
}
Demo Fiddle 1: http://jsfiddle.net/abhitalks/3sz149f0/
Demo Snippet 1:
.cart-item, .cart-item * { box-sizing: border-box; }
.cart-item {
width: 320px; height: 120px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div { float: left; height: 100%; }
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66;
}
<article class="cart-item">
<div class="left">
<img src="//placehold.it/64x64/66c"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
</div>
</article>
If you can change the markup and styles, then do not use float. Just use a table layout and then it would be super easy for you to arrange the content without relying on explicit height on the container.
It will look something like this:
.cart-item {
display: table;
width: 320px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div {
display: table-cell; vertical-align: middle; text-align: center;
}
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66; text-align: left;
}
Demo Fiddle 2: http://jsfiddle.net/abhitalks/d1qdyxrf/
Demo Snippet 2:
.cart-item, .cart-item * { box-sizing: border-box; }
.cart-item {
display: table;
width: 320px; overflow: hidden;
border: 1px solid #ccc;
}
.cart-item > div {
display: table-cell; vertical-align: middle; text-align: center;
}
.cart-item .left { width: 33%; border: 1px solid #333; }
.cart-item .right { width: 15px; border: 1px solid #ee3; }
.cart-item .center {
width: calc(100% - 33% - 15px);
border: 1px solid #e66; text-align: left;
}
<article class="cart-item">
<div class="left">
<img src="//placehold.it/64x64/66c"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
<img src="//placehold.it/6x32/666"></img>
</div>
</article>

Answer 2

Try
div.center { width: calc(66% - 45px); }
45px = 30px padding + 15px width of right column