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

Posted by mryoung
mryoung
4,156 Points

Floating Images and Text - images/text aren't lining up side by side

I'm trying to float some text with images above them side-by-side, while following along with the CSS basics. I assume the images may be too big, but I'm unsure how to fix this.

Here's my html:

<div class="Tech"> <img src="images/tech.jpg" alt="An image of social media tech" id="tech"> <h2> Are you a Techy? </h2> <p> blah blah blah </p>

                <ul>
                    <li>blah blah</li>
                    <li>blah blah </li>
                    <li>blah blah</li>
                    <li>blah blah </li>
            </ul>
        </div>

....and

<div class="people"> <img src="images/dude.jpg" alt="An image of a stamp with a dude on it"

            <h2>Interesting People</h2>
            <p>Here are some links </p>
            <ul><li>link 1 </li><li>link 2 /li><li>link 3</li></ul>

        </div>

CSS:

.tech, .people {

width: 46.5%;

}

.tech {

float: left;

}

.people {

float: right;

}

/* Float Clearfix */

.group:after {

content: "";
display: table;
clear: both;

}

1 Answer

nickyp
nickyp
2,140 Points

Ok, you have a couple of errors in your CSS and HTML.

When you select the div "Tech", you use:

.tech {
 float: left;    
}

But you have to type the name of the class exactly as it was written in your HTML (whether the class is lowercase or uppercase matters!)

Here's the correct CSS:

.Tech, .People {
 width: 46.5%;
}

.Tech {
 float: left;    
}

.People {
 float: right;
}

/* Float Clearfix */

.group:after {
 content: "";
 display: table;
 clear: both;
}

Here's the correct HTML (be sure to close all tags and don't forget to correctly space out everything, it makes the code more readable):

<div class="Tech"> 
    <img src="images/tech.jpg" alt="An image of social media tech" id="tech">
    <h2> Are you a Techy?</h2>
    <p> blah blah blah </p>
    <ul>
        <li>blah blah</li>
        <li>blah blah </li>
        <li>blah blah</li>
        <li>blah blah </li>
    </ul>
</div>

<div class="People">
    <img src="images/dude.jpg" alt="An image of a stamp with a dude on it">
    <h2>Interesting People</h2>
    <p>Here are some links </p>
    <ul>
        <li>link 1 </li>
        <li>link 2 </li>
        <li>link 3</li>
    </ul>
</div>

Hope this helps!

mryoung
mryoung
4,156 Points

Thank you, that worked!