CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
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:
Any ideas how to achieve this?
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”>
Chunk of text
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?
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.
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.
Brilliant. Thanks mate
@Paulie_D, thanks :P @mtedwards, you’re welcome!
Thanks! Just what I was looking for.
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed