CSS Forum

**Galaxian** · 09-08-2007, 08:43 AM

I'm having problems with floating things in my design.

The menu is floated to the left and the main part of the page is a non floated div next to it.

There are a few problems..

The main being whenever an item is floated on the main page if it is bigger than the main div it will extend into and below the footer. I want the main div to contain anything itself it.

Secondly, if the navigation is larger than the main part of the page, then it will extend over the footer and beyond.

I just want everything to stay proportional whilst enabling the floating of layers.

Any ideas?

**LadynRed** · 09-08-2007, 03:44 PM

Quote:

The main being whenever an item is floated on the main page if it is bigger than the main div it will extend into and below the footer. I want the main div to contain anything itself it.

Sounds like you're not CLEARING your floats, and you must do so.

Quote:

Secondly, if the navigation is larger than the main part of the page, then it will extend over the footer and beyond.

Again, probably more to do with clearing the floats, but could be somewhat structural too. I'd have to see the code to know.

Oh.. and they are not 'layers'.. that's an antiquated term that DW insists on propagating - a holdover from the old, old Netscape Navigator days.

**Galaxian** · 09-08-2007, 05:42 PM

Thank you.

How do I clear them? Clear: both? I tried it and it didn't like it. (In the container element)

**danfinney** · 09-09-2007, 09:02 AM

Galaxian,

See if this helps you sort things out:

<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<div id="col_one">Content for id "col_one" Goes Here</div>
<div id="col_two">Content for id "col_two" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</body>
</html>

**Galaxian** · 09-10-2007, 05:10 AM

Thank you Dan.

This works in IE but in Firefox the container of the container clears and not the actual container DIV.

**LadynRed** · 09-10-2007, 02:51 PM

You might want to read up on a few things:
http://css-discuss.incutio.com/?page=FloatLayouts

http://css-discuss.incutio.com/?page=ClearingSpace

**Galaxian** · 03:44 PM

Quote:

Originally Posted by LadynRed

You might want to read up on a few things:
http://css-discuss.incutio.com/?page=FloatLayouts

http://css-discuss.incutio.com/?page=ClearingSpace

Thank you.

Had some compaitability issues while doing this and also trying to attain 100% height.

Currently in Firefox the #main div overlaps the footer by about 20 pixels for some reason. In IE 6 everythings messed, IE 7 too.

Here's my stylesheet. Forgive me, i've severely messed it up since I've been trying to fix all these cross browser issues but it just gets worse whenever I try.

Code:

html, body {
min-height: 100%;
/*height: auto !important;*/
padding: 0px;
margin: 0px;
}

body {
font-family: 'Trebuchet MS', Arial, Verdana;
padding: 0px;
margin: 0px;
height: 100%;
margin-top: 17px;
background: url('images/topbgrad.gif') top repeat-x #b6daff;
}

input {
font-family: 'Trebuchet MS', Arial, Verdana;
}

#wrap {
margin-left: auto;
margin-right: auto;
width: 836px;
background: url('images/rightreal.gif') repeat-y right #8db7dd;
}

#left {
background: url('images/leftreal.gif') repeat-y left;
width: 100%;
}

#leftwrap {
background: url('images/left.gif') no-repeat top left;
width: 100%;
}

#rightwrap {
background: url('images/right.gif') no-repeat top right;
min-height: 200px;
width: 100%;
}

#topbar {
height: 25px;
background: url('images/toppagebar.gif') top right no-repeat;
text-align: right;
width: 614px;
padding-right: 15px;
font-size: 12px;
font-weight: bold;
color: #ffffff;
float: right;
}

#topbar a:link, #topbar a:visited {
color: #ffffff;
}

#topbar a:hover {
color: #EBFFCC;
text-decoration: underline;
}

#navigationwrap {
padding-left: 11px;
}

#navigation {
float: left;
width: 196px;
padding-top: 60px;
background: url('images/menutop.gif') no-repeat top left #8db7dd;
font-weight: bold;
overflow: hidden;
font-size: 12px;
}

#navigation a:link, #navigation a:visited {
display: block;
padding-left: 35px;
margin-bottom: 5px;
color: #ffffff;
text-decoration: none;
}

#navigation a:hover {
background: #ffffff;
color: #0A416D;
text-decoration: underline;
}

