Home/ Questions/Q 8237761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T19:34:37+00:00

i was wondering what is wrong with this code? <style type=text/css> .recipe h2{ float:left;

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0