CODEWITHSUNDEEP
csscss-float
Giorgio
Giorgio

Reputation: 1970

Float image to bottom after text

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

Upvotes: 1

Views: 1944

Answers (2)

Giorgio
Giorgio

Reputation: 1970

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.

Upvotes: 1

SW4
SW4

Reputation: 71150

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;
    }
}

Upvotes: 2

Related Questions