Responsive Design – Float a div right, then move underneath
# June 19, 2013 at 9:49 pm
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?
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”>
Chunk of text
</div># June 20, 2013 at 5:00 am
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?
You must be logged in to reply to this topic.