float left, max-width and flow control

Question

Ideally I want a variable width left panel between 16-30em and a right panel fixed at 16em wide. When the screen shrinks to 32em or less, I want the right panel to flow underneath the left. and I want this all left aligned.

I have found several examples of the side by side, but only a fixed width on the left by floating it and variable right panel, or floating right and a variable left panel. I managed to put an outer holding div round things and made the layout work right to the point I want to flow the right panel under the left (or the left under the right - I'm not fussed which):

http://jsfiddle.net/Ph3S8/2/

I've tried using the @media (min-width: 15em) and nesting some changes in there because basically when the screen is less that .left:min-width + .right:min-width I just need to take out the float:right on the right panel, but nothing seems to take effect (I'm not sure if it is supposed to in jsfiddle, but it doesn't on my real example either. I don't mind which panel pops under the other but I just need it work for mobile devices with standard CSS - I have other stuff that works when the screen gets to 72ems etc, but I didn't write that :)

Any help much appreciated.

Yes, based on my original post without a margin it did. When I added the margin in I had to remember to take it out as well. — Nigel Johnson, Jan 19 '14 at 20:35

score 0 · Accepted Answer · answered Jan 19 '14 at 10:49

0

use this media query.

@media (max-width: 15em)
{
    .right {
         width: auto;
         float:none;
    }
}

answered Jan 19 '14 at 10:49

Allan Chua

9,305
9
41
61

score 0 · Answer 2 · edited May 23 '17 at 12:21

enter code hereThis Question Asked in Stackoverflow on:
What does @media screen and (max-width: 1024px) mean in CSS?
Review this page:
http://www.w3schools.com/css/css_mediatypes.asp
Media Screens For All Browsers And Events

 /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }

    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }

    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }

    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }

    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }

Thanks Alexanderi, This is a great reference, and I did read this. CSS is still a little bit of a dark art for me and while I can colour, pad and font with the best of them, reading that I had more questions than answers for my little issue. — Nigel Johnson, Jan 19 '14 at 11:08

score 0 · Answer 3 · answered Jan 19 '14 at 11:06

Based on Allan's answer I updated my fiddle to try and work out what I was doing wrong

http://jsfiddle.net/Ph3S8/3/

I have to move the margin and the float into the media selector as here:

@media (min-width:17em) {
    .right {
        float:right;
    }
    .left {
        margin-right:5em;
    }
}

For some reason I had to add 2 em's of padding on the selector or the div's overlapped.

Anyhow I'm posting this as a clarification to my original post, Allan's answer is better than mine.

float left, max-width and flow control

3 Answers3