Problems with Floats and Clears

Question

Hey, everyone. Generally my CSS work is going pretty well (much of which was learned right here at Treehouse) but I have this ongoing problem with floats and clears. They still confound me. Specifically, I have this list of pics and texts running down the left hand side of this page I'm setting up. As it is now, I have one pic, then directly below it a short paragraph of text describing the pic, then the next pic and below it its text, and so on down the length of the page. I want each paragraph of text to float left so that it comes up right beside its respective picture, so that I have a nice line of pics with their corresponding text to the immediate right, all running down the page. I seem to do just fine floating and clearing that first line of text so that it's beside its picture, but after that I invariably get jumbles. I think I'm clearing the floats properly but am not sure. Should I maybe set each pic and paragraph as its own div? Should I maybe use an inline style and clear the float in a break between pics and paragraphs? Also why do pictures come out all in a row in the browser just as you you've written them in the mark up, but not text? Any insight would be much appreciated. Thanks, Demian

Answer 1 · 2014-02-20T02:55:38Z

February 20, 2014 2:55am

Would you be able to post some code so we could review what you have done. Then we may be able to give some insight into the problems you are having. I have learned when I am able to see the code in front of me it makes it easier to see what I would do.

Answer 2 · 2014-02-21T07:10:26Z

February 21, 2014 7:10am

Well, here it is. It seems I've tried everything. Baffling. Nothing in all of CSS has stumped me like this. I tried putting each paragraph and picture into a div. No effect. I still get a jumble when I float and clear. Might it have something to do with improper nesting?

Anyway, here's the code for the whole page. I'd love any further insight. Once I'm done with this page the site is more or less finished! :)

<!DOCTYPE html> <html lang="en">

<title>Dishes</title>

<style type="text/css">

body {
background-color: rgba(65, 105, 240, .7);
background-image: url('Seamless-P.jpg'); 
background-repeat: no-repeat;
background-position: 50% 20%; 
background-size: 90%;
background-attachment: fixed;
}

h1 {
font-family: verdana, arial, sans-serif; 
font-size: 3em;
color: pink;
text-shadow: 3px 3px 4px purple;    
text-align: center;
}

.nav {
font-family: courier, courier new, monospace;
font-size: 1.1em;
color: pink;
text-shadow: 1px 1px 2px black;
width: 200px;
/*border: 3px solid pink;*/
background: rgba(65, 105, 240, .6);
background-position: 100px 50%;
background-repeat: no-repeat;
}


.firstpic {
border: 5px solid pink;
background-color: blue;
margin: 10px;
/*float: left;*/

}


.p1 {
font-size: 1.7em; 
margin-left: 20px;
}


.secondpic {
border: 5px solid pink;
background-color: blue;
margin: 10px;
clear: left;
}

.p2 {
font-size: 1.7em; 
margin-left: 20px;
}

.thirdpic {
border: 5px solid pink;
background-color: blue;
margin: 10px;
}

.p3 {
font-size: 1.7em; 
margin-left: 20px;
}

.fourthpic {
border: 5px solid pink;
background-color: blue;
margin: 10px;
}

.p4 {
font-size: 1.7em; 
margin-left: 20px;
}

.fifthpic {
border: 5px solid pink;
background-color: blue;
margin: 10px;
}

.p5 {
font-size: 1.7em; 
margin-left: 20px;
}

.sixthpic {
border: 5px solid pink;
background-color: blue;
margin: 10px;
}

.p6 {
font-size: 1.7em; 
margin-left: 20px;
}

.footer {
margin-left: 100px;
margin-right: 100px;
background: rgba(65, 105, 240, .6);
text-align: center;
font-family: courier, courier new, monospace;
font-size: 1.1em;
color: pink;
text-shadow: 1px 1px 2px black;
}

a:link {
color: pink;
}

a:hover {
color: white;
}

a:visited {
color: red;
}

a {
text-decoration: none;
}

</style>

</head>

<body>

<h1>Dishes</h1>

<ul class="nav">
<a href="index.html"><li>Home</li></a>
<a href="About Me and My Service.html"><li>About Me and My Service</li></a>
<a href="A Description of Korean Cuisine.html"><li>A Description of Korean Cuisine</li></a>
<a href="A Couple Recipes.html"><li>A Couple Recipes</li></a>
<a href="Photos of Korea.html"><li>Photos of Korea</li></a>
<a href="Contact.html"><li>Contact</li></a>
</ul>

<img class="firstpic" src="Bibimbap_2175.png" alt="Bibimbap" height="275" width="200"><p class="p1">
<p class="p1">This is Homemade Bibimbap.  It is a mix of rice, egg, gochujung (a spicy, red, bean paste) seaweed, bean sprouts and other vegetables mixed together.  It is one of the healthiest of all Korean foods.</p>

<img class="secondpic" src="Kimchi (Radish and Cabbage)_2176.png" alt="Kimchi" height="275" width="200">
<p class="p2">This is Kimchi.  It is, perhaps, Korea's most famous dish.  It is a spicy side dish served with virtually everything.  There are two main types: one made from cabbage and another made from radishes.  The Kimchi you see her is a combination of both types.</p>

