HTML and CSS

CSS - Making div vertically "overflow"

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Apr 2006

Posts: 5,051

Reputation: John A is a splendid one to behold

Solved Threads: 332

John A

Offline

Vampirical Lurker

CSS - Making div vertically "overflow"

Apr 6th, 2007

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

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

And here's the CSS:

 Help with Code Tags 
 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

"Technological progress is like an axe in the hands of a pathological criminal."

•

Join Date: Apr 2006

Posts: 5,051

Reputation: John A is a splendid one to behold

Solved Threads: 332

John A

Offline

Vampirical Lurker

Re: CSS - Making div vertically "overflow"

Apr 7th, 2007

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

"Technological progress is like an axe in the hands of a pathological criminal."

•

Join Date: Apr 2006

Posts: 5,051

Reputation: John A is a splendid one to behold

Solved Threads: 332

John A

Offline

Vampirical Lurker

Re: CSS - Making div vertically "overflow"

Apr 7th, 2007

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

 Help with Code Tags 
 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>

"Technological progress is like an axe in the hands of a pathological criminal."

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: CSS - Making div vertically "overflow"

Apr 8th, 2007

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.

Plato forgot the nullahedron..

•

Join Date: Apr 2006

Posts: 5,051

Reputation: John A is a splendid one to behold

Solved Threads: 332

John A

Offline

Vampirical Lurker

Re: CSS - Making div vertically "overflow"

Apr 8th, 2007

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.

"Technological progress is like an axe in the hands of a pathological criminal."

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: CSS - Making div vertically "overflow"

Apr 9th, 2007

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.

Daylight-saving time uses more gasoline

•

Join Date: Apr 2006

Posts: 5,051

Reputation: John A is a splendid one to behold

Solved Threads: 332

John A

Offline

Vampirical Lurker

Re: CSS - Making div vertically "overflow"

Apr 9th, 2007

•

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.

"Technological progress is like an axe in the hands of a pathological criminal."

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: CSS - Making div vertically "overflow"

Apr 9th, 2007

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

Daylight-saving time uses more gasoline

•

Join Date: Apr 2006

Posts: 5,051

Reputation: John A is a splendid one to behold

Solved Threads: 332

John A

Offline

Vampirical Lurker

Re: CSS - Making div vertically "overflow"

Apr 15th, 2007

•

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.

"Technological progress is like an axe in the hands of a pathological criminal."

•

Join Date: Feb 2002

Posts: 12,040

Reputation: cscgal is a glorious beacon of light

Solved Threads: 127

cscgal

Offline

The Queen of DaniWeb

Re: CSS - Making div vertically "overflow"

#10

Apr 15th, 2007

Try using:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
height: 100%;
min-height: 100%;
height: 100%;
min-height: 100%;

Dani the Computer Science Gal

Follow my Twitter feed! twitter.com/daniweb

Quick Reply to Thread

Show Printable Version

Other Threads in the HTML and CSS Forum

Previous Thread: CSS Nav Bar Help needed.
Next Thread: Auto fill-in a field on the contact form

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes