SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stuck_Again View Post

    I have done some digging around on the web and I'm looking to achieve something similar to this layout: https://www.hanmi.com/
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    rough_scetch.png

    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <!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>

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    [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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •