CSS - Ie Float Element Problem

I usually never have problems with CSS layouts but whatever reason I'm struggling with this one...

I have a container div and inside it I have 4 divs (2 on the left stacked on each other and two on the right stacked on each other).

Code:

#container {
height: 604px;
width: 920px;
}

#container_left {
height: 604px;
width: 597px;
float: left;
}

#container_right {
height: 604px;
width: 323px;
float: right;
}

#left_top {
background-image:url(images/001.jpg);
background-repeat:no-repeat;
height: 501px;
width: 597px;
}

#left_bot {
width: 597px;
height: 103px;
}

#right_top {
width: 323px;
height: 308px;
background-image:url(images/002.jpg);
background-repeat:no-repeat;
}

#right_bot {
background-image:url(images/003.jpg);
background-repeat:no-repeat;
width: 323px;
height: 296px;
}

all the divs are empty at the moment (just a bg image) except for #left_bot....HTML below...

Code:

  <div id="container">
    	<div id="conrainter_left">
        	<div id="left_top"></div>
            <div id="left_bot"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get Started','','images/start_rollover.jpg',1)"><img src="images/start.jpg" alt="Click here to Get Started" name="Get Started" width="597" height="103" border="0" id="Get Started" /></a>
            </div>
        </div>
        <div id="conrainter_right">
            <div id="right_top"></div>
			<div id="right_bot"></div>
        </div>   
    </div>  <!--end container-->

The results I'm getting...The container left div looks good. The container right div is not to the right of the page, but instead to the left of the page below the left div. Instead of floating it right its pushing down to the next line.

Any help would be appreciated. Thanks.

When you look at http://www.mvcc.edu/cltrl/movies/thecorporation.cfm in IE and FF, you'll immediately notice the difference. In IE, the paragraphs are next to the image. In Firefox, the text is below the image? What's the deal with this? Is it something to do with the float or margin ?

Hi all

i have a problem with a website i am building. It is very annoying. I have a masterpage with a float left menu, a contentplaceholder and a float right element. It used to work correctly but now it floats right OK but when I zoom in the left menu and content zoom correctly but the right float overlaps the content as though it is stuck. I have tried all sorts of things but nothing I can find works. Here is the css :
body
{
height:100%;
}
#div.row span.left {
float: left;
text-align: left;
font-weight: bold;
color: #fff;
width: 49%;
}

#div.row span.right {
float: right;
text-align: right;
font-weight: bold;
color: #fff;
width: 49%;
}




#container
{

width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 100%;
}

#top
{
padding: .5em;
background-color: #FFFFFF;
border-bottom: 0px solid gray;
height: 46px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
color: #006000;
text-align: center;
}

#top h1
{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFF66;
}
#leftnav
{
float: left;
width: 167px;
height: 483px;
margin: 0;
padding: 0;
height: 409px;
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;

}
#link
{
}

ul#navigation
{
width: 9.2em;
float: left;
margin: 0 0px 0 0;
padding: 1em;
height: 497px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #0207f6;
}
ul#navigation li
{
list-style:none;
background-color:#ECEEFA;
border-top: solid 1px #ECEEFA;
text-align: left;
margin: 0;
}
ul#navigation li a
{
display:block;
text-decoration: none;
padding: .25em;
border-bottom: solid 1px #39f;
border-right: solid 1px #39f;
height: 21px;
width: 141px;
}


#rightnav
{

float: right;
width: 160px;
margin: 0;
padding: 1em;
height: 399px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
right:0;

}

#content
{

margin-left: 203px;
border-left: 0px solid gray;
margin-right: 0px;
border-right: 0px solid gray;
padding: 1em;
width: 100%;
height: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
text-align: center;
margin-top: 0px;
width: 619px;
}
#h2
{
color:#ff0000;
font-weight: bold;
text-align:center }

any ideas anyone?

Andy

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

Hi,

I am stuck on this css code and need some different eyes to look at it

I have a image on the left hand side and then text next to it

here is the css code
Code:

.topone
{
height:85px;
}

.left
{
float:left;
}

.right
{
float:left;

}

.rightone
{
font-style: italic; 
padding:10px;
text-align:left; 
font-family: arial; 
font-size:10pt;
}

.rightbottom
{
font-style: bold;
font-family: arial; 
font-size:10pt;
text-align:right; 
}

<div class="topone">
<div class="left">
<a href="/" title="Home"><img src="/newimages/new.jpg"/></a></div>


<div class="right">
<p class="rightone">This Website is used to move contruction materials from one place to another so handle with care and dont play around handle with care handle with care</p>

<p class="rightbottom">Home | Menu | Shopping | Store </p>


</div>
</div>

whats happening is the text next to the image in IE is next to it but in firefox the text is below the image
any idea

todd

I've been working on this project for over a month and for some reason cant get my tic-tac-toe container to float in the middle of the page in IE6.

The container that is causing the problem is called "<div id="tic-tac-toe">".

It centers perfectly in Firefox and IE7 but stays far off to the right in IE6 no matter what I do.

Please help if you can help me figure this out your a genius!!

Here is a link to to the site: http://dev.blackstonemedia.net/dfh/products.html

i have the following:

.topDiv {background-image:url(images/topbg.gif); width:796px;height:60px; margin-top:1em; }
.menuBar {background-image:url(images/menubar.gif); width:796px;height:30px; margin-top:-59px; }
.compLogo {background-image:url(images/topleftimg3.gif); width:305px; height:123px; float:left; margin-left:1em; margin-top:-60px;}

