CSS - Ff - Clearing Float Problem

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

hi,

i have some divs within my container div. I cant get the container to wrap around the content in #contentMain (which is inside of #content.

in IE, the container wraps after the #leftNav (inside the #conent) but FF wraps after the #nav div

does anyone know how I cant sort it? thanks

html PHP Code:
<div id="container">

<div id="header"></div>

<div id="nav">
//topNav
</div>

<div id="content">

<div id="leftNav">
//leftNav
</div>
    
<div id="contentMain">

//content, links, images and stuff

</div>

</div>
</div> 





css PHP Code:
#container {
        margin:0px auto;
        padding: 0;
        width: 760px;
        /*border: 1px solid #666;*/
        background: url(../images/bodyImg.gif) no-repeat top left;
    }

    #header {
        margin:0px auto;
        padding: 0;
        width: 760px;
        height: 100px;
        background: url(../images/header.gif) no-repeat top left;
    }
    
    #nav {
        width:760px;
        height: 25px;
        padding: 0;
        margin:0;
        background-color: #eee;
     }
    
    #content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 630px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }

    .imgMap1 {
        width: 220px;
        position: relative;
        top: 200px;
        left: 30px;
    } 

I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would.

Here is the basic code I have so far: Code:

<html>
<head>
<style type="text/css">
div.box1 { 
	border: 1px solid red;
	background: #afafaf;
	padding: 2px;
	float: left;
}
div.box1 table { 
	float: left;
	border: 1px solid blue;
	margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
   <table>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
   </table>
 </div>
</div>
<h1>Next Text</h1>
</body>
</html>

I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code:

div.box1:after {
	content: 'clear me';
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables?

I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen.

URL is: http://www.readaloudproject.org/about/

Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working.

Help! Thanks!

So...

I've got a page I'm working on where I can't seem to get to floats to clear without compromising the layout of the divs that are floating.

http://www1.romenews-tribune.com/multimedia2/
http://www1.romenews-tribune.com/multimedia2/style.css

If I try the clear:after class fix, it doesn't work. If I try the overflow: hidden fix, it looks fine until the page is resized - and the overflowing content is hidden.

What I want is for the right and left div is to stretch to the bottom of the page regardless of the page height, and clear to the div they are floating in.

Any suggestions? Let me know if I need to provide better examples or more info, as I'm stumped on this one and feel like I've been doing this for far too long.

Hello all.

I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content.

The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down!

What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing.

I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all.

I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do...

Thanks!

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

Page: http://dev.donmyersministries.com/test.html

Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded.

Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left.

An image if it helps at all:


Please help, before I abandon CSS layouts, again.

later

Hello, I'm new to CSS and I'm in the process of building my first table-less page. It is quite exciting, but I'm having one major problem. For some reason, I cannot get my main content div to float next to my side bar navigation. In the normal write up, it works in IE but not Firefox or Opera. I took just the essential parts of the code to create a test page for this forum, and now it doesn't even work in IE!!!

Here is the code:
Code:

<html>
<head>
  <style TYPE="text/css">
	#topNav {
		margin: 10px 0px;
		border: 1px solid #000;
		width: 100%;
	}

	#sideNav {
		margin-right: 10px;
		border: 1px solid #000;
		width: 150px;
	}

	#main {
		margin: 0;
		border: 1px solid #000; 
		float: left;
	}
  </style>
</head>

<body>
	<div id="topNav">
		Top Nav
	</div>
	<div id="sideNav">
		Side Nav
	</div>

	<div id="main">
		MAIN CONTENT AREA				
	</div>
</body>
</html>

Any help would be greatly appreciated!!!

Hello,

Not so long time ago I had a problem in firefox when i placed float content in another div. Basically the parent div did not want to wrap my float div's.

Thanks to Kravvitz I solved this by following the url over here

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

However today I tried doing the same thing, and I realized that now, my screen is showing fine on FireFox, but not on IE6.0!

here I placed some html to show my problem:

Code:

<html>
  <head>
    <style>

      /* Hides from IE-mac \*/
      * html .clearfix {height: 1%;}
      .clearfix {display: block;}
      /* End hide from IE-mac */

      div.myBox{

        border: 1px solid red;
        display: inline-table;
      }

      div.myBox:after {
        content: ".";
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
        visibility: hidden;
      }


      div.dofloat{

        float:left;
        border: 1px solid green;
      }

    </style>
  </head>
  <body>

    <div class="myBox">
      <div class="dofloat">
        float1
        <br />
        <br />
      </div>
      <div class="dofloat">
        float2
        <br />
        <br />
      </div>
    </div>
  </body>
</html>

If you open this html page in firefox you will notice that a red border is wrapping two green boxes. However opening it in IE6.0 shows a red line in top, and the two green boxes under it.

I know that this is because the float objects are not wrapped automatically, however the hack i have placed in the above html solved it for fire fox.

What would be the best way to make it work in IE6.0 as well?

I did find a hack, that is to place height: 1px; in the div.mybox body:
Code:

