Learn VBA & Macros in 1 Week!

CSS - Float Positioning Problem

Full Excel VBA Course - Beginner to Expert

Float Positioning Problem	View Content

http://trinitylifebaptistchurch.org/test/content_page1.html

My left float container is correct, but the right float container is not in the correct spot. Instead of being to the right like I want it is on the next line and to the right. Why is it going down a line?

Thanks.

Full Excel VBA Course - Beginner to Expert

Float, Positioning Differences In Ff And Ie

Similar Tutorials

View Content

There are two issues with my code that I need some help with.
I'm trying to set the width to for the main content wrapper, IN IE it renders correctly, but in FF, it clears the sidenav float and starts on new line. By setting the width to a fixed px, I fix the problem in both browsers but I loose my liquidity.

Second, with the main content div I have a 2 collumn layout, floated on top of each other. This renders properly in IE, but not in FF.

The basic layout of the code is
html Code:
Original - html Code <div>Banner</div>  <div>Side Navigation</div>  <div>Wrapper <!-- This div contains 2 collumns floated The float is being rendered in IE, but not in FF I have put a green border around the 2 collumns for clarity <div>Inner Content <div>Collumn 1</div><div>Collumn 2</div> </div> </div> /* The offending CSS Wrapper ID */ div#page { float:left; margin-top:5px; margin-left:10px; width:750px;/* renders in Both, but not liquid */ /* width: auto; renders in IE and I have liquid */ } /*These are the 2 collums which render in IE, but not FF */ div#col-a { position:relative; float:left; padding-left:10px; width:50%; } div#col-b { position:relative; padding-left:10px; padding-right:10px; float:left; }

  
<div>Banner</div>

<!-- This div is a fixed width div, floated to the left
    and has several inner divs that contain graphical elements-->
<div>Side Navigation</div>

<!-- This div is the main content area floated next to Side
       Navigation Div, There are several inner divs that contain
       graphical elements.  When I set this width to atuo (for liquid)
       it works with IE, but doesn't with FF -->
<div>Wrapper

    <!-- This div contains 2 collumns floated
           The float is being rendered in IE, but not in FF 
           I have put a green border around the 2 collumns for clarity
    <div>Inner Content
        <div>Collumn 1</div><div>Collumn 2</div>
    </div>
</div>

/* The offending CSS Wrapper ID */
div#page {
  float:left;
  margin-top:5px;
  margin-left:10px;
  width:750px;/* renders in Both, but not liquid */
  /*
  width: auto;
  renders in IE and I have liquid */
}

/*These are the 2 collums which render in IE, but not FF */
div#col-a {
 position:relative;
 float:left;
 padding-left:10px;
 width:50%;
}

div#col-b {
 position:relative;
 padding-left:10px;
 padding-right:10px;
 float:left;
}

You can view my work here, I haven't put the CSS in its own page yet so you can see the source

Liquid, but doen't work in FF
Renders in Both, but no liquid

Positioning Layers In X,y (position/float?) And Z (z-index?) Dimensions

Similar Tutorials

View Content

Hi all,

After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then )

The goal
I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?)

What I did so far
To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code:

html4strict Code:
Original - html4strict 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> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body>  <div id="container"> <h2 class="title">Quick Links</h2>  <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div>  <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </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>


     <title>Test Layers</title>


     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />


     <link href="style.css" type="text/css" rel="stylesheet" />


     <script type="text/javascript">


         function show( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex += 10;


         }


         function hide( obj ) {


             bla = document.getElementById( obj );


             bla.style.zIndex -= 10;


         }


     </script>


 </head>


 <body>


  


 <!-- CONTAINER -->


 <div id="container">


     <h2 class="title">Quick Links</h2>


  


     <!-- SUBCONTENT -->


     <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');">


         Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


     <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');">


         Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/>


     </div>


  


     <!-- CONTENT -->


     <div class="content_shadow">


         <div class="content">


             <h1 class="title">Site Title</h1>


             <div class="content_white">


                 <h2 class="title">Content Title</h2>


                 Maintext1


             </div>


         </div>


     </div>


 </div>


  


 </body>


 </html>

css Code:
Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }

  

 * {


     margin: 0;


     padding: 0;


 }


  


 body {


     background-color: orange;


 }


  


 h1.title {


     display: none;


 }


 h2.title {


     display: none;


 }


  


 /********************************************************************


  * CONTAINER


  ********************************************************************/


  


 #container {


     border: solid 1px black;


     margin: 0 auto;


     width: 1000px;


     z-index: 1;


 /*  background-color: lightgray;*/


 /*  filter: alpha(opacity=50);*/


 }


  


 /********************************************************************


  * SUB CONTENT


  ********************************************************************/


  


 /*


 http://msdn2.microsoft.com/en-us/library/ms530301.aspx


 http://www.w3schools.com/htmldom/prop_style_clear.asp


 http://www.dynamicsitesolutions.com/css/layout-techniques/


 */


  


 #container .subcontent1 {


     background-color: lime;


     float: left;


     position: relative;


     top: 100px;


     width: 400px;


     z-index: 2;


 /*  display: inline;*/


 /*  height: 200px;*/


 /*  left: 0px;*/


 }


  


 #container .subcontent2 {


     background-color: lime;


     display: block;


     float: right;


     position: relative;


     top: 200px;


     width: 400px;


     z-index: 3;


 /*  display: block;*/


 /*  height: 200px;*/


 }


  


 /********************************************************************


  * MAIN CONTENT


  ********************************************************************/


  


 #container .content_shadow {


     background-color: gray;


     display: block;


     margin: 0 auto;


     opacity: .75;


     position: relative;


     top: 0px;


     width: 850px;


     z-index: 8;


 }


 #container .content {


     clear: none;


     margin: 0 auto;


     width: 800px;


     z-index: 9;


 }


  


 #container .content_white {


     background-color: white;


     display: block;


     height: 800px;


     margin: 0 auto;


     position: relative;


     top: 0px;


     width: 100%;


     z-index: 10;


 }

