www.webdeveloper.com
Results 1 to 5 of 5

Thread: Header/Footer full width across the page while content is max-width is set to 980px

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    Lightbulb Header/Footer full width across the page while content is max-width is set to 980px

    Ok... I am struggling with this BIG time but I also need to say, I have just recently started to learn about HTML and CSS.
    My problem is as mentioned in a title... I want to create a page where content is centered in the middle of the screen with
    HTML Code:
    max-width: 980px;
    and header and footer are taking space across the whole screen (not limited to 980px width)

    If you take a look at the code bellow, it looks fine and header/footer are staying at the top/bottom of the page in full width regardless if I have a lot of content or not at all.
    Now... If I add this two items to the CSS under my "wrapper":

    HTML Code:
    margin: 0 auto; /* This centers wrapper on the page */
    max-width: 980px;  /* This adds maximum width to the page */
    This would center my page to the middle with maximum of 980px which would include my footer and header and that's not what I want...
    I have tried to take my footer out of the wrapper DIV, but if I do so, the content of the page would be overlapping my footer.

    Can anyone help me to resolve this mystery??

    Here is my HTML code:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en>
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Some Title</title>
    	
    	<link rel="stylesheet" type="text/css" href="style.css" />	
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  <!---This line is necessary for the page to display correctly on the web based on devices width -->
    	
    </head>
    
    <body>
    
    	<div id="wrapper">
    		
    		<div id="header">
    				HEADER GOES HERE
    		</div><!-- #header -->
    		
    		<div id="content">
    				"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </br>
    				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </br>
    				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa </b>
    				qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat </br>
    				facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</br> 
    				Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</br>
    				"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </br>
    				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </br>
    				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa </b>
    				qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat </br>
    				facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</br> 
    				Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</br>
    								"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </br>
    				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </br>
    				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa </b>
    				qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat </br>
    				facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</br> 
    				Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</br>
    				"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </br>
    				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </br>
    				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa </b>
    				qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat </br>
    				facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</br> 
    				Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</br>
    								"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </br>
    				ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </br>
    				At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa </b>
    				qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat </br>
    				facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</br> 
    				Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</br>
    
    
    		</div><!-- #content -->
    		
    		<div id="footer">
    				FOOTER GOES HERE
    		</div><!-- #footer -->
    		
    	</div><!-- #wrapper -->
    	
    </body>
    
    </html>
    And here is the CSS:
    HTML Code:
    body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    #wrapper {
    	min-height:100%;
    	
    	/*margin: 0 auto;
    	max-width: 980px;*/
    	
    	
    	position:relative;
    	border-style: solid;
    	border-color: black;
    	border-width: 1px;
    }
    #header {
    	background:#A3A3C2;
    	padding:10px;
    }
    #content {
    	padding-bottom:100px; /* Height of the footer element */
    	background: #F6F6F9
    }
    #footer {
    	background:#A3A3C2;
    	width:100%;
    	height:100px;
    	position:absolute;
    	bottom:0;
    	left:0;
    }

  2. #2
    Join Date
    Oct 2013
    Posts
    483
    Is this more along the lines of what you were wanting?
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="utf-8">
    	<title>Some Title</title>
    	
    	<link rel="stylesheet" type="text/css" href="style.css">	
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!---This line is necessary for the page to display correctly on the web based on devices width -->
    	
    </head>
    
    <body>
    
    	<header>
    		<h1>HEADER GOES HERE</h1>
    	</header>
    
    	<section>
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <br>
    		At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.<br> 
    		Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
    				
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <br>
    		At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.<br> 
    		Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
    
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." <br>
    		At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, *** soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.<br> 
    		Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
    
    	</section>
    		
    	<footer>
    		FOOTER GOES HERE
    	</footer>
    
    </body>
    
    </html>
    CSS:
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	min-height: 100%;
    }
    
    header {
    	background: #A3A3C2;
    	padding: 10px;
    }
    
    section {
    	margin: 5px auto;
    	max-width: 980px;
    	border: 1px solid black;
    	background: #F6F6F9;
    	padding: 5px;
    }
    
    footer {
    	background: #A3A3C2;
    	height: 100px;
    }
    If you want a "sticky" footer this would be your CSS:
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	min-height: 100%;
    }
    
    header {
    	background: #A3A3C2;
    	padding: 10px;
    }
    
    section {
    	margin: 5px auto 105px;
    	max-width: 980px;
    	border: 1px solid black;
    	background: #F6F6F9;
    	padding: 5px;
    }
    
    footer {
    	background: #A3A3C2;
    	height: 100px;
    	width:100%;
    	bottom:0;
    	position: fixed;
    }
    I'll leave it there for you to study the changes I made. The biggest were to the HTML. ALWAYS start with valid HTML! Check it at http://validator.w3.org/

    Questions? Ask away.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,489
    The basic structure to have full width headers and footers and a centred content with a maximum width is:

    HTML Code:
    <body>
        <div id="header">
    		HEADER GOES HERE
    	</div>
    		
    	<div id="content">
            CONTENT GOES HERE
    	</div>
    		
    	<div id="footer">
    		FOOTER GOES HERE
    	</div>
    </body>
    CSS
    Code:
    * {
    	margin:0;
    	padding:0;
    }
    body {
        width:100%;
    	background:#F0F0F0;
    }
    #header {
        width:100%;
        clear:both;
    	background:#A3A3C2;
    }
    #content {
    	margin: 0 auto;
        width:100%;
    	max-width: 980px;
        clear:both;
    	background: #F6F6F9;
    }
    #footer {
    	background:#A3A3C2;
    	width:100%;
    }
    What this won't do is fix the footer at the bottom of the page. More to follow...

  4. #4
    Join Date
    Aug 2014
    Posts
    2
    Thank you... I will try this tonight :-)

  5. #5
    Join Date
    Mar 2012
    Posts
    1,489
    Now, getting the footer to stick to the bottom of the screen is more complex. There may be other ways, but I use position:absolute and position:relative:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="iso-8859-1">
    <title>Full Width Header</title>
    <style>
    * {
    margin:0;
    padding:0;
    }
    html {
    width:100%;
    height:100%;
    background-color: #444;
    }
    
    body {
        position:relative;
        height:100%;
        width:100%;
        min-width: 320px;
    	background:#E0E0E0;
    }
    
    p {
        margin:16px;
    }
    #header {
        position:absolute;
        left:0;
        right:0;
        top:0;
        height:2.5em;
        text-align:center;
    	background:#A3A3C2;
    }
    #content {
        position:absolute;
        left:0;
        right:0;
        margin:0 auto; 
        max-width:980px;
        top:2.5em;
        bottom:2em;
        overflow:scroll;
    	background:#F6F6F9;
    }
    #footer {
        position:absolute;
        left:0;
        width:100%;
        height:2em;
        bottom:0;
        text-align:center;
    	background:#A3A3C2;
    }
    
    #footer p {
        margin:4px;
    }
    </style>
    </head>
    <body>
        <div id="header">
            <h1>HEADER</h1>
    	</div>
    		
    	<div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    	</div>
    		
    	<div id="footer">
            <p>FOOTER</p>
    	</div>
    </body>
    </html>
    This adjusts for window widths down to 320px, and could be made responsive by adding @media statements.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles