Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 48108

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Apr 6th, 2007

CSS - Making div vertically "overflow"

Expand Post »

Hello all,

This is a relatively simple problem I ran into when designing my site, so hopefully you can help me out here. I have a div like so (for example):

html Syntax (Toggle Plain Text)
<div class="box">testing</div>
<div class="box">testing</div>

And here's the CSS:

css Syntax (Toggle Plain Text)
.box {
        margin-left: auto;
        margin-right: auto;
        width: 50px;
        color: red;
        background-color: blue;
    }
.box {
        margin-left: auto;
        margin-right: auto;
        width: 50px;
        color: red;
        background-color: blue;
    }

Now how do I make the the div basically extend all the way to the bottom of the screen, so I've got a blue stripe down the middle? At first I thought that a div clear:both would do it, but my research seemed to show otherwise, and didn't work when I tried it inside or outside the div box.

Thanks in advance,

--Joe

John A

Team Colleague

Reputation Points: 2240

Solved Threads: 338

Vampirical Lurker

Offline

5,055 posts
since Apr 2006

Permalink

Apr 7th, 2007

Re: CSS - Making div vertically "overflow"

Nevermind. I forgot about "height: 100%". Works great.

John A

Team Colleague

Reputation Points: 2240

Solved Threads: 338

Vampirical Lurker

Offline

5,055 posts
since Apr 2006

Permalink

Apr 7th, 2007

Re: CSS - Making div vertically "overflow"

I laughed too soon. When I turn it into XHTML 1.0 strict, the box no longer stretches the entire length of the page:

html Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blah</title>
<style type="text/css">
 
    .box {
        margin-left: auto;
        margin-right: auto;
        width: 50px;
        color: red;
        background-color: blue;
        height: 100%;
    }
 
</style>
</head>
<body>
<div class="box">testing</div>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>blah</title>
<style type="text/css">

    .box {
        margin-left: auto;
        margin-right: auto;
        width: 50px;
        color: red;
        background-color: blue;
        height: 100%;
    }

</style>
</head>
<body>
<div class="box">testing</div>

</body>
</html>

John A

Team Colleague

Reputation Points: 2240

Solved Threads: 338

Vampirical Lurker

Offline

5,055 posts
since Apr 2006

Permalink

Apr 8th, 2007

Re: CSS - Making div vertically "overflow"

Aaah... it's a difficult one. Height 100% doesn't work in XHTML; it means '100% of the height of everything on the page'. So, if there's nothing on the page, 100% height is nothing. This even affects background images in some browsers... specifically Firefox if I remember correctly; the background image only covers the area from the top of the page to the bottom of the last piece of content; so if the page is very short in terms of its content; it gets a short background.

Wierd; but it seems that the functionality is either, not well standardised, or deliberately standardised in a way that goes against the largest of 100%-of-inner-window and 100%-of-content approach, which, in my opinion, is more intuitive and useful.

You can keep using 100%, and force the height of the div's immediate parent container to have a non-zero height that's close to a reasonable average screen height ( even specifying this on the <body> element should work ). The div should then always fill the same height that all content on the page fills, and it shouldn't ever be smaller than a screen, but, it might always be bigger than most screens..

I can't give a good one-size-fits-all solution to this problem, because I've never found one myself and it's a problem I've encountered quite a bit with various layouts.. Personally, I'd design without that aspect deliberately because I know it'll be problematic, or if it's absolutely essential, use Javascript to adjust with respect to window size... I find that annoying though; that standards make it more difficult to do something that was originally very simple.

'nuff said from me; post back if you find a good solution for this, I'd be eager to know if there is one.

Last edited by MattEvans; Apr 8th, 2007 at 6:50 am.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Apr 8th, 2007

Re: CSS - Making div vertically "overflow"

Ah ok, thanks very much Matt for the reply.

What I ended up doing was placing a blue gif with dimensions of 50x1, and used this as the body background image, and then setting it at repeat-y and top centered. I then set the background color to white of course, and it more-or-less worked.

So I do waste some extra bandwidth by forcing the user-agent to download a gif just to display a single color, but at least it works at all screen resolutions.

John A

Team Colleague

Reputation Points: 2240

Solved Threads: 338

Vampirical Lurker

Offline

5,055 posts
since Apr 2006

Permalink

Apr 9th, 2007

Re: CSS - Making div vertically "overflow"

You don't need a gif file. I have done it with style sheets, with foreground and background colors the same and a line of alternating
. with
<br />.

Put this inside its own div.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Apr 9th, 2007

Re: CSS - Making div vertically "overflow"

Click to Expand / Collapse Quote originally posted by MidiMagic ...

You don't need a gif file. I have done it with style sheets, with foreground and background colors the same and a line of alternating
. with
<br />.

Put this inside its own div.

Yes, but that solution isn't very flexible, and isn't much better than Matt's suggestion (setting the parent div's height to a reasonable screen height).

I don't want the page to be longer than necessary, and a colored gif seems to work for me.

[edit] I just noticed that DaniWeb has something similar with the gray on the margin -- I wonder how Dani implemented this...? (and I'm too lazy to look in the CSS

)

Last edited by John A; Apr 9th, 2007 at 4:30 pm.

John A

Team Colleague

Reputation Points: 2240

Solved Threads: 338

Vampirical Lurker

Offline

5,055 posts
since Apr 2006

Permalink

Apr 9th, 2007

Re: CSS - Making div vertically "overflow"

The gray margins are just margin syles applied to the body tag. The darker gray is the border attribute.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Apr 15th, 2007

Re: CSS - Making div vertically "overflow"

Click to Expand / Collapse Quote originally posted by MidiMagic ...

The gray margins are just margin syles applied to the body tag. The darker gray is the border attribute.

Sorry, I kind of forgot about this thread.

Just how do you apply "margin styles"? Going back to my previous example, I would set body-background to blue, and the width would be 50 pixels. But how do I change the color of the whitespace in the margin? Googling turned up nothing.

John A

Team Colleague

Reputation Points: 2240

Solved Threads: 338

Vampirical Lurker

Offline

5,055 posts
since Apr 2006

Permalink

Apr 15th, 2007

Re: CSS - Making div vertically "overflow"

Try using:

css Syntax (Toggle Plain Text)
height: 100%;
min-height: 100%;
height: 100%;
min-height: 100%;

cscgal

Administrator

Staff Writer

Reputation Points: 1422

Solved Threads: 163

The Queen of DaniWeb

Online

13,646 posts
since Feb 2002

Page 1
2
Next

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: CSS Nav Bar Help needed.

Next Thread in HTML and CSS Forum Timeline: Auto fill-in a field on the contact form

DaniWeb Message

Cancel Changes

User Name
Password