The problem(s)
Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one)

Thanks for any help and if something isn't clear I'll try to explain it further!

Css Positioning - Footer Positioning Problem

Similar Tutorials

View Content

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Css Position (float Right Causes Float Right Underneath To Not Float Right)

Similar Tutorials

View Content

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?)

Problem With Float

Similar Tutorials

View Content

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

Float Problem

Similar Tutorials

View Content

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

Float Problem.

Similar Tutorials

View Content

Hey,

Im using floats to position a few forms/form-elements horizontally.
But the last form (the signout button), gets shifted on the next line. Can someone explain me why this happens? This is the code i use:
php Code:
Original - php Code echo '<div style="float: left;... blabla">'; echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">'; echo '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">'; echo '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name"> '; echo '<input type="submit" name="search_now" value="Search" id="search_now">'; echo '</div>'; echo '</form>'; echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now"> '; echo '</div>'; echo '</form>'; echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">'; echo ' <input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">'; echo '</div>'; echo '</div>'; echo '</form>'; echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">'; echo '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="logout_now" id="logout_now" value="Sign out">  '; echo '</div>'; echo '</form>'; echo '</div>';

  

 echo '<div style="float: left;... blabla">';


         echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">';


         echo    '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">';


         echo    '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name">&nbsp;';


         echo    '<input type="submit" name="search_now" value="Search" id="search_now">';


         echo    '</div>';


         echo '</form>';


         echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">';


         echo    '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">';


         echo    '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now">&nbsp;';


         echo    '</div>';


         echo '</form>'; 


         echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">';


         echo    '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">';


         echo    '&nbsp;<input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">';


         echo    '</div>';


         echo    '</div>';


         echo '</form>';


         echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">';


         echo    '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">';


         echo    '<input type="submit" name="logout_now" id="logout_now" value="Sign out">&nbsp;&nbsp;';


         echo    '</div>';


         echo '</form>';


 echo '</div>';

Float Problem

Similar Tutorials

View Content

Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6.

The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<style>
			.leftText {
				float: left;
			}

			.rightText {
				float: right;
			}

			.top ul {
				width: 100%;
				text-align:center;
				margin: 0;
				padding-left: 0;
				border: 0;
				list-style-type:none;
			}

			.top ul li {
				display: inline;
				text-align: center;
				float:left;
				border-right:none;
				background-image: none;
				padding-left: 5px;
			}

		</style>
	</head>
	<body>
		<div class="top">
			<div class="leftText">
				This is the text on the left.
			</div>
			<div class="rightText">
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one".

I do not know how best to solve it, and be greatfull for any advise.

thanks and regards,
sim085

Yet Another Float Problem

Similar Tutorials

View Content

I started a new post on this one because it is something I have just noticed in FireFox, but not in IE6.

I have created a new html page with a top, middle and bottom div sections. The middle section contains two other div's, left and right. All these div's I wraped inside another div called container.

What I did (with CSS) is set the container with a width of 400px, and a solid red border. I then set the top and bottom with a height of 40px each. I did not set the height of the middle section since that would grow according to its content. The right div I set it as float:right and the left div I set it as float:left.

This worked fine but then I decided to set the bottom div as float:left ... and it broke in FireFox In FireFox, the container wraped only around the top div, and the other middle and bttom div remained outside that white container. Here is the code I used: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<style>

			body {
				margin: 0;
				text-align: center;
				padding: 10px;
				background: #00ff00;
			}

			.container{
				width: 400px;
				margin: 0 auto 10px auto;
				padding: 0;
				text-align: left;
				background: #ffffff;
				border: 1px solid #d1c7ac;
			}

			.top {
				height: 40px;
			}

			.middle{

				/*
					can not put height here,
					since the middle section
					data changes from page
					to page.
				*/
			}

			.left {
				float: left;
				width: 200px;
			}

			.right {
				float: right;
				width: 200px;
			}

			.bottom {
				height: 40px;
				float: right;
			}

		</style>
	</head>
	<body>

		<div class="container">

			<div class="top">
				Top Section
			</div>

			<div class="middle">

				<div class="left">
					Left Section.
				</div>

				<div class="right">
					Right Section.
				</div>

			</div>

			<div class="bottom">
				Bottom Section.
			</div>
			<!--&nbsp; placed here -->
		</div>

	</body>
</html>

As I said this problem only apears in FireFox, and in IE6 it does not show. I know I am doing something wrong, mostly because I still do not know all about what a float do. I know it is because of the float thing. because what I did is add an   (space) before the end of the container div wraped around the middle, bottom and float as well.

I am sorry for posting yet another question on floats. Thanks for any advise and sugestions.

regards,
sim085

Css Float Problem?

Similar Tutorials

View Content

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.

Float Problem

Similar Tutorials

View Content

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 ?

Float Problem

Similar Tutorials

View Content

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.