Help with layout

**xxarmoxx** · Feb 12th, 2012, 02:59 PM

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.

**SambaNeko** · Feb 13th, 2012, 12:03 PM

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 &#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;
}

Thread: Help with layout

Thread Tools

Display

Help with layout

Re: Help with layout

Posting Permissions