Results 1 to 4 of 4

Thread: Align to bottom of div?

  1. #1
    Join Date
    Oct 2007
    Posts
    53
    Thanks
    13
    Thanked 1 Time in 1 Post

    Default Align to bottom of div?

    How would I go about aligning a span tag to the bottom right of a div without absolutes? For instance...

    HTML Code:
    <html>
    <head>
    <style>
    .container {
        height: 150px;
        margin-left: 5em;
        margin-right: 5em;
    }
    .mySpan {
        vertical-align: bottom;
        float: right;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <span class="mySpan">Text | Text | Text</span>
    </div>
    </html>
    Code that actually works though...
    Last edited by AmenKa; 11-26-2008 at 11:46 PM. Reason: Move BB tag up.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I have a feeling this is not what you want but it does the job:
    Code:
    .mySpan {
    	margin-top:130px;
    	height:20px;
    	float: right;
    }

  3. #3
    Join Date
    Oct 2007
    Posts
    53
    Thanks
    13
    Thanked 1 Time in 1 Post

    Default

    You would be correct, I dont want to use margins to shove the text down a specific number of pixels, I want it to be at the bottom useing points as the size instead of pixels...

  4. #4
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi,

    U can try this i think this will work for you.

    magic


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">

    body {
    margin:0;
    padding:0;
    }
    #content {
    width:150px;
    height:300px;
    margin:0;
    padding:0;
    left:0;
    top:0;
    position:absolute;
    display:block;
    border:1px #000000 solid;
    }
    #content p{
    bottom:0px;
    right:0px;
    margin:0px;
    padding:0px;
    position:absolute;
    }

    </style>
    </head>

    <body>
    <div id="content">
    <p>Link1 | Link2 | Link3</p>
    </div>

    </body>
    </html>

Bookmarks

Posting Permissions

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