...

View Full Version : Trouble with Widthless Floats



MaureenT
05-04-2010, 02:30 AM
I am attempting to place two widthless floats side-by-side, but am having no luck. In IE6 and 7, it works fine, but in IE8, Firefox, and probably every other browser, the right float drops below the left one. The problem appears to lie in the fact that the text in the right float wraps. When the content is short enough not to wrap, then it displays properly. Absolutely positioning the containers is not an option.

Here is the CSS:

.widthlessFloatContainer {
width: 800px;
overflow: hidden;
text-align: left;
}
.widthlessFloat-left {
float: left;
white-space: nowrap;
padding-right: 10px;
}
.widthlessFloat-right {
float: left;
}

Here is the HTML:

<div class="widthlessFloatContainer">
<div class="widthlessFloat-left">Left Float Content</div>
<div class="widthlessFloat-right">Right Float Content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</div>
</div>

Is there a way to fix this problem? If someone can help me with this, it would be greatly appreciated.

Excavator
05-04-2010, 03:18 AM
Hello MaureenT,
There is no such thing as a widthless float. A float needs a width so the remaining space next to it can be known, that's how it works.

Float tutorial (http://css.maxdesign.com.au/floatutorial/).

MaureenT
05-04-2010, 03:51 AM
If you don't want to call it a widthless float, then call it a widthless container that's floated. It amounts to the same thing.

I'd like to direct your attention to the following site.

http://css-lab.com/demos/navbar/cntr-float-drpdwn.html

This site is one of several examples, articles, forum posts, etc. that show how to do floated containers without a set width. By the way, the site above passes both the W3C Markup Validator and the W3C CSS Validator.

Excavator
05-04-2010, 02:20 PM
If you don't want to call it a widthless float, then call it a widthless container that's floated. It amounts to the same thing.

I'd like to direct your attention to the following site.

http://css-lab.com/demos/navbar/cntr-float-drpdwn.html


Yes, that menu is there too :rolleyes: - http://nopeople.com/CSS/menu-h_centered-ul/index.html

Excavator
05-04-2010, 02:55 PM
Widthless floated elements will go as wide as their container if their content requires.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
.left {
float: left;
background: #0f0;
}
.right {
float: right;
background: #f00;
}
</style>
</head>
<body>
<div id="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end .left--></div>
<div class="right">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end .right--></div>
<!--end container--></div>
</body>
</html>

Give their content a width and your widthless float takes it's width from it's content (which is why that widthless li menu works).
Add this to the above to see - p {width: 400px;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum