SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Defining fluid width with position absolute

    I'm trying to design a site with a fixed side panel and scrolling content area. The side panel will hold the branding and main navigation - I want this to stay fixed so the nav bar is always visible. I want the hover effect on the menu items to reach the content area. At the moment they spill over because of position: absolute. I understand that assigning this takes it out of the document flow.

    This is a very rough mock up

    I know that if I define a width on the left panel and on the ul I can solve this issue but the site needs to be responsive so I really need to keep this fluid.

    Any suggestions?
    Barry

    Snap Designs
    Creating good impressions online and in print

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    There will be lots of solutions to this, but IMHO, a better option is to give the sidebar a fixed width and let the content area do the expanding and contracting.

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

    As Ralph said its generally better to have fixed width sidebar rather than a fluid one as it soon gets too small.

    However in answer to your question you can do it like this:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    	background:gray;
    }
    .outer {
    	min-height:100%;
    	background:#fff;
    	margin:0 3% 0 25%;
    	padding:1px 2em;
    }
    .sidebar {
    	position:fixed;
    	top:0;
    	bottom:0;
    	left:0;
    	width:25%;
    	background:gray;
    	overflow:auto;
    }
    .inner{margin:0 0 0 15%;}
    .nav {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .nav li {
    	margin-bottom: 0.2em;
    	padding: 0.2em;
    }
    .nav li:hover { background:#fff; }
    .sidebar p {
    	margin:0 0 1em;
    	padding: 0.2em;
    }
    </style>
    </head>
    
    <body>
    <div>
    <header class="sidebar">
    		<div class="inner">
    				<h1>Logo</h1>
    				<ul class="nav">
    						<li><a href="#">Menu item</a></li>
    						<li><a href="#">Menu item</a></li>
    						<li><a href="#">Menu item</a></li>
    						<li><a href="#">Menu item</a></li>
    						<li><a href="#">Menu item</a></li>
    				</ul>
    				<p>If a sentence is too long then it will not spill over onto the section element</p>
    		</div>
    </header>
    <section class="outer">
    		<h1>This is the section</h1>
    		<p>Lorem ipsum dolor sit amet, eu mea euismod salutandi. Vix eu semper consulatu vituperata, dolorem perfecto rationibus eos ea, ignota suscipit per an. At vix impetus pericula, has probo delicata accusamus ad, has ei duis putent labore. Eam at error option invidunt, cu exerci interpretaris usu. Maiorum tibique intellegebat an sea. Eum ne amet ignota accumsan, no pri quaeque numquam.</p>
    		<p>Autem inani lucilius usu ex. Odio dolores ea eos, pri audire admodum blandit cu. Eu eos congue aliquando pertinacia, at modus scribentur reformidans nam. At est mutat aliquid convenire, ei alii explicari sea, invidunt disputationi his ex. In eam quando accusata euripidis, sint commune repudiare his an. Assum referrentur usu ad, affert oporteat consetetur qui no, cu nulla pertinax his.</p>
    		<p>Quo in persius maiorum menandri, pro no nobis nostrud maiestatis. Nibh luptatum eu mea, consul bonorum necessitatibus an vix. Tale solet percipitur sed et, ut modo tation tantas pro. Homero animal nec te. Consul vocibus epicurei usu cu, corrumpit moderatius contentiones cum ea, lorem laoreet docendi eum eu. Qui facer doctus dolorem cu.</p>
    		<p>Postulant definitiones eu vis, inermis fuisset scaevola cum ei. Vim ei vide similique vituperatoribus. Eos cu nostrud periculis elaboraret, ea mei labores vivendum posidonium. Ut duo enim definiebas, partem fuisset complectitur vix ne.</p>
    		<p>Cu bonorum pertinacia honestatis est. Ne eum brute omnium partiendo, magna propriae fabellas ad has, sit solet eripuit equidem id. Vel nostro saperet ponderum ei. Vero nemore mel ex, eum ei nobis labores intellegam, tale suas commodo sit et. An pro noster corrumpit gubergren, sea an sanctus iudicabit, eum tollit convenire necessitatibus ei.</p>
    		<p>Lorem ipsum dolor sit amet, eu mea euismod salutandi. Vix eu semper consulatu vituperata, dolorem perfecto rationibus eos ea, ignota suscipit per an. At vix impetus pericula, has probo delicata accusamus ad, has ei duis putent labore. Eam at error option invidunt, cu exerci interpretaris usu. Maiorum tibique intellegebat an sea. Eum ne amet ignota accumsan, no pri quaeque numquam.</p>
    		<p>Autem inani lucilius usu ex. Odio dolores ea eos, pri audire admodum blandit cu. Eu eos congue aliquando pertinacia, at modus scribentur reformidans nam. At est mutat aliquid convenire, ei alii explicari sea, invidunt disputationi his ex. In eam quando accusata euripidis, sint commune repudiare his an. Assum referrentur usu ad, affert oporteat consetetur qui no, cu nulla pertinax his.</p>
    		<p>Quo in persius maiorum menandri, pro no nobis nostrud maiestatis. Nibh luptatum eu mea, consul bonorum necessitatibus an vix. Tale solet percipitur sed et, ut modo tation tantas pro. Homero animal nec te. Consul vocibus epicurei usu cu, corrumpit moderatius contentiones cum ea, lorem laoreet docendi eum eu. Qui facer doctus dolorem cu.</p>
    		<p>Postulant definitiones eu vis, inermis fuisset scaevola cum ei. Vim ei vide similique vituperatoribus. Eos cu nostrud periculis elaboraret, ea mei labores vivendum posidonium. Ut duo enim definiebas, partem fuisset complectitur vix ne.</p>
    		<p>Cu bonorum pertinacia honestatis est. Ne eum brute omnium partiendo, magna propriae fabellas ad has, sit solet eripuit equidem id. Vel nostro saperet ponderum ei. Vero nemore mel ex, eum ei nobis labores intellegam, tale suas commodo sit et. An pro noster corrumpit gubergren, sea an sanctus iudicabit, eum tollit convenire necessitatibus ei.</p>
    </section>
    </body>
    </html>
    You wanted a fixed sidebar so use position:fixed and not position absolute. Don't interfere with html and body scrollbars because that was giving you two scrollbars at some heights.

    There is no need to absolutely position the menu inside the fixed navbar. Just let it go with the flow and it will reach the edge automatically. You also need overflow:auto on the sidebar because if content goes below the fold it would be unreachable.

    You should add media queries to remove the fixed positioning for smaller devices as they hate fixed positioning and don't forget the html5 shiv for old IE.

    Hope that helps.


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
  •