Question

I have a container div with 2 child panels to be implemented as adaptive layout.

By that, I simply mean that on desktop, the 2 child panels should float side-by-side
AND on iPhone, the 2 child panels should be one-below-another

Now below is my HTML;

<div class="container">
<div class="panel1"></div>
<div class="panel2"></div>
</div>

For the CSS, i just use the media query for desktop/iPhone.

For desktop (i.e. higher available width), my CSS is

.panel1{width:50%;float:left} //Span 50% of desktop width
.panel2{width:50%;float:left} //Span 50% of desktop width

For iPhone (i.e. lower available width), my CSS is

.panel1{width:100%;float:left} //Span entire iPhone width
.panel2{width:100%;float:left} //Span entire iPhone width

Now my question is how should I code the container div such that it would work fine across all major browsers ?

i.e. Should I use “float” for the container in both the CSS (desktop/iPhone) OR do I play with the 2 child panels like making float:none ?

Actually I know giving the 2 child panels as

width:100%;float:left

would work fine on iPhone …But I am a bit uncomfortable with the though that they use float:left BUT appear on screen as one-below-other..

Please suggest some best practices for the same.

Answer 1

Kill the floats for the iPhone, you don’t need those. Just use block-elements, they will go below eachother naturally, and use all available width automatically.

You can use overflow: hidden for the container div, so that it expands in height/width with the floats.