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
14,656 Pointsi 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;
}
2 Answers
Luis Francisco Nogueira Vieira de Vasconcelos
9,975 PointsHello, 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
14,656 Pointsyeap i wan't to fix it so that it always on the right
Iain Simmons
Treehouse Moderator 32,305 PointsIf 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
14,656 PointsSo i should create another div to wrap these 2 element and fix the width right?
Iain Simmons
Treehouse Moderator 32,305 PointsWrapping 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.
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsHi Sarut Jarumaneeroj, I've formatted your code to make it easier to read.