2 column layout in a series of divs

Question

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!

score 3 · Accepted Answer · answered Apr 07 '11 at 21:38

3

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
}

answered Apr 07 '11 at 21:38

thirtydot

224,678
48
389
349

The `overflow: hidden` rule doesn't make much sense to me as I understand it as a clipping rule. However the more self-evident `clear:both` does not allow the `.row` to extend. Is the functionality defined in the spec or what is it based on? – Aleksi Yrttiaho Apr 07 '11 at 23:36
1

@Aleksi: `overflow: hidden` is a well known technique to clear floats. [Give this question](http://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix/5566093#5566093) a read. Also worth a read: [http://www.quirksmode.org/css/clearing.html](http://www.quirksmode.org/css/clearing.html) – thirtydot Apr 07 '11 at 23:41
Thanks! That has escaped my attention for too long. It's too easy to implement the same with more complexity. – Aleksi Yrttiaho Apr 07 '11 at 23:46

Aleksi Yrttiaho · Answer 2 · 2011-04-07T21:20:14.063

1

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.

edited Apr 07 '11 at 21:20

answered Apr 07 '11 at 21:14

Aleksi Yrttiaho

8,266
29
36

Unfortunately, this won't work when the height of the image is greater than the height of the text. For an exaggerated example, see: http://jsfiddle.net/thirtydot/zfLpE/8/ - However, I do like your idea of using the Gravatar image :) – thirtydot Apr 07 '11 at 22:56
I was aware of the unfortunate limitation. Whether or not the limitation is relevant depends on the amount of text per icon. If the use case does have enough text then doing anything more complicated is just a waste of effort, clarity and bandwidth. – Aleksi Yrttiaho Apr 07 '11 at 23:14
I'd agree if there wasn't an easy way to fix the issue; but *there is* an easy way; see my answer. I'm actually using *less CSS* than you are. You can have a +1 anyway for effort :) – thirtydot Apr 07 '11 at 23:16

score 0 · Answer 3 · edited Apr 07 '11 at 21:24

0

Another alternative, depending on the document flow would be

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

edited Apr 07 '11 at 21:24

Aleksi Yrttiaho

8,266
29
36

answered Apr 07 '11 at 21:21

post_erasmsus

1

The benefit (and disadvantage) of this approach is that it will give as much space to the icon as needed. It's a disadvantage because the overall look will be less clean if there's variation of the offset of the message text. – Aleksi Yrttiaho Apr 07 '11 at 21:26
True, although such a variation could be easily offset by defining a box dimensions for the .message divs, the .icon divs, or both. – post_erasmsus Apr 07 '11 at 21:30

score 0 · Answer 4 · answered Apr 07 '11 at 22:30

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.

2 column layout in a series of divs

4 Answers4