...

View Full Version : div align help?



syco__
09-04-2011, 10:40 AM
I have this site MY PAGE (http://syco-designz.webs.com/index.html)

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

vikram1vicky
09-04-2011, 11:42 AM
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...




<!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>

syco__
09-04-2011, 12:59 PM
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?

vikram1vicky
09-04-2011, 02:57 PM
assign height to content DIV and then assign height:100% to both (left and right) DIVs :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum