Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble with Widthless Floats

    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:
    Code:
    .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:
    Code:
    <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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    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 - http://nopeople.com/CSS/menu-h_centered-ul/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,741
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Widthless floated elements will go as wide as their container if their content requires.
    Code:
    <!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;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •