[56K WARN] CSS Float Question

JavaScript and client side scripting.

Moderator: General Moderators

toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

[56K WARN] CSS Float Question

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Have you tried using "clear"?
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

Thank you, I've never used that before.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

I have another question about floats.

How do I fix this inconsistency between Firefox and Internet Explorer?

Firefox:Image



Internet Explorer:Image
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Umm... Can't tell you without code. Sorry.

Floating is dependent upon the containing object, which is invisible in your picture.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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. :D). http://tools.randomresources.org
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You could always give the divs dimensions.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post by toasty2 »

What do you mean (Everah)? Each div has a specific width (250px).
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
toasty2
Forum Contributor
Posts: 361
Joined: Wed Aug 03, 2005 10:28 am
Location: Arkansas, USA

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Omg, you're bothering me! :lol:

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!
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

What happens if someone is on a smaller resolution than 1024*768? There be scrolling with that solution!
Post Reply