Grow your CSS skills. Land your dream job.

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:
    http://codepen.io/mtedwards/pen/qpCnb

    Mobile:
    http://codepen.io/mtedwards/pen/DJtnx

    Any ideas how to achieve this?

    Thanks

    Matt

    # 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>
    <div class=”buttons”>
    </div>
    </div>

    # 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?

    Matt

    # June 20, 2013 at 5:16 am

    Yeah…something like this: http://codepen.io/Paulie-D/pen/Hyubs

    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: http://codepen.io/CrocoDillon/pen/kmGCw

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

    # June 20, 2013 at 6:22 am

    @CrocoDillon

    Nice…

    # June 20, 2013 at 6:23 am

    @CrocoDillon

    Brilliant. Thanks mate

    Matt

    # June 20, 2013 at 6:46 am

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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".