Having trouble displaying images in one row/two rows using media queries - html

Question

I want have a responsive page whereby if the screen is large enough, my login images are displayed on one line, otherwise, they are displayed across two lines. So I have this HTML
<div id="loginBox">
<div>Login/Sign Up</div>
<div id="loginLogos">
<div id="row1">
<img border="0" alt="Google" src="http://www.racertracks.com/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg">
<img border="0" alt="Facebook" src="http://www.racertracks.com/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png">
</div>
<div id="row2">
<img border="0" alt="Twitter" src="http://www.racertracks.com/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png">
<img border="0" alt="LinkedIn" src="http://www.racertracks.com/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png">
</div>
</div>
</div>
and then I used the media-query to attempt to do what I wanted …
#one {
float:left;
}
#media screen and (max-width: 400px) {
#one {
float: none;
}
}
However, at a normal screen size, the images are falling into two rows instead of one — https://jsfiddle.net/ocdz4bsp/ . For small screens, they are correctly wrapping into two rows. How do I keep everything on one line for screen sizes over 400 pixels?

Answer 1

You really don't need any media queries to achieve the effect you're after. By using floats properly, the items will stack themselves when need be. See here
#row1, #row2 {
float:left;
}
#row1 {
margin-right: 5px;
}
If you were set on #media queries, then you could do the following:
#row1, #row2 {
float:left;
}
#row1 {
margin-right: 5px;
}
#media only screen and (max-width: 400px) {
#row1, #row2 {
float: none;
margin-right: none;
}
}

Answer 2

If you want 2 elements to be side by side, use display: inline-block If you want them to stack on top of each other use display: block
Here is the corrected fiddle: https://jsfiddle.net/ocdz4bsp/1/
Hope this helps.