How to use FLOAT correctly [Archive]

Click to See Complete Forum and Search --> : How to use FLOAT correctly

RoxyBoo

01-13-2009, 03:02 AM

Ok, so using float is better than tables.
But how do you use them?
I define each big div width as a percentage so it will fit the same in all resolutions.
All divs contained in the big div have a given pixel width. I could probably define them as percentages too but then what would be the merit of float?
So, when the resolution changes more small divs fit on one line of the big div.
That's fine, but the space left on the right (if I float left) looks terrible.
I'm thinking now that maybe the big div should have width:auto? But then when would it know where to stop?
I think I am missing something here, could somebody please tell me what it is?

I have had this problem for a long time in css, I am sure anybody with a good knowledge of css knows what I am talking about, I don't think my question needs a script.
I am talking about the case when there is too little space left on the right to fit a new div with float but everything now looks off center.

When either the big div should be able to be a little flexible and let a new div in by itself or
or all the existing small divs should get centered. It is analogous to using justified text vs unjustified text. Except my small divs are all equal (while the words in texts are not)

TheTeenScripter

01-13-2009, 03:20 AM

I think i've got it.. You're missing your code. Yes that's it, your code. What do I win? lmao actually I don't even completely understand your goal here... Could you post your code along with an explanation of what you would like the end result to look like?

Charles

01-13-2009, 04:22 AM

I know what you mean, that's why I don't use floats. Instead I use just as much absolute positioning as I need. For your typical two col layout, menu on the left:<!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">
<title>Giant Says</title>
<style type="text/css">
#skip {display:none}
#navigation {
width:5em;
position:absolute;
top:1px;
left:1px;
}
#content {
margin-left:5em;
}
</style>
</head>
<body>
<p id="skip"><a href="#content">Skip to content</a></p>
<ul id="navigation">
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ul>
<div id="content">
<h1>Giant Says</h1>
<p>Lorem ipsum dolor sit amet consectetuer hendrerit et eros Vivamus non. Eu dolor accumsan ut Ut Curabitur Vivamus In porttitor iaculis orci. Aenean feugiat in nibh elit amet magna dictumst sollicitudin ac orci. Ante Ut ut lacinia at scelerisque quis sit leo neque tempus. Id venenatis Curabitur ipsum elit scelerisque Nulla orci ligula Vivamus condimentum. In et amet vel arcu orci id rhoncus.</p>
</div>
</body>
</html>

web wheeler

01-13-2009, 12:55 PM

I switched from using tables to divs for page layout several years ago, and the issues the OP raised frustrated me too. It's still a struggle to get everything to work as expected in all major browsers.

Here is a link that might be useful:

http://css-discuss.incutio.com/?page=CenteringBlockElement

felgall

01-13-2009, 07:40 PM

The space around your elements is controlled by the padding and margins that you give them.

Floats are easier to get the page looking right than absolute positioning. The way most people do absolute positioning messes up as soon as the browser is resized.

The simplest way to do positioning in CSS is using display:table, display:table-row, and display:table-cell except for the fact that IE7 and earlier versions of IE don't support it (IE8 and all other browsers do support it).