The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Responsive Design – Float a div right, then move underneath

  • # June 19, 2013 at 9:49 pm

    Hi Guys,

    I am currently building a responsive site and I am trying to solve an issue I have run into.

    In peoples biographies we have a chunk of text and then a group of links to their social profiles.

    What I am trying to achieve is to have the buttons float to the top right, with the bio text wrapped around the div on a large layout and then at a certain point clear the buttons below the text.

    I’ve made two pens for the 2 states:

    Full width:


    Any ideas how to achieve this?



    # June 19, 2013 at 10:10 pm

    Edit: hm, the below might work but it’s actually not so straightforward as i thought. Would need one of the divs go from display:block to display:float as it goes into mobile mode.

    I would suggest putting the div with the class “buttons” inside a container div, then floating it to the top right. In the container div you can place your text there.

    The container div’s width would be set to 100%.

    You would also need to include another container (i’ve called it primarycontainer) and set that width to something also.

    It would require 3 divs total.

    <div class=”primary container”>
    <div class=”container”>
    Chunk of text
    <div class=”buttons”>

    # June 20, 2013 at 5:00 am

    Hi @GSimon,

    I’m not sure that would do the trick.

    I am assuming you are talking about floating both the internal divs for larger screens and then display block from smaller screens?

    This wouldn’t allow for the text to wrap around the div.buttons I don’t think?


    # June 20, 2013 at 5:16 am

    Yeah…something like this:

    The text won’t flow around the buttons div though. Not sure you can do that with multiple paragraphs.

    # June 20, 2013 at 6:19 am

    Fake float using a :before pseudo-element:

    The :before element is to create the space for the absolute positioned buttons element.

    # June 20, 2013 at 6:22 am



    # June 20, 2013 at 6:23 am


    Brilliant. Thanks mate


    # June 20, 2013 at 6:46 am

    @Paulie_D, thanks :P @mtedwards, you’re welcome!

    # November 8, 2014 at 11:35 am


    Thanks! Just what I was looking for.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed