CODEWITHSUNDEEP
csscss-float
James1
James1

Reputation: 283

Floating in CSS

i was wondering what is wrong with this code? 

<style type="text/css">

.recipe h2{
float:left;
}

.recipe .intro,
.recipe ol{
float:right;
width:500px;
}

</style>
</head>

<body>
<h1>Recipes for Cheese</h1>

<p class="intro">Cheese is a remarkably versatile food, available in literally hundreds of          varieties with different flavores and textures.</p>

<div class="recipe">

    <h2>Welsh Rarebit</h2>

    <p class="intro">Welsh Rarebit is a savory dish made from melted cheese, often Cheddar, on toasted bread, and a variety of other ingredients such as mustard, egg or bacon. Here is one take on this classic.</p>

    <ol>
    <li>Lightly toast the bread</li>
    <li>Place a baking tray, and spread with butter.</li>
    <li>Add the grated Cheddar cheese and 2 tablespoons of beer to a saucepan. Place the saucepan over a medium heat, and stir the cheese continuously until it has melted. Add a teaspoon of wholegrain mustard and grind in a little pepper. Keep stirring.</li>
    <li>When thick and smooth, pour over each piece of toast spreading it to the edges to stop the toast from burning.</li>
    <li>Place undre the grill for a couple of minutes or until golden brown.</li>
</ol>
</div>

</body>
</html>

Originally, the solution of this code should be just like the picture in the book here: https://picasaweb.google.com/lh/photo/fDg4GiRbz3mCZvh2krcsqdMTjNZETYmyPJy0liipFm0?feat=directlink

This code above give me this: https://picasaweb.google.com/lh/photo/kaH-7AE5K-UKMcxxlJdkrtMTjNZETYmyPJy0liipFm0?feat=directlink

I have read over and over afew times now and could not find anything wrong with this but have no idea why it does this.

Could anyone explain why it does this and how to correct it please?

Thanks so much in advance!

Upvotes: 0

Views: 157

Answers (2)

Ana
Ana

Reputation: 37178

Add a clear: right; after float:right;

Live demo here http://dabblet.com/gist/3135429

Both your .recipe .intro and your .recipe ol are floated to the right.

.recipe .intro is the first one in the HTML, so it is the first one to the right. Unless you clear floats, .recipe ol won't come under .recipe .intro, but to its left (as that is as far right as it can go).

If you want the whole thing to come close to the h2, you might consider making a few more changes to the CSS:

  • first, give a fixed width to the h2, let's say 400px; you could also set a text-align to it;
  • don't float or give a fixed width to any of .recipe .intro or .recipe ol; instead, just give them a margin-left, that is equal to the width of the h2 (400px in this case);

CSS:

.recipe h2 {
    float: left;
    width: 400px;
    text-align: center;
}
.recipe .intro, 
.recipe ol {
    margin-left: 400px;
}

Demo http://dabblet.com/gist/3135529

Upvotes: 1

Anita Sharma
Anita Sharma

Reputation: 175

Try this:

Add

<div style="clear:right"></div>

after

<p class="intro">Welsh Rarebit is a savory dish made from melted cheese, often Cheddar, on toasted bread, and a variety of other ingredients such as mustard, egg or bacon. Here is one take on this classic.</p>

Upvotes: 0

Related Questions