- This topic is empty.
-
AuthorPosts
-
June 19, 2013 at 9:49 pm #45685mtedwardsMember
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/qpCnbMobile:
http://codepen.io/mtedwards/pen/DJtnxAny ideas how to achieve this?
Thanks
Matt
June 19, 2013 at 10:10 pm #139501GSimonParticipantEdit: 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 #139556mtedwardsMemberHi @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 #139560Paulie_DMemberYeah…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 #139581CrocoDillonParticipantFake 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 #139582Paulie_DMemberNice…
June 20, 2013 at 6:23 am #139583mtedwardsMemberJune 20, 2013 at 6:46 am #139585CrocoDillonParticipant@Paulie_D, thanks :P @mtedwards, you’re welcome!
November 8, 2014 at 11:35 am #187915FlexParticipantThanks! Just what I was looking for.
September 13, 2017 at 10:34 am #259974bhenninkParticipantHi could the trick of CrocoDillon also work inside a feax box?
September 13, 2017 at 10:54 am #259975BeverleyhParticipant@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 #259976bhenninkParticipantHi 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 imageSeptember 13, 2017 at 12:13 pm #259977BeverleyhParticipantBut 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 #259978bhenninkParticipantHi 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 #259990BeverleyhParticipantThe :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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.