Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: div align help?

  1. #1
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts

    div align help?

    I have this site MY PAGE

    As you can see the right side navigation div is not aligned to the bottom like the left. I have tried overflow:auto and inherit also tried height:auto and inherit. Has anyone got and idea what else to try?

    Thanks
    .pLeAd InSaNiTy.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Check below working code:

    You need to
    1. remove margin properties from left and right DIVs
    2. add overflow property to content.
    3. define DOCTYPE as I did in below code...



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    <title>Supercoach</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #content {
        border-color: #A5A5A5;
        border-style: solid;
        border-width: 1px;
        margin-left: 10%;
        margin-right: 10%;
        overflow:auto;
    }
    #right {
        border-color: #A5A5A5;
        border-style: solid;
        border-width: 1px;
        float: right;
        font-family: sans-serif;
        font-size: x-small;
        text-align: center;
        width: 30%;
    }
    #left {
        border-color: #A5A5A5;
        border-style: solid;
        border-width: 1px;
        height: auto;
        width: 69%;
    }
    #navigation {
        color: black;
        font-family: Utsaah;
        height: auto;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }
    #nav li {
        list-style: none outside none;
    }
    #nav a {
        color: #1A5272;
        text-decoration: none;
    }
    #nav a:hover {
        color: #4FB3EC;
        text-decoration: underline;
    }
    #nav a.active {
        color: #0D3850;
        font-weight: bold;
        text-decoration: none;
    }
    
    </style>
    </head>
    
    <body>
    <div id="content">
    
    
    <div id="right">
    
    <div id="navigation">    
        <ul id="nav">
    
            <li><a class="active">Brisbane Broncos</a></li>
            <li><a href="#">Canterbury-Bankstown Bulldogs</a></li>
            <li><a href="#">Canberra Raiders</a></li>
            <li><a href="#">Cronulla-Sutherland Sharks</a></li>
            <li><a href="#">Gold Coast Titans</a></li>
            <li><a href="#">Manly-Warringah Sea Eagles</a></li>
    
            <li><a href="#">Melbourne Storm</a></li>
            <li><a href="#">Newcastle Knights</a></li>
            <li><a href="#">New Zealand Warriors</a></li>
            <li><a href="#">North Queensland Cowboys</a></li>
            <li><a href="#">Parramatta Eels</a></li>
            <li><a href="#">Penrith Panthers</a></li>
    
            <li><a href="#">St. George Illawarra Dragons</a></li>
            <li><a href="#">South Sydney Rabbitohs</a></li>
            <li><a href="#">Sydney Roosters</a></li>
            <li><a href="#">Wests Tigers</a></li>
        </ul>
    </div>
    
    </div>
    
    <div id="left">
    This is the content side this is the content side this is the content
    This is the content side this is <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>the content side this is the content
    This is the content side this is the content side this is the content
    This is the content side this is the content side this is the content
    </div>
    </div>
    </body>
    
    </html><!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script>

  • Users who have thanked vikram1vicky for this post:

    syco__ (09-04-2011)

  • #3
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    the overflow only takes effect on whatever side is larger how do i get the smaller sides (right side) height to take the same as the outside/bottom(content) height?
    .pLeAd InSaNiTy.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    assign height to content DIV and then assign height:100% to both (left and right) DIVs

  • Users who have thanked vikram1vicky for this post:

    syco__ (09-05-2011)


  •  

    Posting Permissions

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