How to make this CSS layout - css

Question

Hi, i want to make this layout.
I am trying to do it in this way:
<div class="container" >
<div class="picture_cont">...</div>
<div class="info">...</div>
<div class="price">...</div>
</div>
And CSS
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
}
.container .info {
float: left;
}
But i am getting this picture:
There is some issue with right column.
How to make it right ?

Answer 1

A mix of relative and absolute positioning will also do the trick. Something like this:
.container{position:relative;}
.picture_cont{position:absolute;left:0;top:0;bottom:0;width:100px;border-right:...}
.info{position:absolute;left:101px;top:0;bottom:0;right:151px;}
.price{position:absolute;right:0;top:0;bottom:0;left:150px;border-left:...}
Here's a fiddle to demonstrate.

Answer 2

you are missing overflow:auto;
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
overflow:auto;
}
.container .info {
float: left;
}

Answer 3

You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces a new block formatting context restoring the flow of the .info container to be independent of the floated sidebars. (Note that you need to be careful of collapsing margins and non-staticly positioned elements to avoid scrollbars).
HTML
<div class="container" >
<div class="picture_cont">...</div>
<div class="price">...</div>
<div class="info">text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
CSS
...
.container .info {
overflow: auto;
}
Fiddle Demo
Source: http://jsfiddle.net/StMLm/
Demo: http://jsfiddle.net/StMLm/show

Answer 4

Because the items are floated and the middle has no specified width, the last item will "feel" the text of the second ("info") and be bumped down below it -- there is nothing telling info that, instead, it should stop 200px from the right edge. (150px? -- your picture and CSS don't match up)
One way to achieve that is to put right-padding of 200px (150px?) on info and then move the right-column into place with some CSS trickery: see In Search of the Holy Grail for this classic solution.
A newer approach is to use display:table on the container display:table-cell on the 3 inner parts, set the width's on the left- and right-columns, and be done with it.

Answer 5

You're using floats, so all your containers are independant, which means you can't base position and size on other containers. So in your case you'll have to specify a width for your containers so that they are fixed and don't overlap each other.
Also try and put a "top" of 0px on your price container. This should help out.

Answer 6

I typically use "inline-blocks" and fluid widths. This nice thing about this method is you can add a "min-width: 240px" and your UI will stack on mobile devices. (jsFiddle)
div.container {
width: 100%;
}
div.container div {
border: 1px solid blue;
overflow: auto;
height: 10em;
display: inline-block;
margin: -3px;
padding:0;
}
div.info {
width: 70%;
}
div.picture_cont,
div.price {
width: 15%;
}