Mental Jetsam

By Peter Finch

Archive for the ‘CSS’ Category

3 column HTML page layout with fixed left and right sidebars using CSS

Posted by pcfinch on February 8, 2011

The following is a simple 3 column HTML page layout using CSS (no tables) so that the left and right “sidebars” have a fixed size and the content expands and contracts to fit the remaining page width.

There are a couple of “tricks” to get this working.

  • Use “float:left” and “float:right” to position the left and right sidebars.
  • The “lbar” and “rbar” divisions MUST appear before the “middle” division.
  • [Optional] Remove the margin from the h1 heading “margin:0” otherwise it looks odd on some browsers if it’s the first element in the division.
<html><head>
<style type="text/css">
body { font-size:10pt }
.lbar { float:left ; width:120px; background-color:yellow }
.rbar { float:right ; width:120px; background-color:yellow }
.middle { margin-left:130px; margin-right:130px; background-color:gray }
h1 { margin:0; font-size:12pt; background-color:blue ; color:white ;  }
</style>
</head><body>
<div>
<h1>Left Bar</h1>
<ul><li>Home</li>
<li>Development</li>
<li>Dowload</li>
<li>Support</li></ul>
</div>
<div>
<h1>Right Bar</h1>
<ul><li>Peter</li>
<li>Steve</li>
<li>Andrew</li>
<li>Chris</li></ul>
</div>
<div>
<h1>Middle</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
</div>
</body></html>
Advertisements

Posted in CSS, HTML | Leave a Comment »

CSS position:fix not working on IE 7

Posted by pcfinch on June 9, 2010

I was trying to create a fixed button bar, at the top of the page, on Internet Explorer 7 using JQuery but I could not get the bar to stay at the top. The CSS property “position:fixed” lets you fix the location of a HTML element on a page so when the rest of the page is scrolled, using the scrollbars for example, the element stays in the same location in the browser window. I found that adding the following DOCTYPE to the top of the pages fixed the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bar")
    .css("width", "100%")
    .css("height","23px")
    .css("position","fixed")
    .css("zIndex", "100") 
    .css("background","gray")
});
</script>
</head>
<body style="margin:0 0 0 0">
<div id="bar">The bar goes here...</div>
.....

Posted in CSS, HTML, javascript | Leave a Comment »

Centering fixed width HTML Content on a page

Posted by pcfinch on April 2, 2007

Centering fixed width HTML content (like this page) on a page sounds simple, but it’s hard to make it multi-browser compatible. The best way I have found, to date, is to center the BODY text using “text-align : center;” and then have a DIV inside it (containing the content) that uses “margin-left : auto; margin-right : auto; width : 720px ; text-align : left ;“. I have tested this on IE6, FireFox 2, Opera 8.5 and Netscape 8 and it seems to work fine.

There does appear to be a little problem with FireFox, however, as the minimum width of the containing page seems to be controlled by some external source (something other that the actual page) and “min-width:640px;” does not appear to have any effect. My guess us that the minimum toolbar width might have something to do with it. This has the effect that you can only reduce the page width to a curtain size and then is stops.

<html>
<head>
<title>Center Page Content Example</title>
<style type="text/css">
<!--
body {
margin : 0px ;
border : 1px blue solid ;
padding-top: 0px ;
margin-top : 0px ;
text-align : center;
background-color : #f0f0f0 ;
}
#page {
border : 1px blue solid ;
margin-left : auto;
margin-right : auto;
width : 720px ;
text-align : left ;
background-color : #d0d0d0 ;
}
#menu {
white-space: nowrap ;
width : 80px ;
vertical-align : top ;
}
#content
{
background-color : white ;
vertical-align : top ;
}
-->
</style>
</head>
<body>
<div id="page">
<table width="100%" border="1">
<tr><td colspan='2'><h1>Center Page Content Example</h1></td></tr>
<tr>
<td id="menu">Menu 1<br>Menu 2<br>Menu 3</td>
<td id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer,
varius eu, rhoncus a,venenatis at, libero. Fusce ullamcorper orci.
Sed velit metus, mattis nec, suscipit quis, porta nec, tellus. Etiam
nulla, interdum a, eleifend non, vulputate sed, purus. Donec. Nulla
consequat, leo eget porta accumsan, justo libero vestibulum
dictum leo lectus eget lacus. Vestibulum varius, orci id tristique
arcu enim blandit elit, id dignissim odio ipsum id dolor. Sed pulvinar
arcu. Sed gravida eleifend elit. Pellentesque sit amet dui. Sed
eros. Sed lacinia velit elementum dui. Morbi bibendum quam
ligula.
</td></tr>
</table></div>
</body></html>

Posted in CSS, HTML | Leave a Comment »