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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

Unable to apply "float" to my images

<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/css/main.css"> <head> <title>My Photos</title> </head> <header> <h1>Photo Gallery</h1> </header> <body> <div id="gallery"> <section> <nav> <ul> <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" style="float:right;width:42px;height:42px;">In Forum Mall</a> <li><img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" alt=""></li> <p><a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img3.jpg">A Stylish Look</p></a> <li><img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img3.jpg" alt=""></li> <p><a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img4.jpg">In Pondicherry</p></a> <li><img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img4.jpg" alt=""></li> </ul>

    </nav>
</section>

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

css :

selected {

text-align: center;
text-indent: 0.75 px;
background-color: #ccc;
border: ridge;

}

a {

text-decoration: none;
text-align: left;
text-indent: 1.5 em;

}

nav a.selected , nav a:hover{ color: #888888; text-align: center; }

h1 {

font-family: cursive;
font-weight: strong;
font-style: pacifico;
text-align: center;
background-color: #ccc;
border: ridge;

}

body{

background-color: #CBBB9B;

}

gallery {

   float: left;
   width:42px;
   height: 42px;
   margin: 0;
   list-style: none;
   padding: 0;

}

Marko Nestorovic
Marko Nestorovic
12,441 Points
Marko Nestorovic
Marko Nestorovic
12,441 Points

You should make class for images and do float:left for that class. in this case you did float left for div with id "images".

Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

Could you tell me how to create class for images. Will this work <ul id="gallery" class="selected">

            <ul id="gallery" class="selected">
                <li>
                <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" alt="">In Forum Mall</a>
                <img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" alt="">
                <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img3.jpg">A Stylish Look</a>
                <img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img3.jpg" alt="">
                <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img4.jpg">In Pondicherry</a>
                <img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img4.jpg" alt=""></a>
            </ul>
          </li>
        </nav>
    </section>
</body>
</html>```

and how to apply CSS for this class

4 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Your current CSS selector ("#gallery") applies the styles (including float) directly to the gallery div element.

To apply the styles to images inside the gallery, your selector should be :point_right: "#gallery img"

Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

thanks Steven. this works but the text is not aligned with the images. Any suggestions ?

Arun Baskaran
PLUS
Arun Baskaran
Courses Plus Student 863 Points
Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

thanks Steven. this works but the text is not aligned with the images. Any suggestions ?

Marko Nestorovic
Marko Nestorovic
12,441 Points
Marko Nestorovic
Marko Nestorovic
12,441 Points

Try the same way like images. #images a {float:left}

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Arun,

I guess you haven't been around here for some while, but still hopefully you'll read this and hopefully (too) it will be helpful for you :)

Either way, I did all the attempts and everything but not just for you, also for my own learning.

According to what I've been learning so far, it is recommended that you use an independent CSS file for styling the page(s). And that's exactly what you did, which is perfect.

Still, I noticed that, in certain moment of your project, you used some 'style' tag within your html file, but used it as an attribute nested within the 'a' element, like this:

<a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" style="float:right;width:42px;height:42px;">In Forum Mall</a>

Apparently, I researched a little and found that some people use it that way, but the point here is that as you see, there you declared 'float' as 'right', so that's probably messing up at least your first image in the gallery (well, I tried the code and it did to me, at least).

The solution? I'd suggest you get fully rid of the style attribute there, and leave all the styling to the CSS.

Let me know if it worked to you (or if I am wrong and still needed to learn something about it!).