Hello,
I have been trying to create a fluid design with only divs and no tables (like I'm suppose to...), but I am having a problem with one of the divs. Navbar, when resizing the window, allows for the word "testimonials" to span outside of it. The other containing divs (with the same class) do not have this problem. I have validated my code and style sheets and they are cleared. Please help! Below is some of the code and css.
Thank you.
Html:
<!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>Test</title>
<link href="_notes/trial.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="minmax">
<div class="container" id="navbar">
<ul><li><a href="Templates/index.htm" title="Home Page">Home</a></li></ul>
<ul><li><a href="Templates/about.htm" title="About Us">About Us</a></li></ul>
<ul><li><a href="Templates/services.htm" title="Services">Services</a></li></ul>
<ul><li><a href="Templates/testimonial.htm" title="Testimonials">Testimonials</a></li></ul>
<ul><li><a href="Templates/contact.htm" title="Contact">Contact</a></li></ul>
</div> <!-- end navbar-->
<div class="container" id="summary">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum aliquam scelerisque. Vestibulum viverra condimentum felis sit amet tincidunt. Donec at lacus at sapien tincidunt pharetra. Donec in nibh id libero bibendum venenatis sit amet sit amet ligula. Aliquam nec ligula odio, ut tincidunt nibh. Praesent sagittis purus vel eros.
</p>
</div> <!--end summary-->
<div class="container" id="media">
<p> something will go here...</p>
<p> </p>
<p> </p>
<p> </p>
</div><!-- end media-->
</div><!-- end minmax-->
<div class="container" id="footer">
<p><a href="Templates/index.htm" title="Home Page">Home</a>
<a href="Templates/contact.htm" title="Contact">Contact</a>
<a href="legal.htm" title="Legal/ Privacy"> Legal/Privacy</a>
<a href="sitemap.htm" title="Sitemap">Sitemap</a></p>
</div><!-- end footer-->
</div><!-- end scroller-->
</body>
</html>
CSS:
html, body {margin:0; padding:0; width:100%; height: 100%; overflow: hidden; color:#000}
.container {
background:url(../images/transparent.png);
background-repeat:repeat;
}
#scroller {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 2;
left: 0px;
top: 0px;
}
#minmax {
min-width: 700px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
min-height: 100%;
}
#navbar {
float: left;
width: 25%;
z-index: 3;
margin-top: 20%;
margin-left: 10%;
}
#summary {
float: left;
width: 45%;
z-index: 3;
margin-top: 35%;
margin-left: 10%;
}
#media {
float:left;
width: 80%;
z-index: 3;
margin-left: 10%;
margin-top: 10%;
margin-bottom: 10%;
}
#footer {
width: 100%;
clear: both;
bottom: 0%;
height: 5em;
}
#wrapper {
width: 80%;
margin: 0 auto;
position:fixed;
}
p {
color: #ffffff;
padding: 20px;
}
#summary, #media p {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: justify;
}
#footer p {
font-family: "BankGothic Md BT", "Trajan Pro", Arial;
font-size: 17px;
text-align:right;
padding-right: 10%;
word-spacing: 1em;
}
#navbar ul {
font-family:"BankGothic Md BT", "Trajan Pro", Arial;
font-size: 20pt;
text-align: center;
list-style-type: none;
padding: 5px;
}
