Grow your CSS skills. Land your dream job.

reposition divs when screen is too small

  • # July 3, 2013 at 3:54 am

    Hello,

    first time post here sorry if i’m doing it wrong :)
    anyway… i’ve been trying to play with different layouts for different screen sizes. And i think i’ve almost got i right but here’s the problem.
    i have a top bar for the header width 100%.
    then i have 3 columns left for links. middle for content and right for other info.
    now when the screen is below 1200px of width the right bar goes to the left, but it is positioned under the center div and i woul like it to go straight under the left div. problem is.. the left div doesn’t have a fixed height.
    Anyway to fix this in css or should i solve this with javascript? (rather not because i thinkt thats just an ugly solution)
    here’s some example code:

    index.html
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>



    title

    Content Column: Fluid

    Right Column: 200px


    now here’s the 1024 css
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: red;}

    #topsection{
    background: #EAEAEA;
    height: 200px;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin: 0 0 0 230px;
    }

    #leftcolumn{
    float: left;
    width: 230px;
    margin-left: -100%;
    background: #C8FC98;
    }

    #rightcolumn{
    clear: left;
    width: 230px;
    /*margin-left: -200px;*/
    background: #FDE95E;
    }

    #footer{
    /*position:absolute;
    bottom: 0px;*/
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    # July 3, 2013 at 3:57 am

    for some reason i can’t get the code blocks correct. sorry

    # July 3, 2013 at 5:06 am

    Are you using media queries at all…I didn’t see any?

    I think the only way to get the correct behaviour you are after is using flexbox but that is very poorly supported by browsers at the moment.

    However, I’ll have a think on other options.

    I don’t like this…

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    Is there a reason you can’t use padding?

    # July 3, 2013 at 5:38 am

    no there isn’t a reason :)
    i’m actually working on positioning now haven’t paid much attention to textual stuff yet but you’re right should have used padding there.
    as for the media queries: like i said for some reason the code blocks are messing with the post i have these:
    link rel=’stylesheet’ media=’screen and (max-width: 1024px)’ href=’css/1024.css’
    link rel=’stylesheet’ media=’screen and (min-width: 1025px) and (max-width: 1200px)’ href=’css/1200.css’
    link rel=’stylesheet’ media=’screen and (min-width: 1201px)’ href=’css/1600.css’

    # July 3, 2013 at 5:44 am

    We’d need to see it in action.

    If you’re loading different stylesheets at different widths then we’d need to see those too. Do you have a live link?

    However, as I said, it may not be possible using the current HTML structure without using flexbox.

    # July 3, 2013 at 7:53 am

    sure take a look @ http://www.roadrunning.nl/test/index.html

    # July 3, 2013 at 10:57 am

    Yeah, nothing you can do (I think) about that given that you are using floats…barring js solutions which would be a bit clunky.

    To do anything else requires a change the HTML structure or using flex-box (which AFAIK is source-order independent).

    Unfortunately support for flex-box is pretty shallow at the moment.

    I’ll have athink

    # July 3, 2013 at 3:02 pm

    thanks paulie..
    what i did now is give the left div a fixed size. so i can position the right div using: position: absolute and top but then the footer “ignores” the right box and is paced at the same height as the right div, instead of under it.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".