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

HTML Accessibility Websites CSS: Part 3

Qasim Hafeez
Qasim Hafeez
12,731 Points
Posted by Qasim Hafeez
Qasim Hafeez
12,731 Points

[SOLVED] img won't line up correctly

Here is my code. The image of the gear won't stay in the #widget_pic div. I've been trying to figure it out for over half and hour now. The CSS that pertains to the img doesn't show up in the dev tools when I inspect the img element. Any ideas?

<!DOCTYPE html>
<html>
    <head>
        <title>Widget, Inc.</title>
        <link rel="stylesheet" type='text/css' href="style.css"></link>
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>Widget</h1>
                <ul id="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">Product</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Blog</a></li>

                </ul>
            </div>


            <div id="content">
                <div id="about">
                    <p>Widget had always offered the best quality and best price in the industry.</p>
                    <div id="cta">
                        <h3 id="just_10">The new widget is just $10</h3>
                        <a href="#" id="buy_now">Buy Now</a>

                    </div>
                </div>
            </div>

            <div id="widget_pic">
                <img src="images/gear.png" alt="A drawing of a widget, which looks similar to a gear or a cog."/>

            </div>

            <p id="compare"></p>
            <table id="product_table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Quality</th>
                        <th>Speed</th>
                        <th>Strength</th>
                        <th>Price</th>

                    </tr>
                    </thead>
                      <tr>
                      <td>
                        <strong>Widget</strong>
                      </td>
                      <td>
                        High Quality
                      </td>
                      <td>
                        Fast
                      </td>
                      <td>
                        Strong
                      </td>
                      <td>
                        $10
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <strong>Gadget</strong>
                      </td>
                      <td>
                        Good Quality
                      </td>
                      <td>
                        Slow
                      </td>
                      <td>
                        Weak
                      </td>
                      <td>
                        $15
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <strong>Gizmo</strong>
                      </td>
                      <td>
                        Poor Quality
                      </td>
                      <td>
                        Slowest
                      </td>
                      <td>
                        Weakest
                      </td>
                      <td>
                        $25
                      </td>
                    </tr>

            </table>



        </div>
    </body>
</html>

/**************************
Basic Page Styles
**************************/

body {
    margin:0;
    font-family: verdana, sans-serif;
    font-size: 0.85em;
    background: #eac657;
}

#wrapper {
    width: 920px;
    margin: 0 auto;
}

/**************************
Header
**************************/

#header {
    float: left;
    margin: 20px 0;
    width: 100%;

}

h1 {
    float: left;
    margin: 0;
    text-indent: -20000px;
    width: 300px;
    height:66px;
    background: url('images/widget.png') top left no-repeat;
}

/**************************
Navigation
**************************/

#nav {
    margin-top:20px;
    list-style: none;
    float: right;
}

#nav li {
    float: left;
    margin-left:20px;

}

a {
    font-size: 1.4em;
    font-weight: bold;
    padding:10px;
    background: url('images/texture.png') top center;
    color: #eac657;
    text-decoration: none;
    border-radius:10px;

}

a:hover, a:focus {
    color: #d2b14e;
    background: #000;
};

/**************************
Content
**************************/

img {
    max-width: 100%;
}

#widget_pic{
    float:left;
    width:30%;
    margin-left: 5%;
    height: 300px;
}

#content {
    width: 65%;
    float: left;
}
Qasim Hafeez
Qasim Hafeez
12,731 Points
Qasim Hafeez
Qasim Hafeez
12,731 Points

It was a semi-colon after a curly brace in the css that was messing everything up.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Qasim Hafeez, glad you found the error. I've marked your question as solved.