#header {
height: 113px;
width: 836px;
background: url('images/header.gif') no-repeat left;
margin-left: auto;
margin-right: auto;
}

#main {
/*padding: 10px;
margin-left: 196px;*/
padding-right: 10px;
height: 100%;
float: right;
width: 619px;
display: table;
clear: right;
}

#mainwrap {
padding: 15px;
padding-left: 20px;
background: #ffffff;
}

#footer {
margin-left: auto;
margin-right: auto;
height: 34px;
background: url('images/footer.gif') bottom center no-repeat;
clear: both;
}

html for header:

Code:

<div id="header">

</div>

<div id="wrap">
<div id="left">
<div id="leftwrap">
<div id="rightwrap">

<div id="navigationwrap">
<div id="navigation">
  <a href="index.php">Home</a>
  <a href="rock-paper-scissors.php">Play Singleplayer</a>
  <a href="rock-paper-scissors-multiplayer.php">Play Multiplayer</a>
    <?php (($loggedin == true) ? print "  <a href=\"users/".$user['username']."\">Your Profile</a>\n  <a href=\"account.php\">Account Settings</a>":print "  <a href=\"login.php\">Login</a>\n  <a href=\"register.php\">Create an Account</a>")?>
  <a href="about.php">About MMORPS</a>
  <a href="support.php">Support</a>
</div>
</div>

<div id="topbar"><?php

(($loggedin == true) ? print "Hello, <a href=\"users/$username\">$username</a>! <a href=\"login.php?logout=1\">[Logout]</a>":print "<a href=\"register.php\">Create an account to play!</a>");

?></div>

<div id="main">

<div id="mainwrap">

code for footer:

Code:

</div>
</div>
</div>
</div>

<div id="footer"></div>

</body>
</html>

**maxxximus** · 09-11-2007, 07:37 AM

It would help if you could post your HTML as well.

**Galaxian** · 09-11-2007, 08:31 AM

Quote:

Originally Posted by maxxximus

It would help if you could post your HTML as well.

Edited

**LadynRed** · 09-11-2007, 03:15 PM

On the #main being floated, in IE you'll run into the doubled-float margin bug because you have the box floated right with a right margin.

You need to use conditional comments and a separate 'iefixes' css file that will contain ONLY the "hacks" needed to make IE6 behave.

You'll see ALL the bugs you must deal with here:
http://www.positioniseverything.net/explorer.html

Why do you have display:table in there ?

**Galaxian** · 09-11-2007, 03:23 PM

Quote:

Originally Posted by LadynRed

On the #main being floated, in IE you'll run into the doubled-float margin bug because you have the box floated right with a right margin.

You need to use conditional comments and a separate 'iefixes' css file that will contain ONLY the "hacks" needed to make IE6 behave.

You'll see ALL the bugs you must deal with here:
http://www.positioniseverything.net/explorer.html

Why do you have display:table in there ?

Thank you, I'll take a look into that.

However, Firefox is also misbehaving with the #main because it's height is 100% it, for some reason, extends 95% into the footer.

And the display: table is there to enable 100% height of main. Is there another way?

**LadynRed** · 09-11-2007, 03:25 PM

You don't need a table for that:
http://www.webmaster-talk.com/css-fo...l-browser.html

You are going to need conditional comments to pull in a 2nd css file ONLY for IE6. IE6 doesn't support min/max width or height.

**Galaxian** · 03:54 PM

I seem to have gotten some issues under control. Instead of making seperate stylesheets for different browser I did a transparent div wrapped around the margin-left and -right's and used padding.

One prominent offending problem that sticks out now is that with Firefox 100% height is not being achieved, but in IE(6, 7) it is.

I have updated my style and header, Let me just update those in the previous posting.

Edit: Regarding the 100% div thread.

I have tried these methods but none really work with my design because the 100% just require the floats to be 100% between the header and footer. In IE 6 and 7 it works, however in Firefox it persists. In my time with playing about with this, the main sometimes extends into the footer (Firefox), or extends down all the page (Ie 6). But Firefox has never really done what I've intended in respect to this.

**LadynRed** · 09-11-2007, 10:29 PM

I'd have to see ALL the code to debug that. Suffice it to say, if IE appears to be doing it 'right', then it's usually doing it WRONG.