CODEWITHSUNDEEP
htmlcssalignmentcss-float
Sandman
Sandman

Reputation: 2379

image alignment around paragraph

So, I basically have this code:

<div class='imgpos_1'><img></div>
<div class='imgpos_3'><img></div>
<div class='imgpos_5'><img></div>
<div class='paragraph'>My text</div>

And the image positions should all float differently around the paragraph. In pseudo-ascii:

+-+    +-+    +-+
|1|    |2|    |3|
+-+    +-+    +-+
+-+ My text a +-+
|4| nd my par |5|
+-+ agraph    +-+
+-+    +-+    +-+
|6|    |7|    |8|
+-+    +-+    +-+

So, to explain. POsition 1-3 Should be left, centered and right-aligned ABOVE the paragraph. Position 4 and 5 should be left and right-aligned inside the paragraph, and position 6-8 is the same as 1-3, only under the paragraph.

So, in my initial code above, how do I make .imgpos_1 float left above the paragraph while .imgpos_5 floats right inside the paragraph. Or do I need to re-arrange my markup in some way?

I.e. my above code would result in this ascii-rendition: 

+-+           +-+
|1|           |3|
+-+           +-+
My text and m +-+
y paragraph   |5|
              +-+

Any help is appreciated.

Upvotes: 1

Views: 331

Answers (2)

i.am.michiel
i.am.michiel

Reputation: 10404

Checkout 960.gs. You will be able to layout components without a problem.

<div class="container_12">
    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>

    <div class="grid_4"><img ></div>
    <div class="grid_4">Your text here</div>
    <div class="grid_4"><img ></div>

    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>
    <div class="grid_4"><img ></div>
</div>

Upvotes: 0

Roman Sklyarov
Roman Sklyarov

Reputation: 971

<style>
.img_pos { float: left; }
.clearer { clear: left; }
</style>

<div class="img_pos">1<img></div>
<div class="img_pos">2<img></div>
<div class="img_pos">3<img></div>

<div class="img_pos clearer">4<img></div>
<div class="img_pos paragraph">Text</div>
<div class="img_pos">5<img></div>

<div class="img_pos clearer">6<img></div>
<div class="img_pos">7<img></div>
<div class="img_pos">8<img></div>

It is very desirable to specify the element's dimensions.

Another solution:

<style>
.wrapper { display: table; }
.row { display: table-row; }
.row * { display: inline; } /* for IE */
.cell { display: table-cell; width: 33%; }
</style>

<div class="wrapper">
    <div class="row">
        <div class="cell"><img></div>
        <div class="cell"><img></div>
        <div class="cell"><img></div>
    </div>
    <div class="row">
        <div class="cell"><img></div>
        <div class="cell">
            <p>...lorem ipsum dolor sit amet...</p>
        </div>
        <div class="cell"><img></div>
    </div>
    <div class="row">
        <div class="cell"><img></div>
        <div class="cell"><img></div>
        <div class="cell"><img></div>
    </div>
</div>

Upvotes: 1

Related Questions