Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Design – Float a div right, then move underneath

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #45685
    mtedwards
    Member

    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

    #139501
    GSimon
    Participant

    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>

    #139556
    mtedwards
    Member

    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

    #139560
    Paulie_D
    Member

    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.

    #139581
    CrocoDillon
    Participant

    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.

    #139582
    Paulie_D
    Member

    @CrocoDillon

    Nice…

    #139583
    mtedwards
    Member

    @CrocoDillon

    Brilliant. Thanks mate

    Matt

    #139585
    CrocoDillon
    Participant

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

    #187915
    Flex
    Participant

    @CrocoDillon

    Thanks! Just what I was looking for.

    #259974
    bhennink
    Participant

    Hi could the trick of CrocoDillon also work inside a feax box?

    #259975
    Beverleyh
    Participant

    @bhennink, try it and see what happens.

    For us to comment further, you’d need to supply us with a demo of your code.

    #259976
    bhennink
    Participant

    Hi Beverleyh,
    I will try to provide some code like what I have now:)
    I think I need to strip down the css and html a bit.
    I am brand new here at this forum. found it when I searched for text wraping around an image and make image move underneath on small screens.
    I would like that on a website I am rebuiling my website using flexbox.
    The CSS and HTML are quite some lines so I am looking for ways to present a trimmed version of my code to demonstrate what I have now
    The initial part of the main page looks like https://codepen.io/bhennink/pen/jGEqEq
    And the image moving below the text works fine. But I do not get larger text parts wrapping around the image

    #259977
    Beverleyh
    Participant

    But I do not get larger text parts wrapping around the image

    That’s because the .blok1 img wrapper is a flex child, so it can’t have the text in the .blok4 wrapper (an adjacent sibling, also a flex child in the same flex context) wrap around it.

    With or without flexbox it wouldn’t work.

    .blok1 would need to be inside .blok4, just like in CrocoDillon’s demo https://codepen.io/CrocoDillon/pen/kmGCw

    #259978
    bhennink
    Participant

    Hi Beverleyh,
    Thanks for your help.
    I think I tried that also before like https://codepen.io/CrocoDillon/pen/kmGCw
    Where I have put the blok1 wrapper inside blok4. Is this wat you explain?

    When I tried that, it puts the image always below the text.

    Maybe I just do not understand everything what is written. Englisch is a foreign language for me :S

    I also tried combining with what cocodillondid but then The text and image overlap. See https://codepen.io/bhennink/pen/boNezj

    #259990
    Beverleyh
    Participant

    The :before pseudo element needs height to “exist” and clear the float/img. You can do that by setting either an explicit height on it (e.g. 150px, as per CrocoDillon’s demo), or setting padding-bottom as a %, which creates height without actually defining it outright, and keeps sizing fluid. Try 35%.

    Unfortunately I’m unable to do much other than give you a verbal explanation and sizing guesses because I’m on mobile, and there’s too much superfluous CSS in your pen to make it easy for me to use. Sorry.

Viewing 15 posts - 1 through 15 (of 26 total)
  • The forum ‘CSS’ is closed to new topics and replies.