CSS Positioning

@ldoodleMar 12.2009

Hiya,

I’m building an intranet for my company, but can’t for the life of me remember CSS properly as haven’t coded anything for a year so!

Basically, I have a header along the top, menu on the left, content to the right of the menu, and a footer along the bottom.

You’ll see from the screen shot that when the content sections spans further than the menu, the menu background color stops at it’s min-height (which is in CSS). How can I get this to flow to always butt up to the footer? height: 100%; doesn’t work.

Secondly, I have <div>’s that contain a <p> and an <img> (the content headers). I need the <p> left aligned and the <img> right aligned inside this <div> (again in the screen shot).

Thanks for any help!!

to post a comment

CSS

3 Comments(s) _↴

@ldoodleauthorMar 12.2009 — #

[CODE]<link rel="shortcut icon" href="/images/favicon.ico" />
 <link rel="stylesheet" type="text/css" href="/styles/intranet.css" media="screen" />
 
 <title></title>
 
 </head>
 
 <body>
 
 <div id="container">
 
 <div id="header">
 
 <!-- #include virtual="/includes/header.inc" -->
 
 </div>
 
 <div id="menu">
 
 <!-- #include virtual="/includes/menu.inc" -->
 
 </div>
 
 <div id="content">
 
 <div class="contentHeader">
 
 <p>Website Links (<a href="/">more...</a>)</p>
 <p><a href="" onclick="toggle('WebLinks'); return false;" title="Expand/Collapse "><img src="/images/exp_coll.png" alt="Expand/Collapse module " /></a></p>
 
 </div>
 
 <table id="WebLinks">
 
 <colgroup span="2">
 
  <col width="20&#37;" />
  <col width="80%" />
 
 </colgroup>
 
 <tr>
 
  <td>Website 1</td>
  <td>Website 1</td>
 
 </tr>
 
 <tr>
 
  <td>Website 2</td>
  <td>Website 2</td>
 
 </tr>
 
 <tr>
 
  <td>Website 3</td>
  <td>Website 3</td>
 
 </tr>
 
 <tr>
 
  <td>Website 4</td>
  <td>Website 4</td>
 
 </tr>
 
 <tr>
 
  <td>Website 5</td>
  <td>Website 5</td>
 
 </tr>
 
 </table>
 
 <div class="spacer"></div>
 
 <div class="contentHeader">
 
 <p>Upcoming Due Dates (<a href="/">more...</a>)</p>
 <p><a href="" onclick="toggle('DueDates'); return false;" title="Expand/Collapse "><img src="/images/exp_coll.png" alt="Expand/Collapse module " /></a></p>
 
 </div>
 
 <table id="DueDates">
 
 <colgroup span="5">
 
  <col width="10%" />
  <col width="30%" />
  <col width="10%" />
  <col width="25%" />
  <col width="25%" />
 
 </colgroup>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Due Date 1</td>
  <td>0123456789</td>
  <td></td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Due Date 2</td>
  <td>0123456789</td>
  <td></td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Due Date 3</td>
  <td>0123456789</td>
  <td></td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Due Date 4</td>
  <td>0123456789</td>
  <td></td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Due Date 5</td>
  <td>0123456789</td>
  <td></td>
  <td></td>
 
 </tr>
 
 </table>
 
 <div class="spacer"></div>
 
 <div class="contentHeader">
 
 <p>News (<a href="/">more...</a>)</p>
 <p><a href="" onclick="toggle('News'); return false;" title="Expand/Collapse "><img src="/images/exp_coll.png" alt="Expand/Collapse module " /></a></p>
 
 </div>
 
 <table id="News">
 
 <colgroup span="3">
 
  <col width="10%" />
  <col width="70%" />
  <col width="20%" />
 
 </colgroup>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>News item 1</td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>News item 2</td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>News item 3</td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>News item 4</td>
  <td></td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>News item 5</td>
  <td></td>
 
 </tr>
 
 </table>
 
 <div class="spacer"></div>
 
 <div class="contentHeader">
 
 <p>IT Support Incidents (<a href="/">more...</a>)</p>
 <p><a href="" onclick="toggle('ITSupport'); return false;" title="Expand/Collapse "><img src="/images/exp_coll.png" alt="Expand/Collapse module " /></a></p>
 
 </div>
 
 <table id="ITSupport">
 
 <colgroup span="6">
 
  <col width="10%" />
  <col width="50%" />
  <col width="10%" />
  <col width="10%" />
  <col width="10%" />
  <col width="10%" />
 
 </colgroup>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Problem 1</td>
  <td>Normal</td>
  <td>Pending</td>
  <td>02/01/1900</td>
  <td>03/01/1900</td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Problem 2</td>
  <td>Normal</td>
  <td>Pending</td>
  <td>02/01/1900</td>
  <td>03/01/1900</td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Problem 3</td>
  <td>Normal</td>
  <td>Pending</td>
  <td>02/01/1900</td>
  <td>03/01/1900</td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Problem 4</td>
  <td>Normal</td>
  <td>Pending</td>
  <td>02/01/1900</td>
  <td>03/01/1900</td>
 
 </tr>
 
 <tr>
 
  <td>01/01/1900</td>
  <td>Problem 5</td>
  <td>Normal</td>
  <td>Pending</td>
  <td>02/01/1900</td>
  <td>03/01/1900</td>
 
 </tr>
 
 </table>
 
 <div class="spacer"></div>
 
 <div class="contentHeader">
 
 <p>Staff Absences - 5 Day (<a href="/">more...</a>)</p>
 <p><a href="" onclick="toggle('Absences'); return false;" title="Expand/Collapse "><img src="/images/exp_coll.png" alt="Expand/Collapse module " /></a></p>
 
 </div>
 
 <table id="Absences">
 
 <colgroup span="3">
 
  <col width="20%" />
  <col width="65%" />
  <col width="15%" />
 
 </colgroup>
 
 <tr>[/CODE]

