CODEWITHSUNDEEP
htmlcsscss-floatalignmentparagraph
Green Wizard
Green Wizard

Reputation: 3667

Paragraph alignment in two divs with an image between them

how can i align my paragraph as shown in the following image

this image.

I need to show a newspaper kind of thing in which this should be included.

The following is the html code i'm using

<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>

and the css code is this

*{
margin:0;
padding:0;
}  

.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}

.myImage img{
width:100px;
height:100px;
}

.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}

Upvotes: 4

Views: 651

Answers (1)

LcSalazar
LcSalazar

Reputation: 16841

Create the image element on the left side, floating to the right of the text. Misplace it to the right, half the image's width with "margin". Then, on the right div, create the same effect using a blank div, but inverted. Float the div to the left side of the text and misplace it to the left by half the width. Like this:

<style>
    .right, .left
    {
        width: 200px;
        height: 300px;
        float:left;
    }

    #real-img
    {
        width: 100px;
        height: 100px;
        float: right;
        margin-right: -50px; /* half the width */
        margin-top: 125px; /* vertical align considering page height minus img half height */
    }

    #fake-img
    {
        width:100px;
        height:100px;
        float:left;
        margin-left: -50px;
        margin-top: 125px;
    }
</style>

And the html:

<div class="left">
    <img src="imgurl" id="real-img" />
    [CONTENT_TEXT]
</div>
<div class="right">
    <div id="fake-img"></div>
    [CONTENT_TEXT]
</div>

All of this, of course, considering you hard-code all the sizes.

Upvotes: 1

Related Questions