My name is Edward Tanguay. I'm an American software and web developer living and working in Berlin, Germany.

Categories

My Older Tutorials

My Old Web Dev Site

WPF CODE EXAMPLE created on Sunday, February 28, 2010 permalink
How to make a CSS layout for icon-left, text-right with floating divs
One of the only ways to get an image-left / text-right layout to work in HTML when you have various-sized images is to use HTML tables. However, if you are generating your code with a script and you know the width of your images (or if all of your images are the same width), you can use this floating-div solution. Note that in this example I have to use in-line styles to indicate the width of each icon image, but if you need to avoid tables, this is nice solution.
> > > View Demo
<html>

    <style>
    
    * { margin: 0; padding: 0 }
    
    body {
        padding: 20px;
        text-align: center;
        background-color: #333;
    }
    
    p {
        margin: 0 0 10px 0;
    }
    
    #content {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        background: brown;
        border: 1px solid #555;
        text-align: left;
    }
    
    .item {
        margin: 20px;
        background-image:url('paperBackground.jpg');
        padding: 20px;
    }
    
    .itemIcon {
        float:left;        
    }
    
    .itemIcon p {
        font-size: 8pt;
        margin: 5px 0 0 0;
    }
    
    .itemBody h1 {
        font-size: 18pt;
        color: brown;
        margin: 0 0 10px 0;
    }
    
    .clear {
        clear: both;
    }
    
    </style>

<body>

<div id="content">
    
    <div class="item">    
    <div class="itemIcon" style="width: 70px; padding-left: -80px">
        <img src="icon.png" alt=""/>
        <p>This is the caption that is under the image.</p>
    </div>
    <div class="itemBody" style="margin-left: 80px">    
        <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>
        <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>
    </div>
    
    <div class="item">    
    <div class="itemIcon" style="width: 160px; padding-left: -170px">
        <img src="bigIcon.png" alt=""/>
        <p>This is the caption that is under the image and it is a very long text so it is going to wrap a couple times here in the left column under the image.</p>    
    </div>
    <div class="itemBody" style="margin-left: 170px">    
        <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>
        <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>    
    </div>
    
        
</div>

</body>
</html>
need markup?
 

Most Recently Added Items: