Need help getting the sidebar to stick to the right-side of the content

HTML & CSS
1

So at the moment I’m trying to have it so the sidebar stick to the right side of the content (the gallery of images). I have a solution in jQuery already, but just in case if a visitor isn’t running in JavaScript I’d like it to gracefully fall back to something reasonable.

At the moment I have this: http://0p2.rosstran.net/

It looks okay if the browser window at width of 1280 or larger. But once you go smaller than that, you get a big gap like this:
whitegap.png
I’m okay with the column drop, but I would like to have the sidebar right next to the gallery like this:
nowhitegap.png (Edited above image in Photoshop)

I think there’s a trick with floats that I’m not thinking of that will solve this problem.

Any help would be greatly appreciated!

2

HI,

You could use media queries and reduce the size ot the wrappers as appropriate.

This is just rough but should give you the idea.


@media screen and (max-width:1290px ){
#wrapper{max-width:1030px}
#content {max-width:750px}
}

@media screen and (max-width:1049px ){
#wrapper{max-width:780px}
#content {max-width:500px}
}

@media screen and (max-width:808px ){
#wrapper{max-width:530px}
#content {max-width:250px}
}
3

Is there any other way straightforward way to do it in CSS without media queries just in case the browser doesn’t support it?

4

You could add support for media queries in ie8 and under via this script.

There’s not really a way to make the page smaller when something wraps. Just because something wraps it doesn’t mean that the edges of the page will shrink wrap the content which is why you get the gap. I think the best you could hope for was to center all of it so that the gap is at the edges instead.

Something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
a img { border:none }
#wrapper {
	max-width: 1280px;
	margin: 0 auto;
	display:table;
}
#sidebar {
	width: 274px;
	background-color: #000;
	display:table-cell;
	vertical-align:top;
	text-align:left;
}
#content {
	background-color: #ccc;
	vertical-align:top;
	display:table-cell;
	text-align:right;
	padding:0 6px 0 0;
}
#content ul {
	padding: 0;
	margin:0;
	list-style:none
}
#content li {
	display:inline-block;
*display:inline;/* ie7 inline-block hack*/
	zoom:1.0;
	vertical-align:top;
}
.item { margin: 3px 0 0 }
</style>

<!--[if lte IE 7]>
<style type="text/css">
#sidebar{float:right;margin-left:-274px;}
#content{
	margin-right:-280px;
	float:left;
	width:100%;	
}
#content ul{padding-right:280px;}

</style>
<![endif]-->
</head>

<body>
<div id="wrapper">
		<div id="content">
				<ul>
						<li class="item one"> <a href="img/misc/-1.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-1.jpeg" alt=""></a> </li>
						<li class="item two"> <a href="img/misc/-3.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-3.jpeg" alt=""></a> </li>
						<li class="item three"> <a href="img/misc/3.jpg"><img src="http://0p2.rosstran.net/img/misc/thumb/3.jpg" alt=""></a> </li>
						<li class="item one"> <a href="img/misc/-1.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-1.jpeg" alt=""></a> </li>
						<li class="item two"> <a href="img/misc/-3.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-3.jpeg" alt=""></a> </li>
						<li class="item three"> <a href="img/misc/3.jpg"><img src="http://0p2.rosstran.net/img/misc/thumb/3.jpg" alt=""></a> </li>
						<li class="item one"> <a href="img/misc/-1.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-1.jpeg" alt=""></a> </li>
						<li class="item two"> <a href="img/misc/-3.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-3.jpeg" alt=""></a> </li>
						<li class="item three"> <a href="img/misc/3.jpg"><img src="http://0p2.rosstran.net/img/misc/thumb/3.jpg" alt=""></a> </li>
						<li class="item one"> <a href="img/misc/-1.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-1.jpeg" alt=""></a> </li>
						<li class="item two"> <a href="img/misc/-3.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-3.jpeg" alt=""></a> </li>
						<li class="item three"> <a href="img/misc/3.jpg"><img src="http://0p2.rosstran.net/img/misc/thumb/3.jpg" alt=""></a> </li>
						<li class="item one"> <a href="img/misc/-1.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-1.jpeg" alt=""></a> </li>
						<li class="item two"> <a href="img/misc/-3.jpeg"><img src="http://0p2.rosstran.net/img/misc/thumb/-3.jpeg" alt=""></a> </li>
						<li class="item three"> <a href="img/misc/3.jpg"><img src="http://0p2.rosstran.net/img/misc/thumb/3.jpg" alt=""></a> </li>
				</ul>
		</div>
		<div id="sidebar">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac vestibulum dolor. Vivamus lacinia nisi vel nisl commodo laoreet. Donec vitae bibendum massa. Etiam ut cursus lectus. Mauris orci mi, tempus non purus sed, laoreet euismod nunc. Aenean varius nisi at placerat venenatis. Etiam odio nulla, semper non sapien sit amet, tristique blandit erat. Ut non neque libero. Duis eleifend placerat lacus, quis iaculis sem congue tincidunt. Fusce semper eget leo at ultricies. Sed enim sapien, molestie eget enim id, bibendum fringilla sapien. Aenean pretium tristique odio, in sagittis elit auctor vitae. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut venenatis erat sed dignissim porttitor.</p>
		</div>
</div>
</body>
</html>

Bearing all that in mind I think the media query is the easiest approach.:slight_smile: