responsive floated divs

Question

I have two divs floated left each with width:50%; and min-width:300px; If the container div size or the screen size in case there is no container has a width lower than 600px, naturally the div 2 is going under div 1.

When div two is going under div 1 they will still have 50% width....is is possible to make both divs width to 100%?

Example: Foundation

In this example there are 3 divs that go under each other and the resize to 100% when you hit their min width breakpoints.

That is exactly what I want to achive, however I cannot figure it out from the Foundation example I gave you.

Use mediaqueries to set the width to 100% below a breakpoint. (100% stacked divs are usually used for the devices such as mobile phones and small tablets so I think below 767px would be ok.) — Simon
@Simon It's generally better to work mobile first (ie. hide styles that only apply to wider devices behind media queries). It almost always works out to slightly less code and older mobile devices don't understand media queries. — cimmanon
@Cimmanon Thanks for pointing that out! I'm also a big fan of mobile first design but in this question I don't think it was worth mentioning in the scope of this specific question. — Simon

banjoSas banjoSas · Accepted Answer · 2013-04-14T14:32:06

To elaborate more on solution given by @Simon,

div.one{
    width:50%;
    min-width:100px;
    float:left;
}
@media screen and (max-width: 767px){
    div.one{ width:100%}
}

See this fiddle: http://jsfiddle.net/GraH9/

Here is also a great article to clear your concepts in Responsive design, I have a feeling that you will find many of your future problems solved if you learn from the tuts here.

http://www.hongkiat.com/blog/responsive-web-tutorials/

responsive floated divs

1 Answers