Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Posted by Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

Floats problem

I'm I doing something wrong? The divs are not coming side by side in one line. I am trying to make three column layout. Please help.

#midcontent {
    float: left;
    width: 50%;
    margin-left: 15.62em;
    background-color: yellow;
}

 #leftnav {
    margin: 0;
    width: 25%; 
    float: right;
    margin-right: 46.87em;
    background-color: red;
}

 #rightnav {
    width: 25%;
    float: right;
    margin-left: 0em;
    background-color: blue;
}

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's not how floats work, you don't use margin like that.

I made you a quick demo to show you

To understand how the floats in the demo work check out learnlayout.com

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

Thanks a lot James, your feedback taken me one step ahead. CHEERS.

austenpayan
austenpayan
10,218 Points
austenpayan
austenpayan
10,218 Points

Im pretty sure you shouldnt be using margins in this scenario. Also, you should float all three elements left, so that they will fall inline with eachother.

Try removing the margins. And try floating #leftnav and #rightnav both to the left instead of the right.

Be sure to properly clear the parent container as well, so that the container doesnt collapse.

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

What is the difference in right and left float. wouldn't that be a same thing is all the floats are right. Thanks

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

This seems to work but, my middle content is coming on left. This is when I try to fix this these three dives don't stay in the same line.

austenpayan
austenpayan
10,218 Points

Make sure your #leftnav comes BEFORE the the middle div in the DOM. It should be in order: Left, Center, then Right.

Also, in your markup above, "midcontent" does not have a selector specified. Is it a class? use a . before midcontent. Is it an id? use a # before midcontent. This may also be a reason why the code is failing, because the styles you are trying to apply to "midcontent" are not connecting.

austenpayan
austenpayan
10,218 Points
austenpayan
austenpayan
10,218 Points

Make sure your #leftnav comes BEFORE the the middle div in the DOM. It should be in order: Left, Center, then Right.

Also, in your markup above, "midcontent" does not have a selector specified. Is it a class? use a . before midcontent. Is it an id? use a # before midcontent. This may also be a reason why the code is failing, because the styles you are trying to apply to "midcontent" are not connecting.

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

its an id, That isn't the problem. They float but not in sequence as I want them. I give every dive its own width and left or right margin and then they just stack up never in line against each other. they are only in line by doing all the three elements float left but are not is the desired sequence.

austenpayan
austenpayan
10,218 Points

Can you post your HTML?

Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

Figured this out Austen, the sequence has be to right side first then middle and then the third in Html not CSS. Thanks a lot mate.

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points 
<!DOCTYPE html>
<html>
<head>
    <title>Project X</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen"><link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,700' rel='stylesheet' type='text/css'>

