block element layout - how?

hello there. i am asking for a little help with creating layout like
this:

13px 500px 13px
..------------------------------------------------------------.

| | | | | 13px
----+----------------+ center area. +----------------+----|
| empty space. | main website | empty space. | |
| height and | window. | height and | |
| width depends | | width depends | |
| on the center | | on the center | |
| area. | | area. | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
----+----------------+ +----------------+----|
| | | | |13px
'------------------------------------------------------------'

\--------------------------. .----------------------------/
\/
100% width

i was trying many of possibilities, trying to solve it for all evening
but with no luck... ;(
always some part of it is wrong (in IE almost always). if someone could
spare his free time and take a look on this i would be really really
grateful.

regards.

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

13px 500px 13px
.------------------------------------------------------------.
| | | | | | 13px
|----+----------------+ center area. +----------------+----|
| | empty space. | main website | empty space. | |
| | height and | window. | height and | |
| | width depends | | width depends | |
| | on the center | | on the center | |
| | area. | | area. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|----+----------------+ +----------------+----|
| | | | | |13px
'------------------------------------------------------------'

\--------------------------. .----------------------------/
\/
100% width

i was trying many of possibilities, trying to solve it for all evening
but with no luck... ;(
always some part of it is wrong (in IE almost always). if someone could
spare his free time and take a look on this i would be really really
grateful.

What you want wrt to the width is no problem:

html:
<div id="container">
<div id="page">
Your actual page content here
</div>
</div>

css:
body{
margin:0;
padding:13px;
}
#container{
text-align:center; /* for Win-IE5 */
}
#page{
width:500px;
margin:0 auto;
text-align:left; /* countering the value above */
}

What you want in height isn't that easy: at the top it's simple, but
to make all pages stop at 13px from the bottom, regardless of the
height of the content or the height of the browser window is
impossible imo. There are ways to get pages to extend till the bottom
of the window when they're too short, but not reliably cross browser,
and I don't think I've come across a way to include a 13px empty space
at the bottom yet. (not tried very hard though)

Just give it up and start thinking in web pages instead of rectangular
boxes with margins.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

It's a basic 3 column layout. What, specifically, have you tried? And

and URL showing your best efforts would help a lot.


--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

Just float the left stuff, left and float the right stuff, right and
allow the center stuff to flow between the two.

--
Gus

no. it is not simple three column layout. there would be no problem if
it would be.
here you can find my last efforts, all I need now is two vertical lines
to the left and right, just to close the frame around main content
"window". note that you cannot simply use an background property
because it will interfere with frame corners...

height has no matter in my layout. frame should always end with content
"window".

somebody?

Just give it up and start thinking in web pages instead of
rectangular boxes with margins.

and who told you that height is 100% of the screen? height has no
matter, it is content "window" dependent.

oops, i forgot to paste a link
here it is: http://marti.presents.pl/test/

waste wrote:

Just give it up and start thinking in web pages instead of
rectangular boxes with margins.

and who told you that height is 100% of the screen? height has no
matter, it is content "window" dependent.

Who said anything about screen? AFAICS I didn't mention the word at
all. If you mean "who told you that height is 100% of the viewport",
then okay, my bad. Your example doesn't explicitly say it, it just
looked like you wanted 13px margin at the bottom, and I assumed you
didn't want more, nor less than 13px.

Not sure what you mean by 'content "window"', but if you mean that
height in your example isn't relevant, than just go with the stuff I
gave you, and you'll be fine.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dr. Feelgood - She's Got Her Eyes On You

waste wrote:

oops, i forgot to paste a link
here it is: http://marti.presents.pl/test/

Looks very complicated when looking at the source - if only I could
figure out what you really want...

Do you want the left and right 'sidebars' to be without that
background? Do you want a plain and simple black border around both
sidebars? Do you want 13px margin between the sidebars and the side of
the viewport? Why are you using four divs for the corners? Not to get
the black borders I hope?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dr. Feelgood - Blues Jam - Oil City Sheiks

I have provided a screenshot to show how it should looks like. please
open http://marti.presents.pl/test/ once again.

yes, it is complicated, but i have no other ideas how to paste few
background images in one DIV... and I need it because there is no
simple solution to make a frame similar to mine when there is no
constant width and height given.