Float is driving me insane!!!

@Sunny_GSep 01.2005

Hi everybody. I am learing CSS, so bear with me if I ask some dumb questions…

I am working on a new site (Some of you have already seen this, but now I’m redoing it… again) and float is driving me insane. I’ve got two divs, both of equal height. The left div I “floated” left. The one on the right just won’t go in place. I viewed it in IE6 and in FF 1.0.6 and both show it incorrectly. Attached is a small zip folder in which this problematic page is contained.
Just FYI, I use an external stylesheet.

Thanks everybody!

-Sunny G

to post a comment

CSS

18 Comments(s) _↴

@ray326Sep 01.2005 — #Attached is a small zip folder in which this problematic page is contained.[/QUOTE]Nope.

@ray326Sep 01.2005 — #Sometimes it's best to absolutely position the left one and use a left margin to keep the right one off the top of the left one. That way the right one can still be liquid.

@Sunny_GauthorSep 01.2005 — #Oops...

[upl-file uuid=a00539d9-6444-432f-9d65-211dcb6d6017 size=19kB]PHRED.zip[/upl-file]

@Sunny_GauthorSep 02.2005 — #Sometimes it's best to absolutely position the left one and use a left margin to keep the right one off the top of the left one. That way the right one can still be liquid.[/QUOTE]
How do I do that? Won't it not work if I center the page? How do I do that?

@LJKSep 02.2005 — #Hi -

I think when floating things, it's best to remember a few points:

- Consider the width of the container they're in.

- Set each one's width in % or px.

- Be sure to clear:both; in the next element's css.

Kind of like:

[code=html]
 <div class="contain">
 <div class="main">
 <p>
 </p>
 </div>
 <div class="left">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <div class="foot">
 <a href="..." title=""></a>
 </div>
 </div>
 [/code]

With css:

body{

width:100%; height:100%; text-align:center; margin:0 auto;...}

div.contain{

width:90%; margin:0 auto;}

div.main{

width:45%; float:right; margin:0 auto; padding:5%;}

div.left{

width:45%; float:right; margin:0 auto; padding:5%;}

div.foot{

width:100%; clear:both; margin:0 auto;}

Good luck,

El

@Sunny_GauthorSep 02.2005 — #But when I float the main div right and the left div left, the right div goes underneath the left div.

clear:both;[/QUOTE]
What does that do/mean?

@ray326Sep 02.2005 — #Put the content in a wrapper div for centering purposes. Here's a quicky example with content removed to save space. Slap some lorem ipsum into the two content divs.

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="Content-Script-Type" content="text/javascript">
 <meta name="Content-Style-Type" content="text/css">
 <title>Conforming HTML 4.01 Template</title>
 <style type="text/css">
 #wrap {
 width:85%;
 margin: 1em auto;
 border: 1px dotted #999;
 }
 #left {
 width: 10em;
 float:left;
 background: #ffe;
 }
 #main {
 margin: 0 1em 0 11em;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="left">
 <p>Throw some lorem ipsum in here.</p>
 </div>
 <div id="main">
 <p>Try som ut enim ad minim veniam in this one</p>
 </div>
 <div style="clear:both"></div>
 </div>
 </body>
 </html>
 [/code]

@Sunny_GauthorSep 02.2005 — #Yeah, I've already got it in a container div (#MAIN_CONTAIN).

I still don't know what to do fix the weird left and right divs.

Just FYI, it looks OK in IE6 but not OK in FF (1.0.6)

@JayhawkSep 02.2005 — #Are you sure its not a width issue? Sometimes IE is adding a bit of a margin to an element causing the floated elements to not fit side-by-side within the container. FF doesn't do that, so they fit. I've had that happen.

You might try arbitrarily narrowing one of the floated elements and see if that solves the problem.

@Sunny_GauthorSep 02.2005 — #Actually, my problem is that it works in IE but not in FF. I think I should absolutely position both divs, but I don't know how--well, I kinda know but it does not work for me.

@Sunny_GauthorSep 02.2005 — #How do absolutely position things?

@ray326Sep 03.2005 — #Put margin:auto; in the body and margin-left:100px; in the main.

@Sunny_GauthorSep 04.2005 — #OK, I didn't do that, but I got it to work. I'm not sure what I did, but it worked!

I'll see if I can get a zip folder attached later.

Thanks!

@ray326Sep 04.2005 — #OK, I didn't do that, but I got it to work. I'm not sure what I did, but it worked![/QUOTE]Ok, your pentence is to sit down and listen to Stevie Wonder do Superstition for an hour.

@moondanceSep 04.2005 — #Sometimes IE is adding a bit of a margin to an element causing the floated elements to not fit side-by-side within the container. FF doesn't do that, so they fit.[/QUOTE]

This is exactly the problem i've got, and i've spent hours trying to figure it out:

pop this into a blank document and see what i mean:

[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>Untitled Document</title>
 <style type="text/css">
 #MainGraphicFrame{
 padding: 0;
 margin: 0;
 margin-left: 13em;
 height: 170px;
 background-color:#C6F0CE;
 }
 
  #SubGraphicFrame{
   overflow:hidden;
   width: 13em;
   float:left;
   height: 170px;
   padding: 0;
   background-color:#FFACF6;
  </style>
 </head>
 
 <body>
 <div id = "SubGraphicFrame"></div>
 <div id = "MainGraphicFrame"></div>
 </body>
 </html>
 [/CODE]

What i need is for the two boxes to be touching, but as you say, for some reason IE adds like a little space between the two boxes, so they're not in contact. To see how it [I]should [/I]look, view the page in firefox, and thats exactly what i need to happen in IE.

Is there any work around for this? ?

@Sunny_GauthorSep 04.2005 — #What I wanted was for the two boxes to be 10px apart. The left div overlapped the right div because the right div wouldn't except float:right or something. Well, I got it to work though. I'll post it soon.... very soon. (next few hours)

@LJKSep 04.2005 — #Hi -

You still haven't put them in a 'container' div and still haven't set a width for each that would allow 10px in between and fit them into the container.

[IE adds padding to it's total width amt., so watch that...]

El

@Sunny_GauthorSep 04.2005 — #OK, I got it posted. Yes, all the visible divs are in a div container.

In IE there is a large space between the menu and main div, but I'm OK

with that. In FF the space is exactly 10px, just as I wanted it.

Thanks for your help guys!

www.team847.com/New

Also in #CSS _↴

Is allowed to add code like 12px/16px?underline images on mouse over IE vs Firefox

Success!

Help @Sunny_G spread the word by sharing this article on Twitter...

Tweet This

Float is driving me insane!!!

18 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Float is driving me insane!!!

18 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #CSS _↴