Float image to bottom after text

Question

I have a div containing a floating image and a flanked text. If image is floated to left text is flanked right, if image is floated to right text is flanked left. To display everything fine I've put the img element before the text and used the + selector in CSS to give a proper margin to text (see code below).

For small screens, I would like to display text and image as blocks (100% width), with image placed below text. I've tried to use absolute positioning as suggested here, but it didn't work: image is always displayed above. How can I accomplish my goal? Thanks in advance.

HTML

<div class="wrapper">
    <img class="sectionimage left" src="image.jpg" />
    <div class="sectiontext"> <p>Some text.</p> </div>
</div>

CSS

.wrapper {
    overflow:hidden;
}

.sectionimage { /* must always be before text, even if floated right */
    vertical-align:bottom; 
    max-width:400px;
}

.left {
    float:left;
}

.right {
    float:right;
}

.left + .sectiontext {
    margin-left:500px; /* left margin for text after a "left" image */
}

.right + .sectiontext {
    margin-right:500px; /* right margin for text after a "right" image */
}

/* images and text displayed as blocks */
@media only screen and (max-width:950px) 
{
    .sectionimage, .sectiontext {
        display:block;
        width:100%;
    }

    .sectionimage {
        float:none;
    }

    .sectiontext {
        margin:0px !important;
    }
}

JSFiddle Here

This might help you out: http://stackoverflow.com/questions/22253856/align-text-under-picture-in-relation-to-picture-width — Paulie_D, Mar 07 '14 at 15:41
If only I could put `img` after text in HTML, everything would be fine. But the problem in that case would become: how can I select the text before `img` in CSS to give it a margin? — Giorgio, Mar 07 '14 at 15:50

score 2 · Accepted Answer · answered Mar 07 '14 at 16:35

Would the below work for you?

Example Fiddle

HTML

<div class="wrapper">
    <div class="sectiontext left">
        <p>Some text.</p>
    </div>
    <img class="sectionimage" src="image.jpg" />
</div>

CSS

.wrapper {
    overflow:hidden;
}
.sectionimage {
    /* must always be before text, even if floated right */
    vertical-align:bottom;
    max-width:400px;
    display:inline-block;
}
.left {
    float:left;
}
.right {
    float:right;
}
.left {
    margin-right:500px;
}
.right {
    margin-left:500px;
}
/* images and text displayed as blocks */
 @media only screen and (max-width:950px) {
    .sectionimage, .sectiontext {
        display:block;
        width:100%;
    }
    .sectionimage {
        float:none;
    }
    .sectiontext {
        margin:0px !important;
    }
}

Giorgio · Answer 2 · 2014-03-07T17:11:26.190

Another way I've found, hope it can be a nice alternative.

HTML

<div class="wrapper">
    <div class="sectiontext right">
        <p>Some text.</p>
    </div>
    <img class="sectionimage" src="image.jpg" />
</div>

CSS

.wrapper {
    overflow:hidden;
}

.sectionimage { 
    max-width:300px;
}

.left {
    float:left;
    display:inline-block;
    width:calc(100% - 350px);
}

.right {
    float:right;
    display:inline-block;
    width:calc(100% - 350px);
}

/* text displayed as block */
@media only screen and (max-width:500px) 
{
    .sectiontext,.sectionimage {
        width:100%;
    }
}

Here's the working fiddle. Hope it helps someone.

Float image to bottom after text

2 Answers2

Example Fiddle