Page 1 of 2
[56K WARN] CSS Float Question
Posted: Mon Jun 04, 2007 2:36 pm
by toasty2
I decided to use float:left on the colored div's
here. I am having a problem where I need to display stuff after the floats on the next line, but stuff is displayed as if I used float:left on it, I need the stuff after the floated divs on a new line. Is there a better way to do what I'm trying to do?
Posted: Mon Jun 04, 2007 3:07 pm
by feyd
Have you tried using "clear"?
Posted: Mon Jun 04, 2007 5:52 pm
by toasty2
Thank you, I've never used that before.
Posted: Tue Jun 05, 2007 1:25 pm
by toasty2
I have another question about floats.
How do I fix this inconsistency between Firefox and Internet Explorer?
Firefox:
Internet Explorer:
Posted: Tue Jun 05, 2007 1:31 pm
by superdezign
Umm... Can't tell you without code. Sorry.
Floating is dependent upon the containing object, which is invisible in your picture.
Posted: Tue Jun 05, 2007 3:11 pm
by matthijs
With floats and IE, watch out for the double-margin bug.
Code: Select all
#div { float:left;margin-left:100px;}
IE will double that margin. Of course, also take care of the box-model differences.
Posted: Tue Jun 05, 2007 3:37 pm
by toasty2
superdezign wrote:Umm... Can't tell you without code. Sorry.
Floating is dependent upon the containing object, which is invisible in your picture.
The issue is on the same page I asked about in my first post (it's also in the picture.

).
http://tools.randomresources.org
Posted: Tue Jun 05, 2007 3:44 pm
by superdezign
Ew ew ew ew ew.
Eww.
You know, CSS was kind of a way to separate style from content... Not throw style tags into the elements themselves. Doesn't make the debugging any easier either.
Anyway, it seems like the 4th div is floating against the first, causing it to be moved over in FF. Maybe you should try creating div "rows", a top and a bottom. Not the most efficient way, but it'll work.
Posted: Tue Jun 05, 2007 4:01 pm
by RobertGonzalez
You could always give the divs dimensions.
Posted: Tue Jun 05, 2007 5:15 pm
by toasty2
What do you mean (Everah)? Each div has a specific width (250px).
Posted: Tue Jun 05, 2007 5:29 pm
by RobertGonzalez
This is not semantically correct, but might help diffuse some issues... try adding a to the box that is being crunched in IE.
Posted: Tue Jun 05, 2007 5:37 pm
by toasty2
The Ping box?
Here's the latest:
http://tools.randomresources.org
Style Sheet:
http://tools.randomresources.org/style.css
The issue is in Firefox, just to make sure you know what exactly the issue is, it pushes the Ping box (div id "block4" over instead of starting it at the left side of the page.
Posted: Tue Jun 05, 2007 6:01 pm
by superdezign
Omg, you're bothering me!
Code: Select all
.block {
float: left;
width: 250px;
padding: 5px;
margin: 15px;
}
.nextrow {
clear: left;
}
#google {
background-color: #CAFF70;
}
#portscan {
background-color: #FF6347;
}
#whois {
background-color: #7093DB;
}
#ping {
background-color: #FF7F24;
}
#revdns {
background-color: #32CD32;
}
#something {
background-color: #8968CD;
}
Code: Select all
<div id="blocks">
<div id="google" class="block"></div>
<div id="portscan" class="block"></div>
<div id="whois" class="block"></div>
<div id="ping" class="nextrow block"></div>
<div id="revdns" class="block"></div>
<div id="something" class="block"></div>
</div>
Use it! For the love of CSS, use it!
Posted: Tue Jun 05, 2007 6:06 pm
by RobertGonzalez
Sorry, I was misunderstanding you. I can't really see that much. The markup is really hard to read when it is all up against the left edge of the screen like that.
Posted: Tue Jun 05, 2007 6:07 pm
by jayshields
What happens if someone is on a smaller resolution than 1024*768? There be scrolling with that solution!