Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Sarut Jarumaneeroj
Sarut Jarumaneeroj
14,656 Points

i have problem with my description sidebar code when resize window it's drop down

the content in the class description have move when i resize the window

this is my html code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="photoviewer.css">
</head>
<body>


<div class="wraper">
<div class="gallery " >
        <div id="photo-viewer" class=""><img src="img/IMG_0015.jpg" alt="image" >
        </div>

        <div id="thumbnails">
          <a href="img/IMG_0015.jpg" class="thumb active" title="polo1"><img src="img/IMG_0015.jpg" alt="polo1"></a>

          <a href="img/IMG_0016.jpg" class="thumb" title="polo2"><img src="img/IMG_0016.jpg" alt="polo2"></a>

          <a href="img/IMG_0017.jpg" class="thumb" title="polo3"><img src="img/IMG_0017.jpg" alt="polo3"></a>
        </div>
      </div>

</div>
<div class="description ">

          <p>description run throught here</p>
          <p>ohmy godd!</p>
      </div>
</div>


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script  src= "photoview.js"></script>

      </body>
</html>

------------------------this is the css code-----------------

div{
display: block;

}




/********** MAIN PICTURE **********/
#photo-viewer {
  position: relative;
  height: 500px;

  overflow: hidden;

}

#photo-viewer img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;


}

/********** THUMBNAILS **********/
#thumbnails {
  margin: 10px 5px 0 0;
  height: 60px;}

a.active {
  opacity: 0.3;
}
#thumbnails img{

height: 60px;
width: 60px;

}

/********** DESCRIPTION **********/


.description{
width:180px;
float: right;
padding: 20px 20px 0 0;
font-size: 85%;
line-height: 1em;
 position: relative;
 margin-top:50px; 


}




/********** PARTS OF PAGES **********/
.gallery{
  width: 400px;
  padding: 20px;
  float: left;
  margin-left: 350px;
  margin-right: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}

Hi Sarut Jarumaneeroj, I've formatted your code to make it easier to read.

2 Answers

Luis Francisco Nogueira Vieira de Vasconcelos
Luis Francisco Nogueira Vieira de Vasconcelos
9,975 Points

Hello, Sarut. So, you want the description doesn't move below the thumbnails is that it? It has to be on the right side?

Sarut Jarumaneeroj
Sarut Jarumaneeroj
14,656 Points

yeap i wan't to fix it so that it always on the right

If you resize so your window width isn't large enough to contain both the .description and .gallery divs, then they will wrap onto their own lines, in the order that they appear in the HTML (which in this case means the description on the bottom).

This is just the way float works. If you always want the description on the right, you would either need to position it absolutely, or use percentage widths so that the layout is fluid.

Sarut Jarumaneeroj
Sarut Jarumaneeroj
14,656 Points

So i should create another div to wrap these 2 element and fix the width right?

Wrapping more divs around them won't help if they still don't have enough space to both be next to each other.

Try changing the widths to percentages and playing around with that to see if it does what you want.