reposition divs when screen is too small

[Qlubbie]

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

footer

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

[Qlubbie]

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

[Paulie_D]

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?

[Qlubbie]

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’

[Paulie_D]

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.

[Qlubbie]

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

[Paulie_D]

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

[Qlubbie]

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.

[Author]

Posts