Web Analytics Made Easy -
StatCounter div align help? - CodingForum

Announcement

Collapse
No announcement yet.

div align help?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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>

    Comment


    • #3
      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.

      Comment


      • #4
        assign height to content DIV and then assign height:100% to both (left and right) DIVs

        Comment

        Working...
        X
        😀
        🥰
        🤢
        😎
        😡
        👍
        👎