I'm doing a layout for an online shop. I wanna have a two-column layout, with the two div at the same height, but not for all the divs, but only the two on the same row.
the problem is, that the pictures do not all have the same height, so sometimes the left div is higher which makes the next div come on the right side (float: left).
Is there any way to solved it without the same height for all divs?
HTML:
<div id="inhalt">
<div class="listext">Title<br /><br />
<div><span class="listebild">picture</span>text</div>
<div class="listepreis">price</div>
<div class="listemenge">formular stuff</div>
</div>
<div class="listext">Title<br /><br />
<div><span class="listebild">picture</span>text</div>
<div class="listepreis">price</div>
<div class="listemenge">formular stuff</div>
</div>
<div class="listext">Title<br /><br />
<div><span class="listebild">picture</span>text</div>
<div class="listepreis">price</div>
<div class="listemenge">formular stuff</div>
</div>
CSS:
#inhalt
{
width: 600px;
float: right;
margin-top: 1px;
margin-left: 1px;
margin-bottom:20px;
padding: 10px 10px 20px;
background-image: url(http://www.kostuemkaiser.ch/images/bg_3.png);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
} `
.listebild {
width: 68px;
float: left;
text-align:left;
margin-bottom:25px;
}
.listext {width: 300px;
float: left;
text-align:left;
margin-bottom:25px;
min-height:170px;
}
.listepreis {
float: left;
text-align:left;
padding-top: 20px;
margin-right:15px;
font-size:12px;
}
.listemenge {
float: left;
font-size:12px;
text-align:left;
padding-top: 17px;
}
Is there a way to make the height smaller if the pictures of both divs on the same row is small? I do need this "single div" style, because the data will be filled in automaticaly.
This is how it looks with min-height 170px: the problem if I take it away, sometimes the left div squeezes in at the right side...
Thanx for ideas