How to code this?
 

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! :-)

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.

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 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.