Forums

Give help. Get help.

  • # 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!

    # November 8, 2014 at 11:35 am

    @CrocoDillon

    Thanks! Just what I was looking for.

    # September 13, 2017 at 10:34 am

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

    # September 13, 2017 at 10:54 am

    @bhennink, try it and see what happens.

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

    # September 13, 2017 at 11:29 am

    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

    # September 13, 2017 at 12:13 pm

    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

    # September 13, 2017 at 12:28 pm

    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

    # September 13, 2017 at 1:44 pm

    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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag