-
Help with layout
I really like the way the following HTML/CSS looks when the browser is maximized. However, when I resize the browser the main content starts to tuck underneith the side navigation. Can someone please help me fix this layout?
HTML Code:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<!--<link rel="stylesheet" type="text/css" href="css/html5reset-1.6.1.css" media="screen"/>-->
<link rel="stylesheet" type="text/css" href="css/home.css" media="screen"/>
<!--<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>-->
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<!--<script type="text/javascript" src="js/global.js"></script>-->
<!--<script type="text/javascript" src="js/index.js"></script>-->
</head>
<body>
<div id="head-container">
<div id="header">
<a href="home.php"><img src="img/logo.jpg" style="height: 100px; border: none;"/></a>
<a href="home.php"><img src="img/badger_flipped.png" style="height: 100px; float: right; border: none;"/></a>
<!--<h1>Site Name</h1>-->
</div>
</div>
<div id="navigation-container">
<div id="navigation">
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="index.php?l=1">Sign Off</a></li>
<!--<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>-->
</ul>
</div>
</div>
<div id="content-container">
<div id="content-container2">
<div id="content-container3">
<div id="aside">
<span class="link-header">Client Links</span>
<ul>
<li><a href="#">Client Directory</a></li>
<li><a href="#">Search Clients</a></li>
<li><a href="#">Add Client</a></li>
</ul>
<br />
<br />
<br /><br /><br /><br />
<span class="link-header">Employee Links</span>
<ul>
<li><a href="#">Employee Directory</a></li>
<li><a href="#">Add Employee</a></li>
</ul>
</div>
<div id="content">
<h2><u>Welcome</u></h2>
<p></p>
Welcome Page
<br />
</div>
</div>
</div>
<div id="footer-container">
<div id="footer">
Copyright © Site Name, 2012
</div>
</div>
</div>
</body>
</html>
This is the CSS:
Code:
body{
margin: 0px;
}
#head-container
{
color: #000;
background: #ccc;
min-width: 800px;
}
#header
{
margin: 0 auto;
width: 100%;
padding: 0px;
background: #ffffff;
}
#header h1 { margin: 0; }
#navigation-container
{
float: left;
width: 100%;
padding: 0px;
color: #333;
background: #3598fe;
min-width: 800px;
}
#navigation
{
margin: 0 auto;
width: 100%;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
font-weight: bold;
}
#navigation li a:hover { background: #fc6503; }
#content-container
{
float: left;
width: 100%;
color: #000;
background: #eee;
min-width: 300px;
}
#content-container2
{
margin: 0 auto;
width: 100%;
}
#content-container3
{
float: left;
width: 100%;
background: #fff repeat-y 100% 0;
}
#aside
{
clear: left;
float: left;
/*width: 5%;*/
padding: 1% 1%; /* was padding: 20px 0; 20 15*/
margin: 0 0 0 0px; /* was margin: 0 0 0 30px; */
display: block;
min-width: 170px;
/*min-height: 473px;*/
/*border: solid;*/
}
#aside ul
{
margin: 0;
padding: 0;
display: block;
}
#aside ul li
{
list-style-type: none;
display: block;
}
#aside li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fc6503;
text-decoration: none;
font-weight: bold; /*border-right: 1px solid #000;*/
font-size: 10pt;
}
#aside li a:hover {
text-decoration: underline;
/*background: #deeeff;*/
}
.link-header {
/*<font style="color: blue;"><b><u>Client Links</u></b></font>*/
color: blue;
font-weight: bold;
text-decoration: underline;
font-size: 11pt;
}
#content
{
float: right;
width: 80%;
padding: 1% 1%; /* was padding: 20px 0; 20 15*/
margin: 0 0px 0 0; /* was margin: 0 20px 0 0; */
display: inline;
border-left: solid #3598fe;
min-height:473px;
/*min-width: 473px;*/
/*border: solid;*/
}
#content h2 { margin: 0; }
#aside h3 { margin: 0; }
#footer-container
{
clear: left;
color: #fff;
background: #3598fe;
}
#footer
{
margin: 0 auto;
width: 900px;
text-align: right;
padding: 20px;
height: 1%;
}
.menu-link{
text-decoration: none;
}
Thanks in advance for the help.
-
Re: Help with layout
The tuck-under occurs when the combined width of #aside and #content is greater than 100%, and they can no longer be displayed on the same line. The set width of #content plus all padding on #content and #aside totals 84%. You also have a left-border on #content, so let's say we're at 85% capacity. Then #aside has a min-width of 170px: if you resize the window and 170px > 15%, the tuck-under occurs.
So that's the problem. The simplest solution is to make a few changes to #content:
Code:
#content{
float: left;
padding: 1%;
border-left: solid #3598fe;
min-height:473px;
}
Width and display are removed, and float is "left" instead of "right." These changes allow #content to fill up the space regardless of its calculated size.
In general, you've got a lot more divs in your markup than you need. Here's a sample rewrite that may not be perfect, but might give an idea of where they're unnecessary:
Code:
<body>
<div id="container">
<div id="header">
<a href="home.php"><img src="img/logo.jpg" style="height: 100px; border: none;"/></a>
<a href="home.php"><img src="img/badger_flipped.png" style="height: 100px; float: right; border: none;"/></a>
<!--<h1>Site Name</h1>-->
</div>
<ul id="navigation">
<li><a href="home.php">Home</a></li>
<li><a href="index.php?l=1">Sign Off</a></li>
<!--<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>-->
</ul>
<div id="aside">
<span class="link-header">Client Links</span>
<ul>
<li><a href="#">Client Directory</a></li>
<li><a href="#">Search Clients</a></li>
<li><a href="#">Add Client</a></li>
</ul>
<span class="link-header">Employee Links</span>
<ul>
<li><a href="#">Employee Directory</a></li>
<li><a href="#">Add Employee</a></li>
</ul>
</div>
<div id="content">
<h2><u>Welcome</u></h2>
<p>Welcome Page</p>
</div>
<div id="footer">
Copyright © Site Name, 2012
</div>
</div>
</body>
Code:
*{margin:0;padding:0;}
#header{background: #fff;}
#navigation{
color: #333;
background: #3598fe;
list-style-type: none;
overflow:auto;
}
#navigation li{
float:left;
}
#navigation a{
display: block;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
font-weight: bold;
}
#navigation a:hover { background: #fc6503; }
#container{
min-width:900px;
}
#aside{
clear: left;
float: left;
padding: 1%;
display: block;
min-width:170px;
}
#aside ul{
margin-bottom:30px;
display: block;
}
#aside li{
list-style-type: none;
display: block;
}
#aside li a{
display: block;
padding: 5px 10px;
color: #fc6503;
text-decoration: none;
font-weight: bold; /*border-right: 1px solid #000;*/
font-size: 10pt;
}
#aside li a:hover {
text-decoration: underline;
}
.link-header {
color: blue;
font-weight: bold;
text-decoration: underline;
font-size: 11pt;
}
#content{
float: left;
padding: 1%;
border-left: solid #3598fe;
min-height:473px;
}
#footer{
clear:both;
color: #fff;
background: #3598fe;
text-align: right;
padding: 20px;
}
.menu-link{
text-decoration: none;
}