div.myBox{

        border: 1px solid red;
        display: inline-table;
        *heght: 1px;
      }

However I am not sure if this is the best way to tackle this problem... thanks for any comments

Regards,
Sim085

http://www.browsercam.com/public.aspx?proj_id=170622

You can see what it's supposed to look like along with the windows 98 version screwed up and the windows 2000 version screwed up. I can't figure out what's causing my navigation div and content divs to not float over.
I have a master container or everything and a main div that holds my navigation and content div's to 760px
PHP Code:
#master{
width:760px;
margin:auto;
}
#main{
float:left;
width:100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
} 




Can anyone give me any ideas what's causing the mess up?

By the way the design works in all other browsers I test with.

I understand IE has many problems with 'float' in css. I've got a new layout I'm working on for a site, and everything is working great on it except one element on IE6. Part of the page, seen below, looks great on FF, Safari, & IE7:



However, IE6 shows up as:



Here's the CSS that governs this part of the layout:

Code:

div.search_and_cart div.account_box{
	border: 1px solid #808080;
}
div.search_and_cart div.account_box p{
	padding: 8px;
}
div.search_and_cart div.account_box div.checkout_button{
	float: right;
	width: 80px;
	line-height: 30px;
	text-align: center;
	background-color: #F68428;
	border: 0;
	margin: 0;
	border-top: 1px solid #808080;
}
div.search_and_cart div.account_box div.checkout_button a{
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
div.search_and_cart div.account_box div.cart_contents{
	width: 153px;
	line-height: 30px;
	padding-left: 5px;
	color: #FFF;
	background-color: #808080;
	border-top: 1px solid #808080;
}

Then here's the HTML:

Code:

		<div class="account_box">
			<p><span style="color: #000;">ACCOUNT</span><br />
			See order status</p>
			<div class="checkout_button"><a href="#">CHECKOUT</a></div>
			<div class="cart_contents">2 items in my cart</div>
		</div>

Any help would be greatly appreciated. Thanks!

Hi,

Have this web page with a lot of divs in it.

I have specified that all divs should be float:left in my css-file so that they will be rendered next to each other. I have noticed that when my browser is smaller than the actual web page some of the divs are rendered below and not to the right. How can I force the browser to still render them to the right. I would like to scroll to the right rather than down.

Can anyone help me with this problem?

/H

Hello!
I'm having some problems with IE :-D my site renders fine in Firefox but in IE7 the float containing the content displaces the header, here's a screen shot:
First the correct rendering.

And the broken render.


CSS Code:
Original - CSS Code @charset "utf-8"; /* CSS Document */ html, body { padding: 0; margin: 0; background: #373737 url(images/pageBackground.gif) repeat-x; font-family: Arial, Helvetica, sans-serif; } #page { width: 817px; margin: 0 auto; background: url(images/contentBackground.gif) repeat-y; } #header { background: url(images/headerBackground.gif) no-repeat; height: 157px; width: 100%; } #navigation { width: 217px; margin: 0 20px 0 16px; padding: 0 7px 7px 7px; } #navigation ul { list-style: none; padding: 0; margin: 0; text-align: center; } #content { width: 520px; float: right; margin: 0 18px 0 0; } #contentFooter { height: 16px; background: url(images/contentFooter.gif) no-repeat; }

  

 @charset "utf-8";


 /* CSS Document */


  


 html, body {


     padding: 0;


     margin: 0;


     background: #373737 url(images/pageBackground.gif) repeat-x;


     font-family: Arial, Helvetica, sans-serif;


 }


 #page {


     width: 817px;


     margin: 0  auto;


     background: url(images/contentBackground.gif) repeat-y;


 }


 #header {


     background: url(images/headerBackground.gif) no-repeat;


     height: 157px;


     width: 100%;


 }


 #navigation {


     width: 217px;


     margin: 0 20px 0 16px;


     padding: 0 7px 7px 7px;


 }


 #navigation ul {


     list-style: none;


     padding: 0;


     margin: 0;


     text-align: center;


 }


 #content {


     width: 520px;


     float: right;


     margin: 0 18px 0 0;


 }


 #contentFooter {


     height: 16px;


     background: url(images/contentFooter.gif) no-repeat;


 } 

HTML Code:
Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Untitled Document</title> </head> <body> <div id="page"> <div id="content">Hello</div> <div id="header"></div> <div id="navigation"> <ul> <li>Home</li> <li>Ingot Casting Machines</li> <li>Ancillary Equipment</li> <li>Contact Us</li> </ul> </div> <div id="contentFooter"></div> </div> </body> </html>

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>

<body>
<div id="page">
    <div id="content">Hello</div>
    <div id="header"></div>
<div id="navigation">

        <ul>
            <li>Home</li>
            <li>Ingot Casting Machines</li>
            <li>Ancillary Equipment</li>
            <li>Contact Us</li>
      </ul>
  </div>

  <div id="contentFooter"></div>
</div>
</body>
</html>

The site is at http://tmasters.it-mechanic.co.uk/

Any help is great fully received.
Thanks