Float/Clear Positioning Problems

I am trying to figure out how to work with the float: and clear: properties to lay out my page. I have been experimenting with various combinations but have yet to get it to work quite right. Either my page goes off of the DIV, or the text is way off to the right within its div, but I cannot get it to look how I want it to. Any advice would be appreciated.

Also, I plan to keep the top menu and the left menus (or something like them) on most of my pages. I have been told by some to try the PHP include to do this, but I was hoping for more opinions. Thanks.

My site is www.mzbc.com/others.htm.
You will be able to see what I mean with the layout problems. Thanks.

Here is the CSS that I have been experimenting with:

div.informationbox
{position:relative; float:left; top:135px;margin-left:10px; width:189px}

div.resourcesbox
{position:relative; float:left; clear:left; top:150px;margin-left:10px; width:189px}

div.main
{

position:relative;
border:1px solid black;
padding:5px;
width:540px;
background-color:#FFF;
top:135px;
left:220px;
}

.boxheader
{padding-left:24px;
font-size:16px;
font-weight:bold;color:#FFFFFF;
background-image:url(leftboxheader.gif);
background-repeat:none}

.boxtext
{
border-top:none;
padding-left:24px;
padding-top:5px;
padding-right:5px;
font-family:"Palatino Linotype";
font-size:16px;
color:#CCC;
background-color:#1b2d7b}

.boxtext a:link {text-decoration:none;color:#CCC}
.boxtext a:visited {text-decoration:none; color:#CCC}
.boxtext a:hover {text-decoration:underline;color:#CCC}

.boxfooter
{background-image:url(leftboxfooter.gif);background-repeat:none}

h1 {font-family:"Times New Roman", Times, serif; font-size:18px; text-align:center}

Jedidiah

 

First off, your html code needs commenting. There's so many nested divs that you can easily end up adding or deleting one to many, ruining the layout.

i.e </div><!-- close main -->

Ditto commenting your style sheet (first needs tidying)

Anyway, this fixes the issue with MSIE, and aligns it better with Firebox.
However, there's this a real issue with Firebox indenting relative to your menu's
I'll get a work around for this shortly...

div.main
{
position:relative;
top:135px;
left:212px;
_left:5px;
border:1px solid black;
padding:5px;
width:540px;
background-color:#FFF;
}​

 

Thanks, good idea. I'll get it cleaned up.

 

Got fed up looking for a fix for the Firefox issue, (which I suspect is a bug) and wrote better code instead. So much easier, I find

Here's the CSS code:

/* Ackadia.css v7.12, (c) Paul Ackerley, 2000-2005 www.ackadia.com */

body { background: #DCDCDC; color: black; margin: 0; padding: 0; font: normal normal 80% Verdana,Arial,Helvetica,sans-serif; }

/* ~~~~ CSS Division settings for layout ~~~~ */

#container { width: 776px; min-height:500px;
background-color:#C0C0D3; color:black;
border-left: solid 1px #888; border-right: solid 1px #888;
margin-left: auto; margin-right: auto; text-align: center; }

#menubar { width:130px; margin-left:5px; margin-right:auto; padding:4px; float: left; }

#content { padding: 4px;margin-left: 150px; margin-right:5px; } /* margin left decided by menubar width */

#footer { clear: both; padding: 5px; margin-top: 8px; text-align: center; }

#adbar,#menubar,#content,#footer { border:thin dotted #6495ED; background: white; color: black; }

.acenter { margin-left: auto; margin-right: auto; text-align: center; }
​

Obviously you can change the borders, colours etc, but this should give you a cross browser compatible fixed width (800x600 based) two column layout, with separate divisions for the header and footer. Looks OK in Opera, MSIE and Mozilla. /Should/ be OK with Safari on the Mac.

See it here: [ http://www.ackadia.net/2col-fixed/ ]

I don't think you'll have much trouble integrating it with your existing style.

~ Paul

.