Results 1 to 2 of 2

Thread: Help with layout

  1. #1

    Thread Starter
    Hyperactive Member xxarmoxx's Avatar
    Join Date
    Mar 2007
    Posts
    378

    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.

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    Re: Help with layout

    The tuck-under occurs when the combined width of #aside and #content is greater than 100&#37;, 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 &#169; 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;
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width