CODEWITHSUNDEEP
csshtmlrowimage
JSt
JSt

Reputation: 819

How to put 2 pictures next to each other without moving when adding more text in div?

I just started to design a small Webpage to present some designs.
It's a page with 2 columns, with a picture and some text for each.

The problem I have right now: when I add more text to one column, the picture of the other column moves.

Check out my fiddle: http://jsfiddle.net/JannikS/tMY57

My HTML markup: 

  <div id="designrow"> 
      <div class="design"> 
            <img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />          
            <h3>Title </h3> 
            <p>Short description of our design..</p>             
      </div>     
      <div class="design"> 
            <img src="http://www.webdesign-is-art.com/wp-content/uploads/2008/05/goodbytes-webdesign.jpg" />          
            <h3>Title </h3> 
          <p>Short description of our design..<br /> but with some more text!</p>             
      </div>   
</div>

and CSS: 

.designrow { 
 float: left;   }

.design {   
 width: 300px; 
 margin-left: 20px; 
 margin-right: 20px; 
 margin-bottom: 20px; 
 display: inline-block;
  }  

.design img{ 
 width: 100%; 
 height: 100%;  
}

Upvotes: 0

Views: 1308

Answers (1)

Brad
Brad

Reputation: 6332

you're giving your columns display:inline-block, remove that and float:left instead

heres the fiddle: http://jsfiddle.net/tMY57/3/

Upvotes: 1

Related Questions