What is the best way to approach this type of layout?

Hi people,

I’m looking to design a layout that has the left sidebar stuck to the complete height of the page and the footer to also always remain visible.

I have done some digging around on the web and I’m looking to achieve something similar to this layout: https://www.hanmi.com/

As you can see the left hand side and the bottom of the page always remain the same (more or less) when resizing the browser window.

Many thanks in advance.

I wouldn’t copy that page as it is unusable at any widths smaller than its max-width as the content becomes unreachable.

I think we’d need to see a drawing of what you want to give sound advice. Usually fixed footers and fixed sidebars are the worst of all approaches as far as fluid content is concerned. If you want independent viewport height content and sidebars then you end up with multiple scrollbars or as was done in that example above you lose the ability to scroll one section at all.

If you had a rough drawing then I might be able to suggest a better more robust alternative.:slight_smile:

Thanks for your reply Paul.

I get what your saying about the layout, but it really kinda fits with what i want to do so I’ve not given up on it as yet.

As requested I have knocked up a very rough sketch of what I’m looking to do.

Just to clarify a few things, the main content area does not need to have an extra sized image covering the whole area (like the original).

I was thinking more of adding a couple of fixed sized images in there and some text.

Also I would like the full height of the sidebar to remain visible.

One last thing… I would like the red footer bar to stretch the full length of the browser.

Now I know there are some contradictions on the above, please excuse me, my head is messed right now as ive been trying a shed load of different layouts and techniques and im just not thinking straight at the mo.

Thanks so much for you help.

Hi,

Here’s a start to see where we go from here.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%
}
.outer {
	width:100%;
	height:100%;
	display:table;
	table-layout:fixed;
}
.sidebar {
	background:#ccc;
	color:#000;
	width:280px;
}
.main {
	background:#f9f9f9;
	color:#000;
}
.main, .sidebar {
	display:table-cell;
	vertical-align:top;
	padding:10px 10px 75px;/* 70px = height of fixed footer*/
}
.footer {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	color:#fff;
}
.foot-inner {
	display:table;
	width:100%;
	table-layout:fixed;
}
.side-foot {
	width:280px;
	display:table-cell;
	background:#000;
	background:rgba(0,0,0,0.7);
	padding:10px;
	height:50px;
}
.main-foot {
	display:table-cell;
	vertical-align:top;
	vertical-align:bottom;
}
.main-foot-inner {
	background:#000;
	background:rgba(0,0,0,0.6);
	height:20px;
	padding:10px;
}
/* remove fixed footer for smaller screens*/
@media screen and (max-width:800px) {
.footer {
	height:auto;
	position:static
}
}
</style>
</head>

<body>
<!-- IE8+ only -->
<div class="outer">
		<div class="sidebar">
				<ul>
						<li>stuff here</li>
						<li>stuff here</li>
						<li>stuff here</li>
						<li>stuff here</li>
						<li>stuff here</li>
						<li>stuff here</li>
				</ul>
		</div>
		<div class="main">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel feugiat sapien. Integer ac laoreet nulla. Aliquam laoreet dui vel nisl molestie, id varius tellus fermentum. Duis ipsum lectus, sodales non aliquet quis, tempor ut est. Pellentesque porta pellentesque nisi, quis tincidunt urna. Phasellus sit amet quam nisi. Vivamus quis varius erat, vitae consequat est. Vivamus varius felis id eros suscipit rutrum. Aenean pellentesque et nibh in mollis. Praesent fermentum suscipit congue. Suspendisse posuere massa eu eros facilisis cursus. Proin est elit, bibendum nec tristique sit amet, hendrerit non eros. Mauris ornare cursus velit at rutrum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel feugiat sapien. Integer ac laoreet nulla. Aliquam laoreet dui vel nisl molestie, id varius tellus fermentum. Duis ipsum lectus, sodales non aliquet quis, tempor ut est. Pellentesque porta pellentesque nisi, quis tincidunt urna. Phasellus sit amet quam nisi. Vivamus quis varius erat, vitae consequat est. Vivamus varius felis id eros suscipit rutrum. Aenean pellentesque et nibh in mollis. Praesent fermentum suscipit congue. Suspendisse posuere massa eu eros facilisis cursus. Proin est elit, bibendum nec tristique sit amet, hendrerit non eros. Mauris ornare cursus velit at rutrum.</p>
		</div>
</div>
<div class="footer">
		<div class="foot-inner">
				<div class="side-foot">Side footer</div>
				<div class="main-foot">
						<div class="main-foot-inner">main-foot</div>
				</div>
		</div>
</div>
</body>
</html>


Thanks again for your help Paul.

After a lot of playing around… I finally decided to take your original advice and not go with that layout.

I did some more ‘digging around’ and have come up with a much nicer layout for my project.

A massive thank you to you anyway mate for trying to help me out on this one.

I’m running into to trouble with my nav on the new layout so if i cant figure it out myself I’ll write another post and maybe I can trouble you to help me out on that if poss.

Thanks again for all your troubles mate.

[QUOTE=Stuck_Again;5653110

I’m running into to trouble with my nav on the new layout so if i cant figure it out myself I’ll write another post and maybe I can trouble you to help me out on that if poss.
[/QUOTE]

Yes no worries. That’s what we are here for :slight_smile: