SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with responsive layout?

    Hello, I've been working on this for the past days and have nearly ripped my hair out trying to figure it.
    I have this Fixed-Fluid layout that I want to make responsive. I have the left column (fixed) responsive to what I want done, but when the main content (fluid) is suppose to fall beneath the left column section,there is no scroll for the content? Any help would be appreciated

    Here's the CSS:

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	overflow: hidden;
    	height: 100%; 
    	max-height: 100%;
    	font-family: 'Open Sans';
    	font-size: .9em;
    }
    
    nav {
    	margin: 0;
    	padding: 10px 0;
    	list-style: none;
    	text-align: center;
    	background-color: #DBDBDB;
    	font-size: .8em;
    }
    
    nav ul {
    	margin: 0;
    	padding: 0;
    }
    
    nav ul li {
    	display: block;
    	list-style-type: none;
    	margin: 0;
    	padding-top: 2em;
    	padding-bottom: 2em;	
    }
    
    nav ul li a {
    	width: auto;
    	margin: 0 25px;
    	text-align: center;
    	padding: 0;
    	font-size: 1.2em;
    	text-transform: uppercase;
    	text-decoration: none;
    	color: #000;
    }
    
    nav ul li a:hover {
    	color: #0C2B54;
    }
    
    nav ul li a:visited {
    	color: #000;
    }
    
    @media screen and (max-width: 560px) {
    	nav ul li {
    		display: inline;
    		float: left;
    		list-style-type: none;
    		margin: 0;
    		padding 2em;
    	}
    }
    
    #leftcontent {
    	position: absolute;
    	top: 0;
    	bottom: 0; 
    	left: 0;
    	width: 300px;
    	height: 100%;
    	overflow: hidden;
    	background: #DBDBDB;
    }
    
    #leftcontent h1 {
    	text-transform: uppercase;
    	text-align: center;
    }
    
    @media screen and (max-width: 560px) {
    	#leftcontent {
    		position: static;
    		float: left;
    		width: 100%;
    		height: 10em;
    		border-bottom: 1em solid #0C2B54;
    	}
    }
    
    #maincontent {
    	position: absolute;
    	top: 0; 
    	left: 300px;
    	right: 0;
    	bottom: 0;
    	overflow: auto; 
    	background: #fff;
    	border-left: 1em solid #0C2B54;
    }
    
    @media screen and (max-width: 560px) {
    	#maincontent {
    		position: static;
    		overflow: auto;
    		width: 100%;
    		border-left: none;
    	}
    }
    And here's the HTML:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<body>
    		<div id="leftcontent">
    			<div class="innertube">
    				<h1>dkhgkfdbvkd</h1>
    	
    				<nav>
    					<ul>
    						<li><a href="/">_________</a></li>
    						<li><a href="/">_________</a></li>
    						<li><a href="/">_________</a></li>
    						<li><a href="/">_________</a></li>
    					</ul>
    				</nav>
    			</div>
    		</div>
    
    		<div id="maincontent">
    			<div class="innertube">
    				<article class="blog">
    					<header><h1>Some kind of title</h1></header>
    
    						<p>Fill this area up with enough content to make the scroll option available</p>
    
    					<footer>Blsvnkdfjbndfkbn</footer>
    				</article>
    			</div>
    		</div>
    	</body>
    </html>

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

    The content is stuck to the side of that floated div so you need to clear it.

    Code:
     @media screen and (max-width: 560px) {
    #maincontent {
    	position: static;
    	overflow: auto;
    	width: 100%;
    	border-left: none;
    	clear:both;
    }
    }
    Of course because you have hidden the overflow on the body the element will never be visible outside the viewport unless you also release the overflow:hidden from the body.

    Be very careful with hiding overflow because as soon as content extends further than the space you have allocated it will be hidden and unreachable.

    It looks as though you are trying to create two fixed columns at desktop size but you will need to provide scrollbars on each column or content will be unreachable if it needs to scroll or doesn't fit in the viewport.


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
  •