<img class="thirdpic" src="Bulgogi.png" alt="Bulgogi (Korean Beef)" height="200" width="275">
<p class="p3">This is Bulgogi.  It is another Korean standard.  It is a beef marinated in soy sauce, garlic, and a little bit of sugar and cooked on a stove with a little water in the bottom of the pan.  It is served with a sprinkling of sesame seeds and is delicious!</p>

<img class="fourthpic" src="Den Jang Jiggae_2167.png" alt="Korean Soup" height="275" width="200">
<p class="p4">This is Korea's most popular soup, Den Jang Jiggae.  It is a bit similar to Japan's famous miso soup, but it is surely not the same.  Den Jang, a soy bean paste, is the basic ingredient along with Korean celery, seaweed, scallion, and a lot of tofu.  It is very healthy!</p>

<img class="fifthpic" src="Dak Jim.png" alt="Dak Jim (Korean Chicken Stew)" height="200" width="275">
<p class="p5">This is Dak Jim: a Korean chicken stew.  It consists of chicken, potato, onion, carrot, scallion, some soy sauce, spicy red bean paste (gochujung), and some noodles.  It's boiled and it's fantastic, a favorite of many Korean cuisine lovers!</p>

<img class="sixthpic" src="Dah Guk.png" alt="Dak Jim (Korean Chicken Stew)" height="200" width="275"> This is Dah Guk. It is made with egg, seeweed, and dah. Dah is a chewy, slightly sweet rice dough, a Korean specialty. The broth is a mix of these flavors.

<a href="index.html">Home</a> | <a href="About Me and My Service.html">About Me and My Service</a> | <a href="A Description of Korean Cuisine.html">A Description of Korean Cuisine</a> | <a href="Dishes.html">Dishes</a> | <a href="A Couple Recipes.html">A Couple Recipes</a> | <a href="Contact.html">Contact</a>
<br>
<p>©Seongwon's Korean Cooking</p>

</div>

</body>

</html>

Answer 3 · 2014-02-22T07:08:50Z

February 22, 2014 7:08am

What if you broke the web page up into grids? Using a grid.css I know it is a little more coding but it may just do the trick so that everything lines up properly.

Here is the video that shows them breaking up there site into grids. If you adapt it over to your site it might work.

TeamTreeHouse Grid video

<head>

<link ref="stylesheet" href="css/normalize.css" type ="text/css" media="screen">
<link ref="stylesheet" href="css/grid.css" type ="text/css" media="screen">
<link ref="stylesheet" href="css/YOURFILE.css" type ="text/css" media="screen"> 

</head>

<body>



<h1>Dishes</h1>

<div class="container clearfix" >

    <ul class="nav">
    <a href="index.html"><li>Home</li></a>
    <a href="About Me and My Service.html"><li>About Me and My Service</li></a>
    <a href="A Description of Korean Cuisine.html"><li>A Description of Korean Cuisine</li></a>
    <a href="A Couple Recipes.html"><li>A Couple Recipes</li></a>
    <a href="Photos of Korea.html"><li>Photos of Korea</li></a>
    <a href="Contact.html"><li>Contact</li></a>
    </ul>


    <div class="grid 4 alpha" ><!--This is where I started .grid4 class and then set the margin to left 0px with the .alpha class -->

        <img class="firstpic" src="Bibimbap_2175.png" alt="Bibimbap" height="275" width="200">

    </div>

    <div class="grid 8 omega"> <!--This is where i finished the .grid8 class and then set the margin to right 0px .omega class-->


                 <!-- when you add up the grid4 and grid8 they equal the 1000px so the next object drops down to the next line. using the alpha and                 
                        omega classes helps position them.  -->   

        <p class="p1">This is Homemade Bibimbap.  It is a mix of rice, egg, gochujung (a spicy, red, bean paste) seaweed, bean sprouts and other vegetables mixed together.  It is one of the healthiest of all Korean foods.</p>

    </div>

    <div class="grid4 alpha">

        <img class="secondpic" src="Kimchi (Radish and Cabbage)_2176.png" alt="Kimchi" height="275" width="200">

    </div>

    <div class="grid8 omega">

        <p class="p2">This is Kimchi.  It is, perhaps, Korea's most famous dish.  It is a spicy side dish served with virtually everything.  There are two main types: one made from cabbage and another made from radishes.  The Kimchi you see her is a combination of both types.</p>

    </div>






</div>

</body>

The grid.css is in the Team Tree house project files from the link I provided above. I am not sure if this is what you where looking for. Hope it helps.

Answer 4 · 2014-03-06T02:20:20Z

March 6, 2014 2:20am

Hey, guys, sorry for this delayed reply. What I finally did to clear up the problem was place empty divs between each picture and paragraph of text. I then used a an inline style within the empty divs, which I cleared (clear: both). It worked beautifully. But thanks for your answers. I am still going to look into using grids more in the future. -Demian

Welcome to the Treehouse Community

Looking to learn something new?

Demian Arend

Demian Arend

Problems with Floats and Clears

Darren Walker

Darren Walker

4 Answers

Terrell Stagner

Terrell Stagner

Demian Arend

Demian Arend

Terrell Stagner

Terrell Stagner

Demian Arend

Demian Arend