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 Ila Gupta
Ila Gupta
5,147 Points

I just want to ask about the designing part for the website I am building.

I am trying to build my own website as the first project. But I am not able to set the images and text the way I want to. I want to align all the images of wrapper in left and the text beside it so that would be in the right. I have tried some methods but till now just able to manage with 1st and third image in correct position, still other images are not floating or I dont know they are not in the position I want.
I have pasted HTML and CSS code to see, It would be good if somebody can provide me with the solution.

<div id = "wrapper">

    <section >
        <ul id="gallery">
          <li id="crown"><img src="./img/crown.jpg" alt="Picture of Crown Jewel"></li>
          <li><h2>Crown Jewel</h2>
              <p>The St. Wenceslas Crown </p>
              <p><a href="#royale">Next</p>
          </li>



          <li id="royale"><img src="./img/king_queen.jpg" alt="Picture of Crown Jewel"></li>
          <li><h2>Bohemian King And Queen!!</h2>
                <p>!</p>
                <p><a href="#crown">Prev</p>
                <p><a href="#church">Next</p>
          </li>



          <li id="church"><img src="./img/tyn_church.jpg" alt="Picture of Tyn Church"></li>
          <li><h2>Tyn Church</h2>
              <p>The Church of Mother of God before Týn,</p>
              <p><a href="#royale">Prev</p>
              <p><a href="#artist">Next</p>
          </li>



          <li id="artist"><img src="./img/old_town_square.jpg" alt="Picture of Crown Jewel"></li>
          <li> <h2>Artist with its Art!!</h2>
              <p>Many street plays on the street of famous Old Town Square. </p>
              <p><a href="#church">Prev</p>
              <p><a href="#sculpture">View</p>
          </li>




          <li id="sculpture"><img src="./img/creepy.jpg" alt="Creepy Picture"></li>
          <li> <h2>Sculpture</h2>
              <p></p>
              <p><a href="#artist">Prev</p>
          </li>
      </ul>

img {

max-width:100%;

}

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

primary p {

text-align: center;
padding-bottom: 30px;
margin-bottom: 30px;

}

/*********** Body wrapper ************/

gallery {

margin:0;
padding:0;
list-style: none;

}

gallery li {

float:left;
width:45%;
margin:2.5%;

}

gallery li:nth-child(3n){

clear:left;

}

ul li img { background: #888; height:351px; }

/*********** footer ************/

footer{ clear: both;

}

4 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

Since your html always goes image > picture > image > picture, you can use nth-child(even/odd) to float the images (odd) left and the text right (even). By using nth-child(3n) like you have now, you are targeting both images and text (third element, sixth element, ninth, twelfth, etc.)

#gallery li:nth-child(odd) {
    float:left;
    width:47.5%;
    margin-right:2.5%;
    clear:left;
}
#gallery li:nth-child(even) {
    float:right;
    width:47.5%;
    margin-left:2.5%;
}

*There are plenty of other ways to do this same thing.

EDIT: added clear:left to the odd elements to guarantee your images will always be on the left.

Ila Gupta
Ila Gupta
5,147 Points
Ila Gupta
Ila Gupta
5,147 Points

Hi, So I added the same code, now the images are on the left and text on right. But text is not with the corresponding image, its beside the next image. I mean its one level down and its also leaving the first image with no text.

Marcus Garrett
Marcus Garrett
5,083 Points
Marcus Garrett
Marcus Garrett
5,083 Points

In order to make the text correspond with the image, the text should be within the same list item. Currently you have the image and the text as separate list items. The code suggested above separates the odd numbered list items to the left (currently all your images) and every even numbered list items to the right (currently all your image descriptions).

I'm pretty new to CSS myself so I don't claim to be an authority but hopefully that works out!

Ila Gupta
Ila Gupta
5,147 Points
Ila Gupta
Ila Gupta
5,147 Points

I tried the code again and it worked. Earlier I did not add float:left for the images with clear:float. But adding these two solved my issue. I know the concept of clearing float and left float,but still confused how adding float to left then clearing it in the next line made my text correspond with the image as earlier it wasn't that way.

@Marcus I have not tried the way within the same list. But I guess putting it in the same list and giving odd list items to left and right will probably move the whole list item including image and text to left. Even I am not sure just trying the code myself with lots of errors :) Thanks guys for solving the problem.

Jeff Lemay
Jeff Lemay
14,268 Points

Glad everything is working for you.

I just noticed that you had 2.5% margin set to all list items so that would of caused your elements to be bigger than 50% (47.5% wide and 2.5% margin on all sides if all you did was copy my code into your stylesheet). That would make your image be on the left, then your text on the right but below the image instead of next to it. Looks like you got it straightened out though.