CODEWITHSUNDEEP
csshtml
SwissSax
SwissSax

Reputation: 3

2 colums div with the same auto height

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

Upvotes: 0

Views: 126

Answers (2)

Adam McElroy
Adam McElroy

Reputation: 458

Use inline-block instead of floating and your problem should go away. Change your .listext class to the following:

.listext {
    width: 298px;
    display: inline-block;
    text-align:left;
    margin-bottom:25px;
 }

Note that we had to take a few pixels off the width in order for inline-block to work. I've also removed the min-height as it is no longer necessary.

For more information on inline-block, I'd suggest reading this article.

Upvotes: 1

silicakes
silicakes

Reputation: 6902

I gather that you want the left and right bit to be aligned, however i couldn't get that from your question and layout so instead i've made you a POC which shows you how using

display: table;

and 

display: table-cell;

can solve your issue: http://jsfiddle.net/B2k2a/1/

Upvotes: 0

Related Questions