Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS reposition divs when screen is too small

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #46079
    Qlubbie
    Member

    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
    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;
    }

    #141402
    Qlubbie
    Member

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

    #141407
    Paulie_D
    Member

    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?

    #141413
    Qlubbie
    Member

    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’

    #141415
    Paulie_D
    Member

    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.

    #141428
    Qlubbie
    Member
    #141453
    Paulie_D
    Member

    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

    #141464
    Qlubbie
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.