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.
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,252 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,252 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,252 PointsIain Simmons
Treehouse Moderator 32,252 PointsHi Sarut Jarumaneeroj, I've formatted your code to make it easier to read.