[CODE]html, body {
 margin: 0px 0px 10px 0px;
 padding: 0px;
 }
 
 body {
 background: #fafafa;
 color: #000000;
 font-family: calibri, verdana, tahoma, arial, sans-serif;
 font-size: .74em;
 }
 
 a {
 color: #000000;
 text-decoration: none;
 }
 
 a:hover {
 color: #cccccc;
 text-decoration: none;
 }
 
 img {
 border: 0px;
 vertical-align: middle;
 }
 
 table {
 border-collapse: collapse;
 border-spacing: 0px;
 table-layout: fixed;
 }
 
 th {
 border-right: 1px solid #c8c8e4;
 border-bottom: 1px solid #c8c8e4;
 border-left: 1px solid #c8c8e4;
 background: #fafafa;
 padding: 2px;
 }
 
 td {
 border-right: 1px solid #c8c8e4;
 border-bottom: 1px solid #c8c8e4;
 border-left: 1px solid #c8c8e4;
 padding: 2px;
 }
 
 #container {
 background: #ffffff;
 border: 1px solid #c8c8e4;
 margin: 20px auto 0px auto;
 text-align: left;
 width: 904px;
 }
 
 #header {
 border-bottom: 1px solid #c8c8e4;
 height: 125px;
 }
 
 #header_logo {
 float: left;
 padding: 20px;
 }
 
 #header_thumbs {
 float: right;
 padding: 30px 20px 0px 0px;
 }
 
 #menu {
 background-image: url(/images/menu_bg.gif);
 background-repeat: repeat-y;
 border: 1px solid #c8c8e4;
 clear: both;
 float: left;
 margin: 2px 1px 2px 2px;
 min-height: 400px;
 padding: 4px 2px 4px 4px;
 width: 130px;
 z-index: 1000;
 }
 
 #menu ul {
 list-style: none;
 margin: 0px;
 }
 
 #menu .menuHeader {
 font-weight: bold;
 padding: 2px;
 }
 
 #menu .menuItem {
 margin: 0px 0px 0px 5px;
 }
 
 #content {
 float: left;
 margin: 2px 2px 2px 1px;
 width: 760px;
 }
 
 #footer {
 border-top: 1px solid #c8c8e4;
 clear: both;
 }
 
 #footer p {
 font-weight: bold;
 margin: 2px 4px 2px 0px;
 text-align: right;
 }
 
 .contentHeader {
 background: #ebebeb;
 border: 1px solid #c8c8e4;
 }
 
 .contentHeader p {
 font-weight: bold;
 margin: 2px 0px 2px 2px;
 }
 
 .spacer {
 padding: 1px 0px 1px 0px;
 }
 
 .right {
 float: right;
 }
 
 .left {
 float: left;
 }[/CODE]

@MichaelF10Mar 13.2009 — #Hiya,

I'm building an intranet for my company, but can't for the life of me remember CSS properly as haven't coded anything for a year so!

Basically, I have a header along the top, menu on the left, content to the right of the menu, and a footer along the bottom.

You'll see from the screen shot that when the content sections spans further than the menu, the menu background color stops at it's min-height (which is in CSS). How can I get this to flow to always butt up to the footer? height: 100%; doesn't work.

Secondly, I have <div>'s that contain a <p> and an <img> (the content headers). I need the <p> left aligned and the <img> right aligned inside this <div> (again in the screen shot).

Thanks for any help!![/QUOTE]

Short answer:

<i>
 </i>#container 	{
 background:#fff;
 margin:20px;
 width:904px;
 position: absolute;
 top: 0px;
 left: 50%;
 text-align: left;
 margin-left: -452px;
 border: 1px solid #c8c8e4;
 }

Long answer, I got bored:

Demo: http://ziptank.com/demo/ldoodle/

Download: http://ziptank.com/demo/ldoodle/idoodle.zip

Please only use this code if your willing to give me credit somewhere or leave the footer in tact.

PS: If you need any help with anything feel free to contact me via MSN: [email][email protected][/email]

@ldoodleauthorMar 16.2009 — #Thanks for the effort (and I mean it) but I sorted it myself!

Also in #CSS _↴

Z-Index - Menu behind image in IE, no other browser How do I move the button to the right of the box browser detect for differering css

Success!

Help @ldoodle spread the word by sharing this article on Twitter...

Tweet This

CSS Positioning

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Positioning

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