How do I code this in a nice way with CSS??

I want the (1) to expand as a fluid with the website.. so it's at the website borders all the time(maxwidth of screen).

I want the (2) to be centered, and floating ABOVE(topology) the (1).

And lastly I want the (3) to be BELOW(screen-wise) the (2) but ABOVE(topology) the (1).

Look at the image for a description!
Thanks in advance!

Attached Thumbnails

 

__________________

1: width:100%;
2: margin-left:auto; margin-right:auto; overflow:visible;
3: position:relative;

I don't quite understand what you want, the image looks like what you want, but :/ This CSS should work.

__________________

I feel better hating IE.

shorthand margin values:
margin:0 auto;
same as:
margin: 0 auto 0 auto;
or
margin-top:0;
margin-right: auto;
margin-bottom:0;
margin-left:auto;

__________________

Yeah, except that sets all the margins to 0, including the top and bottom margins, which could possibly not be what he wants. And that last one isn't even shorthand.

Anyway, I don't know why I put overflow visible on there.


Coding the entire thing... Slice the entire background on the very left.

body(background:#hexColorOfTheTopOfTheImage url('image.gif') repeat-x 0pt 100% scroll;}

as for the bottom part, it really depends. Pushing a footer is a pain, you can normally set a <div> with height:100%; above it, and then place the footer below.

Finally, for the main content, pick out your favorite rounded corners technique and add a wrapper around it with margin:0 auto; or text-align:center;

__________________

I feel better hating IE.

I put that at the end to show the long equivalent, also it doesn't set all margins to 0; 'margin 0 auto;' sets top and bottom to 0 and left auto (and possibly right auto i cant remember if it does or not)

If you want a different margin top/bottom this does the trick and should still be centred:

margin: <top value> auto <bottom value>;

__________________

margin: 0 auto is the short hand for setting all of them, you're right.

The equivs

margin: 0; - top/right/bottom/left
margin: 0 0 0 0;

margin: 0 auto; - top/bottom right/left
margin: 0 auto 0 auto;

margin: 0 auto 2px; top right/left bottom
margin: 0 auto 2px auto;

<div class="1">
<div class="2">
</div>
<div class="3">
</div>
</div>

.1 { width: 100%; }
.2 { margin: 0 auto; background: url(images/yourimage.gif) no-repeat; width: 500px; }
.3 { margin-top: 10px; font-size: 12px; text-align: center; }

follow and modify.