</head>
<body>
<div id="container" class="cf"><!--ContainerStart-->
        <div id="header" class="cf"><!--HeaderStarts-->
            <!--First Menu Starts Here-->
            <div id="topMenu">
                <nav>
                    <ul>
                    <li><a href="#">Cars</a></li>
                    <li><a href="#">Jeeps</a></li>
                    <li><a href="#">Bikes</a></li>
                    <li><a href="#">ATV's</a></li>
                    </ul>
                </nav>
            </div>
            <!--First Menu Starts Here-->
            <div id="tagline">The best sports vehciles in the town....</div>
            <div id="logo"><img src="images/Cars_logo.png" alt="My Company Logo" title="Logo"></div>
            <div id="socialIcons">
                <ul>
                    <li>
                        <a href="http://www.twitter.com"><img src="images/twitter.png" alt="Twitter" title="Twitter"></a>
                    </li>
                    <li>
                        <a href="http://www.facebook.com"><img src="images/facebook.png" alt="Facbook" title="Facebook"></a>
                    </li>
                    <li>
                        <a href="http://www.linkedin.com"><img src="images/linkedin.png" alt="Linkedin" title="Linkedin"></a>
                    </li>
                </ul>
            </div>
        </div><!--HeadersEnds-->
        <div id="secondMenu"><!--2ndHeadersStarts-->
            <nav>
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Locations</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div id="cw">
        <div id="content"><!--ContentStarts-->
                <h1>The Best Cars in London</h1>
                <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at consectetur orci. Mauris accumsan fermentum turpis, eget tincidunt ligula lacinia quis. Duis vitae metus nec eros congue laoreet. Pellentesque nulla magna, consequat sit amet ligula et, rutrum sagittis lorem. Ut ut ipsum a orci semper porta. Pellentesque nec tellus laoreet, tristique felis non, rutrum magna. Phasellus mollis pretium massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc mollis facilisis odio. Vestibulum elementum elit magna, eget cursus tellus congue sed. Duis convallis elementum velit, in sodales libero vehicula sit amet.<img src="./images/light.jpg" alt="light"></p>

                <p>2 Sed ipsum dui, pretium a arcu ut, ultrices iaculis neque. Aliquam dictum ut tellus non iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum libero et purus scelerisque ornare. Nullam a ante tellus. Mauris accumsan egestas eros, ut placerat ligula auctor nec. In nec arcu eros.</p>

                <p>3 Ut dapibus nibh et laoreet sodales. Nullam et felis sed lectus accumsan volutpat. Nullam commodo tincidunt nisl, id posuere velit dapibus vel. Morbi non imperdiet nunc. Vivamus diam eros, semper mattis cursus ut, commodo id mauris. Nullam blandit pulvinar leo id fermentum. Proin ornare diam et erat rutrum, eget egestas nisi aliquet. Etiam urna massa, dapibus quis fermentum vitae, viverra vitae mi.</p>

                <p><strong>Eed ipsum dui, pretium a arcu ut, ultrices iaculis neque.</strong></p>
                <div id="Box"><p>Ut dapibus nibh et laoreet sodales. Nullam et felis sed lectus accumsan volutpat. Nullam commodo tincidunt nisl, id posuere velit dapibus vel. Morbi non imperdiet nunc.</p></div>

                <h2>This second Section of about our company</h2>

                <p>2.1 Sed ipsum dui, pretium a arcu ut, ultrices iaculis neque. Aliquam dictum ut tellus non iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum libero et purus scelerisque ornare. Nullam a ante tellus. Mauris accumsan egestas eros, ut placerat ligula auctor nec. In nec arcu eros.</p>

                <p>2.3 Sed ipsum dui, pretium a arcu ut, ultrices iaculis neque. Aliquam dictum ut tellus non iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum libero et purus scelerisque ornare. Nullam a ante tellus. Mauris accumsan egestas eros, ut placerat ligula auctor nec. In nec arcu eros.</p>
            </div><!--ContentEnds-->
        <div id="leftnav">
            <div id="fblike"><img src="images/fblike.jpg" alt="Facebook Like"></div>
            <p>Title 1</p>
            <nav>
                    <ul>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>  
                    </ul>
            </nav>
            <p>Title 1</p>
            <nav>
                    <ul>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>
                    </ul>
            </nav>
            <p>Title 1</p>
            <nav>
                    <ul>
                    <li><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>
                    </ul>
            </nav>
            <p>This the<a href="#">Link</a></p>
        </div>
        <div id="rightnav">
            <div>
                <form>
                    Search<input type="text" name="search"><br>
                    <button>Submit</button>
                </form>
            </div>
            <div><p>Advertise with us.</p></div>
        </div>
        </div>
        <div id="footer" class="cf">
            <p><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a></p>
            <p>&copy;2013 YourSite.com - All Rights Reserved</p>
            <p>Site powered by <a href="#">www.webspawn.co.uk</a></p>
            <p><a href="#">Privacy Policy </a> | <a href="#">Disclaimer / Disclosure</a></p>
        </div>
</div><!--ContainerEnd-->
</body>
</html>