5 replies [Last post]
ro_berg
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2004-01-13
Posts: 3
Points: 0

If this has been covered on this site before, please excuse.

I want a box that has fixed distances to top, left, bottom, right, but I want it to expand downwards nicely when it gets filled with content.
When you scroll down to the bottom, there's a gap between the bottom and the box.
Like the behaviour of the "box" at alistapart.com but with fixed distances to left and right.

I'm trying to do this and it just boggles my mind.

I'd be very thankful if someone could give me a few hints or so.

/roberg

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

box w/ fixed distances to edges

All this needs is some basic margins. Make this a div id, such as "box", and all other content will go inside this div.

#box {
	margin-top: (your choice);
	margin-left: (your choice);
	margin-right: (your choice);
	margin-bottom: (your choice);
}

http//mark.axsysdesign.com

ro_berg
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2004-01-13
Posts: 3
Points: 0

box w/ fixed distances to edges

Sure, but if there is enough content to make the height of that box, say, 400 px, and the browser window is much taller than that, then there is still a big gap between the bottom of the box and the bottom of the browser window.

I'm looking for a very consistent layout with the bottom of the box always x px from the window bottom, if scrolled down.

Thanks for replying though.

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

box w/ fixed distances to edges

Can you show an example of what you are talking about? Like a link? I was thinking that you needed the bottom margin fixed from the page and not the browser window...

These are two different possibilities with two different solutions, so I was wondering which one you were talking about.

http//mark.axsysdesign.com

ro_berg
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2004-01-13
Posts: 3
Points: 0

box w/ fixed distances to edges

Well, I can't really show you a link.

But if you take your css-code, margin-bottom 20px; put a line of text in the div, you should see what I mean.
The height of the div is determined by the amount of lines in it, whereas I want it to be a combination sort of.
If there are few lines and the browser window is big, I still want the div to go down to 20px from the browser window bottom.

Consider these wonderful high quality ascii drawings, the outer square is the browser, the inner square is the div.

the right borders of the div and the browser are not shown but that shouldn't do much for what I intend to show

Your code would give something like this.
--------------------
| __________
| |line1
| |line2
| ---------------
|
|
-------------------

My wanted result is this
--------------------
| __________
| |line1
| |line2
| |
| |
| ---------------
-------------------

I hope you understand the problem.
/roberg

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 15 years 48 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

box w/ fixed distances to edges

Oh I see what you mean now...
I can get this to work in firebird with absolute positioning and the min-height property...but that still leaves us with solving it in IE. I'll keep working on it.

#box {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
	min-height: (whatever you want)px;
	border: 1px solid;
}

http//mark.axsysdesign.com