Fluid-ish Layout

[Jeager]

http://i71.photobucket.com/albums/i157/Cr0n0dbz/mockup-1.png

Thats the basic layout (some changes). I want the middle content area to be able to expand while the side bars stay the same.

[Jeager]

Working is the best way to learn I guess. Floating the nav left means the main_content container will be behind it, give it a margin to move it accordingly. Since the nav is static, and the container is not percentages, rather a min-max based and not a float, it will not be pushed down, hence remaining fluid.

Tricky part is the insides of the content. The 2 div’s will inherent the min-mas while using percentages. so if the middle column is 80% and the right column is 14% (accounting for margins) and both floated left, they will not push each other down, because they will only go so small.

My errors before were having a static with a percentage, the static will take the space regardless, and the percentage will push the right column down.

So, I need to find a way to have that right sidebar a static width and not be pushed down.

This is where I am at currently: http://jsfiddle.net/V89Rm/4/

Edit: Managed to get it. Somehow I think I was just screwing math up somewhere along the line. Multiple times. With the inner wrap being 635px minimum for 2 other content containers, one being 100 px, and 30px of marg/padding, comes to 79.52%, and you get to keep the aside bar staying a static width, and a fluid middle.

[Jeager]

Having a hell of a time getting this to work. I cant seem to get the content container to expand all the way without the insides being messed up.

The numbers:
page wrap: min 760px
nav: 100px + 15px margin

That should leave me with 645px for the inner wrap. After making the content wrap of min:645px, I have a 100px static side bar and 30px of padding/margin. That leaves me with 515px for the main content. 515/645=79.84%. That should be the min width of the main content area.

After I set these numbers in, the side bar gets to float right, however there is a large gap in between the side bar and the main content area, when it should be filling it up to the margin. This only happens when its expanded, but you can see the footer at the bottom expanded to the correct size.

If the side bar is floated left, the margin between the two is gone, however the main content doesnt push the bar to the edge of the wrap. Seen here: http://jsfiddle.net/tVkTL/1/

Really not sure where to go from here.

Edit: Yeah, I’ve been working on this all day and can’t get it working properly. Any ideas?

[Author]

Posts