CODEWITHSUNDEEP
htmlcss
Neil McGuigan
Neil McGuigan

Reputation: 48256

2 column layout in a series of divs

brain not working today...can't seem to figure this one out. your help is much appreciated.

i have a very simple list of divs like this:

<div class="row">
  <div class="icon">some icon image here</div>
  <div class="message">some long content here</div>
</div>
<div class="row">
  <div class="icon">some icon image here</div>
  <div class="message">some long content here</div>
</div>

I want it to look like this:

IMG  text text text
     text text text

IMG  text text text
     text text text

with no text wrapping around the image, and the above content not overflowing to the next row (rows have background colors).

i don't want to use a background-image image as i want the image to be clickable.

thanks!

Upvotes: 0

Views: 192

Answers (4)

andykrynn
andykrynn

Reputation: 78

For horizontal cells i usually use inline-block styling.

div.row{  
  background-color:#aaa; 
  width:350px; 
}  

div.icon, div.message{  
  display:inline-block;
  vertical-align:top;  
  *display:inline;   /*this is for some older IE browser compatibility*/
}

div.icon{width:50px}

div.message(width:300px}

one other thing to note, when doing it this way, some browsers will render the line break between the and as a space so i usually do this

</div
><div>

otherwise account for some space between the divs and set the individual div widths to be less than the row width, or you will have to deal with wrapping.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

See: http://jsfiddle.net/thirtydot/pFLEP/

.row {
    overflow: hidden; /* clear the floats */
    background: #ccc;
    margin: 0 0 8px 0 /* margin just for demo */
}
.icon {
    float: left
}
.icon img {
    display: block /* remove "space" under image. try commenting this out to see what I mean */
}
.message {
    margin: 0 0 0 74px
}

Upvotes: 3

post_erasmsus
post_erasmsus

Reputation: 1

Another alternative, depending on the document flow would be

.row { display:block; clear:left;}
.icon, .message { display:block; float:left;}

Upvotes: 0

Aleksi Yrttiaho
Aleksi Yrttiaho

Reputation: 8446

If I understood correctly, one option would be 

.icon { position: absolute; } 
.message { margin-left: 32px; }

where it's assumed that the icon is narrower than 32px and there's enough text to prevent rows from overlapping.

Live example.

Upvotes: 1

Related Questions