1

So this is my first Q on stackoverflow, and upon finally "creating" an account, i see a rather large list of "similar" question-titles to my own... but i have been nearly abusing google to find the answer, and to no avail; so, here goes.

I am rather new to html and css, but have been aggressively and obsessively, rapidly acquiring as much knowledge of it as possible, at a break-neck pace, over the last <2 months, and i feel i am making great progress.

However, what i realized i want to do with my layout, i seem to be unable to achieve.

Everyone, i'd guess, knows about "liquid" layouts, and the obviously incredibly popular "holy grail" 3 column layout.

I want to use this type of layout, because it is, in my opinion, the most aesthetically pleasing... but i want to write my own, semantically, so that i'm not "copying" anyone, and so i have a personal connection with my own framework, and don't have to figure out what someone else was thinking, when i look at my markup.

Here is the goal:

I want my main content in the middle, wrapped by 2 "side bar" columns, and i want the whole thing "liquid," from full res, all the way down to 320px wide.

However, for SEO purposes, i want my "main content" column (the middle one) 1st in the DOM tree, and i want my side bars to:

1st) shrink fluidly with page width, and then 2nd) as the page becomes prohibitively narrow, i want the "main content" (middle) column to "snap" to the left, remain on top, and be 100% width, while 3rd) the side bars "snap" "under" the main content column, each occupying 50% of the width,

so that: all 3 columns are ALWAYS taking up the full width of the page, and when the side bars "snap under," they are the same width as the "middle" column.

something like this:

|2222111111113333|
|________________|

|222111111333| <--
|____________|

|22111133| <--
|________|

*snap*(a)

|1111| <--
|2233|
|____|

|11| <--
|11|
|22|
|33|

or: snap(b)

|111111| <--
|222333|
|______|

|111| <--
|111|
|222|
|333|

|11| <--
|11|
|11|
|22|
|2_|
|33|
|3_|

See what i'm getting at?

Here is the Problem:

I have tried everything i can think of or search about, to try... and it seems there is just "no way" for css to make the "DOM:1st/middle" column stay both in the middle, and on top, while also keeping both the side bars symmetrical, and also preserving space, and keeping all 3 columns in a nice, neat box, at all times.

I have managed to make the middle column stay on top, and come 1st in the DOM, but doing so brings chaos and disorder to the side columns, as #2 must be inside a div with #1, for the 1/mid to stay on top, but placing the #3 in that div screws everything up.

This one little problem has been outrageously frustrating, for me, and i have been wrestling with it for weeks, now. (i only started learning html and css almost 2 months ago; half my time has been spent wrestling this one issue)

If anyone knows exactly what i'm talking about and trying to do, and knows:

A) whether this is even possible

B) how to do this

I would absolutely LOVE to know... because i would really like to move beyond this one little (read: HUGE) issue, and continue on my path toward world domination.

TL;DR:

want to make "|213|" become:

|1|
|2|
|3|

without it turning into this:

|_1_|
|2__|
|__3|

or this:

|_1_|
|2_3|
|___|

at any point between max and min screen.

Possible to do? Or should i just (give up and) adjust my layout strategy and move on?

1

2 Answers 2

3

I think this is the sort of thing you're looking for:

http://jsfiddle.net/grc4/kcX5n/

It uses jQuery to modify the layout of the page when the window is resized. Another approach could be to use css3 media queries, but I'm not sure how you would change the order of the elements (from 213 to 123).

3
  • thanks for the response. It seems css media queries may be the way to go, as i was (and i really hate to "nit-pick") stubbornly attempting to not use "scripting" to get the columns to cooperate as i envisioned.
    – rawrmind
    Apr 21, 2012 at 17:23
  • i really wasn't done w/ that comment, but i got hit w/ the "5 minute rule," so... meh. lol. There is a way to make the 1st DOM column come second, basically by nesting it and the 2nd column in the same div, floating, and cleverly tweaking widths... but the problem with that, is that when the screen starts shrinking and things start floating, it causes a lot of "whitespace" in odd places, and the floats don't float to where i want them, if they start out where i want them to be, and if i use the other method that works for floating them where i want them, they won't start out where i intend.
    – rawrmind
    Apr 21, 2012 at 17:35
  • If you know the exact height of each div, you could do something like this. If the divs vary in height then you should use jQuery to switch the order of the elements.
    – grc
    Apr 22, 2012 at 0:22
0

old question, but i think it's quite simple css:

#col1{float:right}
#col2{float:left}
#col3{float:right}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.