Member Avatar for John A

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

<div class="box">testing</div>

And here's the CSS:

.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

  • 4 Contributors
  • 12 Replies
  • 173 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by John A
Member Avatar for John A

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

Member Avatar for John A

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

<!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>
Member Avatar for MattEvans

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.

commented: thanks for the info --joeprogrammer +9
Member Avatar for John A

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.

Member Avatar for 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.

Member Avatar for John A

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

Member Avatar for MidiMagic

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

Member Avatar for John A

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.

Member Avatar for Dani

Try using:

height: 100%;
min-height: 100%;
Member Avatar for MattEvans

The margin isn't an addressable area; it takes the colour/image that is assigned to the background of the outer container.

A given container has a padding (space inside) a margin (space outside) and I suppose a border (space between). Setting a margin or padding sets an amount of spacing around the border or inside the border; you can't change the background in a container's margin without changing the background of the container that respects the margin (usually the container's parent container), and you can't change the background of a container's padding without changing the background of that container.

Border is quite a useful property... you can make partial borders that are 0 - ? px / % / pt thick, and set a block color, this will act like a big coloured margin.

Margin styles don't exist per-se... The margin of the body tag works more like padding does in other containers; that is, a non-zero ( and positive ) margin on the body pushes content into the middle of the page. On any other element; a positive margin pushes content away from that element. <edit> or perhaps, it pushes that element away from other content.. depending on which way you look at it</edit>

I'd be interested to know if min-height: 100% works... if it sorts out scaled elements, it should sort out the half-page backgrounds I keep getting...

Member Avatar for MattEvans

Check out this page:

http://apptools.com/examples/tableheight.php

the important part is this CSS snippet:

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

in a test with a new w3c doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%;padding:0;margin:0;border:none;">
<head>
</head>
<body style="height:100%;padding:0;margin:0;border:none;">
<div style="height:100%;background-color:blue">Anyone would think I've used a background color...</div>
</body>
</html>

This seems to work as expected in opera and firefox..

So, if you use that style in your page, anything you make as 100% high should be the height of the page at minimum, and otherwise as big as the content on the page, and not only in quirks mode..

Member Avatar for John A

Try using:

height: 100%;
min-height: 100%;

Just tried it, didn't work.

The margin isn't an addressable area; it takes the colour/image that is assigned to the background of the outer container.

That was my understanding, but I got all confused when MidiMagic mentioned "margin styles".

Check out this page:

http://apptools.com/examples/tableheight.php

the important part is this CSS snippet:

html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none
   }

in a test with a new w3c doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%;padding:0;margin:0;border:none;">
<head>
</head>
<body style="height:100%;padding:0;margin:0;border:none;">
<div style="height:100%;background-color:blue">Anyone would think I've used a background color...</div>
</body>
</html>

This seems to work as expected in opera and firefox..

So, if you use that style in your page, anything you make as 100% high should be the height of the page at minimum, and otherwise as big as the content on the page, and not only in quirks mode..

Hey, that worked! Thanks, I was getting annoyed at having to use a colored gif. This will work great.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.