tags:

views:

352

answers:

2
+4  Q: 

How do I convert this HTML-table layout solution to floating-div solution?

I often need to list items with various-sized images on the left and text on the right, like this:

alt text

For 17 years, I have solved this with HTML tables, like this:

<html>

  <style>

    * { margin: 0; padding: 0 }

    body {
      padding: 20px;
    } 

    #content {
      width: 600px;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
      background: green;  
    }

    .item {
      margin: 0 0 20px 0;
    }

    .itemIcon {
      float:left;
    }

    .itemBody {
      float:right;
    }

    .clear {
      clear: both;
    }

  </style>

<body>

<div id="content">

  <div class="item">
    <div class="itemIcon">
      <img src="icon.png" alt=""/>  
    </div>
    <div class="itemBody">
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/>
  </div>

  <div class="item">  
    <div class="itemIcon">
      <img src="bigIcon.png" alt=""/>  
    </div>
    <div class="itemBody">
      <h1>This is the second item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>    
    <br class="clear"/>
  </div> 

  <div class="item">
    <div class="itemIcon">
      <img src="icon.png" alt=""/>  
    </div>
    <div class="itemBody">
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/>
  </div>

</div>

</body>
</html>

Everytime I have tried to switch to floating divs, it has failed for one reason or another, here is my current attempt:

alt text

What do I have to change to this code so that this div solution looks like the table solution?

<html>

  <style>

    * { margin: 0; padding: 0 }

    body {
      padding: 20px;
    } 

    #content {
      width: 600px;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
      background: green;  
    }

    .item {
      margin: 0 0 20px 0;
    }

    .itemIcon {
      float:left;
    }

    .itemBody {
      float:right;
    }

    .clear {
      clear: both;
    }

  </style>

<body>

<div id="content">

  <div class="item">
    <div class="itemIcon">
      <img src="icon.png" alt=""/>  
    </div>
    <div class="itemBody">
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/>
  </div>

  <div class="item">  
    <div class="itemIcon">
      <img src="bigIcon.png" alt=""/>  
    </div>
    <div class="itemBody">
      <h1>This is the second item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>    
    <br class="clear"/>
  </div> 

  <div class="item">
    <div class="itemIcon">
      <img src="icon.png" alt=""/>  
    </div>
    <div class="itemBody">
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    <br class="clear"/>
  </div>

</div>

</body>
</html>
+2  A: 

This isn't terribly flexible - you have to set the padding for each DIV depending on the image, but its very clean markup wise:

<style>
div.one {
   padding-left: 210px;
   overflow: auto;
}
div.one img {
    float: left;
    margin-left: -210px;
}
</style>


<div class="one">
<img src="http://www.pixeloution.com/breakdown.png" width="200" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit orci sed turpis aliquet ac mattis sem t...
</div>

See it in action at: http://jsbin.com/iniqu3/2

Notice if you make your screen very narrow, the text does not wrap around the image, as per your example.

Erik  2010-02-28 13:33:50
And you can overwrite the div.one and div.one img styles by giving the div different classes and using the cascade, if the possible sizes are known. div.one.big { padding-left:300px; } div.one.big img { margin-left:-300px } and so on.
D_N  2010-02-28 14:16:20
+1  A: 

You could make it sort-of work by adding a width to the <p> within itemBody (and some padding to make it nice):

.itemBody p { 
  width:400px;
  padding-left:20px;
}

.itemBody h1 { 
  padding-left:20px;
}

The problem with this solution is that the right edges of the paragraphs will be aligned differently depending on the image size, and the text could still fall to the next line if the image is pretty wide. If you can dynamically size things with server-side code based on the image size, then this would be ok. (Or I suppose you could do the resizing in javascript.)

I really think this is a problem still best solved with tables. You get the dynamic width adjustment and everything stays on the same line, no matter what size your images and text are. No hacks, no fuss, works in all browsers.

Ray  2010-02-28 14:15:11

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?