[56K WARN] CSS Float Question
Moderator: General Moderators
[56K WARN] CSS Float Question
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?
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
With floats and IE, watch out for the double-margin bug.
IE will double that margin. Of course, also take care of the box-model differences.
Code: Select all
#div { float:left;margin-left:100px;}The issue is on the same page I asked about in my first post (it's also in the picture.superdezign wrote:Umm... Can't tell you without code. Sorry.
Floating is dependent upon the containing object, which is invisible in your picture.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
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.
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
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.
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Omg, you're bothering me! 
Use it! For the love of CSS, use it!
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>- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England

