2 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

Hello all.

I have a page designed using CSS with 4 DIVs creating a border -- two DIVs aligned to the top & bottom of the screen with fixed heights and 100% widths, and two DIVs aligned to the left & right of the screen width fixed widhts and 100% heights. All DIVs have background-image's so they create a border (the page IS resizable).
I'm looking for way to create a fifth DIV which will occupy exactly and only the space left in the center of all 4 DIVs, but I can only get the DIV to occupy the right width but not the right height. This is what I do (simplifyed):
top-div {position:absolute; top:0; height:20px; width:100%}
bottom-div {position:absolute; bottom:0; height:20px; width:100%}
left-div {position:absolute; left:0; width:15px; height:100%}
right-div {position:absolute; right:0; width:15px; height:100%}
center-div {position:absolute; top:21px; bottom:21px; left 17px}

that doesn't work -- the center-div is not stretched to until it reaches the bottom-div, but stops somewhere in the middle.

Ideas?

Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

one in the middle

Hi Alon_wn,
Interesting way to set out the page.

Here's another option.
I'm assuming you wont put anything in the four border divs.

Get rid of the four border divs.
Put another div around the center div and give it a margin.
#container{margin:20px 15px 20px 15px;}
You can do this with just one div but to get the height to work in ie/mac the containing div comes in handy.

Lets assume you are working toward a minimum resolution of 800 x 600px
So minus the top and bottom margins would leave about 560px.
Set the height and min-height of the center div to 560p.#center-div {min-height:560px; height:560px;}
Then use an attribute selector, supported by Mozilla and Opera to set the height back to auto. #container[id] #center-div{height:auto;}
So now the center div will have a mini-height of 560px, which will expand if the content is too long.

Unfortunately you can't set the height to 100%, that would be way too easy Smile

Thanks to Pixy for the mini-height hack

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 12 years 19 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

4 border DIVs and one middle DIV?

Hi, Alon_wn,

If you were planning to use the border divs to actually display some sort of image border, you might be interested in this:

http://www.webweaver.org/dan/css/corners/fluidbox_nested.html

The article actually discusses implementing curved corners on boxes through CSS, but could be adapted in your case.

You will still need to use Tony's hack to handle the height problem Smile

Let us all know what you end up doing!