Hey everyone,
I’m having a very difficult time with some CSS layout issues. I’m working on a basic layout that has one row across the top, one row along the left side, and a “box” in the center of the page. The content for this project will be displayed dynamically (supplied by a database - variable length of content) in that “box” in the middle of the page.
The problem:
Under its current implementation, the layout will extend to 100% of the browser window’s width and height not the actual width and height as dictated by the page content!
I’ve attached three GIF images that are basically screenshots. I took them in Opera 8.5 on my PowerMac, but every browser I’ve tested with - Opera, Firefox, Safari, MSIE - shows the exact same issues.
Here’s the 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=iso-8859-1" />
<title>{$TITLE}</title>
<link href="templates/default/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div id="usernav">
<a href="myaccount.php">My Account</a> | <a href="settings.php">Settings</a> | <a href="logout.php">Logout</a>
</div>
</div>
<div id="systemnav">
<a href="main.php"><strong>Main</strong></a><br />
<div id="systemsubnav">
<a href="leads.php">Leads</a><br />
<a href="prospects.php">Prospects</a><br />
<a href="clients.php">Clients</a><br />
<a href="inactive.php">Inactive</a>
</div>
</div>
<div id="shell">
<div id="shelltop"></div>
<div id="content">
<h1>{$TITLE}</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dolor lectus, placerat eget, lobortis sit amet, faucibus sed, arcu. Aliquam non eros id ante pellentesque molestie. Etiam luctus elit a massa. Sed risus magna, suscipit id, posuere ut, posuere nec, magna. Phasellus eget augue a orci malesuada ornare. Nulla euismod ultricies leo. Suspendisse potenti. Cras porta. Aenean porta. Nulla consequat dictum urna. Donec interdum. </p>
<p>Ut in nisi et lorem tincidunt interdum. Praesent metus sapien, cursus rhoncus, facilisis et, euismod pharetra, neque. Donec justo neque, iaculis at, posuere at, semper et, urna. Sed risus. Maecenas aliquet posuere mauris. Nullam vehicula ullamcorper lorem. Pellentesque sodales fermentum mi. Pellentesque elit urna, pellentesque sed, tristique vitae, feugiat nec, eros. Donec quis nulla sit amet ipsum sollicitudin cursus. Nam et lectus. Phasellus metus urna, mollis ut, mattis vel, tristique vel, nulla. Suspendisse quis ipsum. </p>
<p>Maecenas vestibulum ultricies dui. Aenean id eros. Maecenas augue nulla, lacinia ut, tempus vitae, elementum non, lorem. Nunc viverra ligula adipiscing odio. Maecenas volutpat facilisis est. Integer convallis venenatis pede. Vivamus tempor lectus nec massa. Mauris lacus. Mauris erat erat, sodales ac, pretium vitae, molestie non, orci. Praesent consectetuer est id ante. Praesent libero. Ut ut mauris eu urna vestibulum venenatis. Nulla eget tellus sed est tincidunt placerat. Suspendisse enim lectus, convallis et, elementum quis, lacinia at, sapien. Ut luctus lobortis justo. Phasellus in quam. </p>
<p>In sit amet leo. Nullam ac nibh. Morbi neque tortor, malesuada facilisis, malesuada in, lacinia quis, metus. Sed ut felis eu nulla rutrum semper. Maecenas enim. Ut fringilla est in erat convallis porttitor. Sed sit amet urna sit amet ligula aliquet placerat. In porta justo vitae diam. Vestibulum semper fringilla felis. Mauris quis pede id magna vehicula placerat. Donec arcu velit, vulputate vitae, semper vitae, ultricies non, libero. Donec elit odio, faucibus id, feugiat pellentesque, convallis accumsan, nibh. Nulla tellus. Curabitur eu ante faucibus erat tempus vehicula. Vivamus hendrerit sem et tellus. Aenean feugiat. Curabitur ut justo vel ante rutrum mattis. Nulla auctor aliquet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nec dui. </p>
<p>Phasellus sed elit ut lorem venenatis gravida. Duis ut nisl. Aliquam sit amet libero. Maecenas convallis lacus fringilla libero. Vivamus ornare, lorem quis feugiat interdum, ligula arcu nonummy massa, ac nonummy est dolor sed orci. Praesent euismod, ante scelerisque eleifend tempus, felis odio scelerisque odio, sed mollis erat metus a augue. Fusce iaculis magna venenatis mi. Suspendisse id sem ac massa gravida consequat. Cras gravida diam non lacus. Proin suscipit odio sit amet lorem. Donec libero sem, dapibus sed, facilisis sed, vestibulum eget, felis. Ut massa. Fusce ipsum mi, imperdiet sed, dignissim sed, laoreet sed, diam. Donec mattis porta ipsum. Phasellus in lacus.</p>
</div>
<div id="bottom">
Copyright 2005 Ionex Interactive. All Rights Reserved.
</div>
</div>
</body>
</html>
…and here’s my CSS:
/* CSS Document */
body {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
color: #666666;
background-color: #F1F4F6;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
line-height: 125%;
}
a:link, a:visited {
color: #0066FF;
text-decoration: underline;
}
a:active, a:hover {
color: #FF0000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 21pt;
color: #000000;
font-weight: normal;
}
/* Login Layout */
#loginshell {
position: absolute;
width: 100%;
height: 355px;
top: 50%;
margin-top: -177px;
background-image:url(Media/login-back.gif);
background-position: center;
background-repeat: no-repeat;
}
#login {
position: absolute;
top: 150px;
width: 300px;
left: 50%;
margin-left: -150px;
}
#loginbutton {
position: relative;
top: 10px;
text-align: center;
}
#loginfooter {
position: absolute;
width: 100%;
left: 0;
text-align: center;
bottom: 12px;
font-size: 9px;
}
#error_report {
position: absolute;
width: 100%;
left: 0;
text-align: center;
bottom: 50px;
font-size: 10px;
color: #FF0000;
}
/* End Login Layout */
/* Main Shell Layout */
#top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 95px;
border-bottom: 1px solid #c0c6cb;
background-color: #FFFFFF;
background-image: url(Media/UtopiaLogo.gif);
background-position: center left;
background-repeat: no-repeat;
}
#usernav {
position: absolute;
top: 10px;
right: 20px;
width: auto;
height: auto;
}
#usernav a {
color: #000000;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
}
#systemnav {
position: absolute;
padding-left: 12px;
padding-top: 7px;
left: 0;
top: 95px;
border-right: 1px solid #FFFFFF;
background-color: #c0c6cb;
width: 200px;
height: 100%;
}
#systemnav a {
color: #FFFFFF;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 175%;
}
#systemsubnav {
position: absolute;
left: 30px;
}
#shell {
position: absolute;
left: 245px;
top: 110px;
width: 602px;
height: auto;
}
#shelltop {
background-image: url(Media/roundedRectangleTop.gif);
background-repeat: no-repeat;
background-position: top left;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
}
#content {
width: 580px;
background-color: #FFFFFF;
border-left: 1px solid #c0c6cb;
border-right: 1px solid #c0c6cb;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 30px;
float:left;
}
#bottom {
background-image: url(Media/roundedRectangleBottom.gif);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 5px;
font-size: 9px;
text-align: center;
clear: both;
}
/* End Main Shell Layout */
/* Custom Styles */
.textInput {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
color: #666666;
border: 1px solid #C0C6CB;
}
/* End Custom Styles */
In the CSS document, ignore anything that says “login” anything - that’s the layout for the login section of this application and it’s working just fine.
In the research I’ve done for this I’ve come across some things saying that in order for certain page elements to know the width and length of other page elements, they have to be inside the document flow and as such can NOT be absolute positioned and must have a float or clear on the element in CSS. I don’t understand floats and/or clears at all, so this is by all means a hack right now. All I know about a float is that it somehow makes other elements aware of it. I just don’t know how to get all those elements working in perfect harmony.
So to recap, I need the width of the top bar to extend to the edge of the browser window and to STAY extended if the window is resized (white all across the top), and I need the side bar on the left to extend all the way to the bottom, again even if the window is resized.
Also, the side bar on the left is the “placeholder” for the system navigation (as you’ll see in the “layout1.gif” attachment). There will be room for that navigation to grow dynamically also - in other words, that could be all that’s in the system, or there could be potentially hundreds of navigational elements just like the first one all down that page. I need that sidebar to extend to the bottom no matter what. So if there are more entries than can be displayed on the page and the user has to scroll down, it stays blue/grey all the way to the bottom. The content box can be any height, that’s irrelevant as long as the top and bottom portions of the curved rectangle backgrounds stay lined up right. I just want that blue/grey section to extend as far as the content - in either div - needs it to.
Any ideas on what I’m doing wrong here and how I can fix it?
Thanks guys!