There isn't any way to specify how far the bottom of a div should be from the bottom of the browser window, is there? For instance, I know you can specify margin-left:12px and it will be 12px from the left side of your window. But for the bottom, no deal, right?there is... check the other thread which also needs help with margins..Yes, thanks, I came from that thread. It doesn't address my question.
Assigning a DIV a margin-left:12px shoves it 12px off the left side of the browser. Assigning a DIV a margin-bottom:12px doesn't put the bottom of the DIV 12px from the bottom.
I want to confirm that the bottom of a DIV cannot be set to extend down past its content, down to the bottom of the browser window.
Or can it?It can, but margins can't be used. Margins are a part of the CSS box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->), which you should get well acquainted with.
What you seem to want is positioning, of which there are four main ways:
1) Static: The position of a box is calculating with respect to its containing box and the box just before it. Static boxes are in the normal document flow.
2) Relative: The box is still in the normal document flow and takes up space in the document in the exact same way as a staticically positioned box, but the box can appear offset from it's original position. It's kind of an obscure concept.
Think of when you put a spoon into a glass of water, then look at the glass from the side. The spoon appears offset from the angle at which it entered the water, but the spoon doesn't exist in the water where you see it. See my crappy diagram below
*
*
*
-------------- Water level -----------
# *
# *
# *
the astericks represent where you actually see the spoon, both above the water and below. The hash marks represent where the spoon exists under water, but isn't seen.
It's just a complicated way of saying a box will exist in one place, but be seen offset from where it exists on the page.
3) Aboslute: The box is taken out of the document flow and a new document flow is created, i.e. a CSS layer. By default, using the top, left, right, and bottom properties positions the box in respect to the viewport. In code, if an absolutely positioned box is contained inside a relatively positioned box, the absolute box will be positioned in respect to the relative parent.
In HTML
<div id="wrapper">
<div id="absPositioned"></div>
</div>
In CSS
#wrapper {
position: relative;
}
#absPositioned {
position: absolute;
top: 100px;
}
#absPositioned will be placed 100 pixels down from the top edge of #wrapper because #wrapper is positioned relatively.
4) Fixed: This is a special kind of absolute positioning. It follows the same rules as absolute positioning, only the box will not scroll with the content. It is cemented to that X,Y coordinate on the screen. Internet Explorer does not support fixed positioning.
If you've got any more questions about positioning, read the Visual Formatting Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html">http://www.w3.org/TR/CSS21/visuren.html</a><!-- m -->) at the WWWC.
Assigning a DIV a margin-left:12px shoves it 12px off the left side of the browser. Assigning a DIV a margin-bottom:12px doesn't put the bottom of the DIV 12px from the bottom.
I want to confirm that the bottom of a DIV cannot be set to extend down past its content, down to the bottom of the browser window.
Or can it?It can, but margins can't be used. Margins are a part of the CSS box model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->), which you should get well acquainted with.
What you seem to want is positioning, of which there are four main ways:
1) Static: The position of a box is calculating with respect to its containing box and the box just before it. Static boxes are in the normal document flow.
2) Relative: The box is still in the normal document flow and takes up space in the document in the exact same way as a staticically positioned box, but the box can appear offset from it's original position. It's kind of an obscure concept.
Think of when you put a spoon into a glass of water, then look at the glass from the side. The spoon appears offset from the angle at which it entered the water, but the spoon doesn't exist in the water where you see it. See my crappy diagram below
*
*
*
-------------- Water level -----------
# *
# *
# *
the astericks represent where you actually see the spoon, both above the water and below. The hash marks represent where the spoon exists under water, but isn't seen.
It's just a complicated way of saying a box will exist in one place, but be seen offset from where it exists on the page.
3) Aboslute: The box is taken out of the document flow and a new document flow is created, i.e. a CSS layer. By default, using the top, left, right, and bottom properties positions the box in respect to the viewport. In code, if an absolutely positioned box is contained inside a relatively positioned box, the absolute box will be positioned in respect to the relative parent.
In HTML
<div id="wrapper">
<div id="absPositioned"></div>
</div>
In CSS
#wrapper {
position: relative;
}
#absPositioned {
position: absolute;
top: 100px;
}
#absPositioned will be placed 100 pixels down from the top edge of #wrapper because #wrapper is positioned relatively.
4) Fixed: This is a special kind of absolute positioning. It follows the same rules as absolute positioning, only the box will not scroll with the content. It is cemented to that X,Y coordinate on the screen. Internet Explorer does not support fixed positioning.
If you've got any more questions about positioning, read the Visual Formatting Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html">http://www.w3.org/TR/CSS21/visuren.html</a><!-- m -->) at the WWWC.