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:
This is the CSS: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>
Thanks in advance for the help.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; }




Reply With Quote