www.webdeveloper.com
Results 1 to 4 of 4

Thread: margin-bottom

  1. #1
    Join Date
    Nov 2004
    Location
    Portland, Oregon.
    Posts
    25

    margin-bottom

    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?

  2. #2
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    there is... check the other thread which also needs help with margins..

  3. #3
    Join Date
    Nov 2004
    Location
    Portland, Oregon.
    Posts
    25
    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?

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    It can, but margins can't be used. Margins are a part of the CSS box model, 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
    Code:
    *
     *
      *
    -------------- 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
    Code:
    <div id="wrapper">
      <div id="absPositioned"></div>
    </div>

    In CSS
    Code:
    #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 at the WWWC.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles