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


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>
<link rel="stylesheet" href="photoviewer.css">

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

        <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 class="description ">

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

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


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

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 **********/

float: right;
padding: 20px 20px 0 0;
font-size: 85%;
line-height: 1em;
 position: relative;


/********** PARTS OF PAGES **********/
  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.