what i want is to float compLogo over menuBar and topDiv. however, compLogo floats over topDiv and then menuBar floats over compLogo. how can i force the menuBar to appear under compLogo div?
thanks for the help in advance

thanks in advance for the help! if you can take a look at the code below, you will see that all the subcontents are not aligned right. i am trying to display subcontent1, subcontent2 and subcontent3 in row1. then, repeat it for row2. so it will look like 3 cols X 2 row table.
what i am doing wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}
#subcontent2 {float:left; height:50px; margin:0 0 .2em .5em; background:#eee8aa; border:1px solid black; }
#subcontent3 {float:right; height:50px; margin:0 0 .2em 0; background-color:#CCCCCC; border:2px dotted red;}
#subcontent1 {margin-left:400px; border:1px solid blue; margin-right:150px; padding:1em; }
#subcontent p {margin:0 0 .5em .5em; font-family:Verdana; font-size:11px; background-color:#CCCCCC; border:1px solid black; text-align:center }

</style>
</head>

<body>
<div id="content"><h2>Subheading</h2>
<p>fg gdhoiuw eiouhe viouwbfu8igdofi goiwehviuh eropihpvoih epfiovhpoefvh fbv iopwehfviu teopiuhrguioh gfdg tgt wg</p>
<p>afd dfouighoiweh oiehoiuehoiu iuashfoiuerfiugeroigriugh lirduivh lrehv ioperviuherviuo qouitrhvui tgvwre</p>
<p>rg uwtdh guoiseh uisgoiunb oiutruighepguihgptuhg dfhgpeorhv oiuhgoihetoishgoi </p>
<p>sdfgdf gwetguh reigqre uyreaiu qeroi er fdgfg thgwrtighuroiu og9hghgtuih wtpghwepipeg ptbsrthb </p>
<div id="subcontent2">dfgdghureuererg uiruykerf
fgsgs
gsgh
sdg
sfg
fdsgg</div>
<div id="subcontent1"><p id="st3">zones:</p><select name="selZone" size="10" multiple class="sel1">
<option value="%%">* Select One *</option>
<option value="1">Ferrari</option>
<option value="2">Lamborghini</option>
<option value="4">Porsche</option>
<option value="5">Konigssen</option>
</select></div>
<hr align="right" width="276" id="dV">
<div id="subcontent2">dsfwuy rbefuyerwfy erg</div>
<div id="subcontent1">
<textarea name="s" rows="10" cols="10"> fiyrqeyfreuyf uuyqfyu fgg tg
sdgsgfdg teg tg tg wgtgtrg rgregfwregfwgwg wtgrtg rtghtrghg trgtrgtrg</textarea></div>
<div id="subcontent3">this is subcontent3</div>
</div>
</body>
</html>

I would be VERY appreciative if someone could tell me why the big quote mark in the bottom left text box of this page does not look correct in IE7...it looks great in Firefox...the big quote mark should be raised above the text as it is in FF....

I'm floating 2 <p> elements there, and put borders around the <p> elements to see what was happening...I even put the <p> elements inside a container <div>, but that didn;t help....I reluctantly used a negative margin in FF, but the same doesn;t work in IE....Am I missing something simple here?

Thanks for any help...

Hey there, I have a problem

I have 3 divs that are going to the top of my heading, and the right one just doesnt float into place.

http://hookem.no-ip.org/Upload

As you can probably see, the top of each box and to the right.

This is my code in the CSS.

PHP Code:
.hr{
background-image: url(right.gif);
width: 3px;
height: 23px;
background-repeat: no-repeat;
} 





And the HTML part...
PHP Code:
<div class="hl"></div><div class="hm">Hello again</div><div class="hr"></div> 





I really really would like help please.

Thanks for looking and helping!
Hookem!

I have the following pretty straight forward and simple layout
borders

For some reason the "right" floated div "Add Account" is not going to the right in FF3.

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

form
{
	margin:0px;
}

.container
{
	position:absolute;
	top:0;
	left:0;
}

.outer
{
	float:left;
	margin:10px;
	background-color:#FFFFFF;
	border:1px;
	border-style:solid;
	border-color:#990000;
}

.inner-left
{
	float:left;
	padding:10px;
}

.inner-right
{
	float:right;
	padding:10px;
}
</style>
</head>

<body>
<div id="container" class="container">
	<div class="outer">
		<div class="inner-left">
			<form>
				Filter&nbsp;
				<input type="text" name="filer" id="filter" value="" size="20" />&nbsp;
				<input type="submit" name="go" value="Go" />
			</form>
		</div>

		<div class="inner-right">
			<form>
				Add Account&nbsp;
				<input type="submit" name="go" value="Go" />
			</form>
		</div>
	</div>
</div>
</body>
</html>

It renders correctly in FF2, IE6 and IE7, but I just can't figure how why it won't display correctly in FF3 (version 3.0.5 to be precise) - just when I thought I'd finally "mastered" most css issues!

Any help 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 am trying to re-write a forum post box that is fully CSS and XHTML compliant.

I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC.

I cannot work out what the problem is.

Can anyone help?

(URL fixed)
http://centerstageproject.com/test/index2.html

As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached.

In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box.