Fit to the page

Hi! I am a beginner in web development and currently I am working on a page design. Probably like a lot of we developers I put my content in a “<div>”, which is centered (mine also has a width of 1000px), but I want the header and the footer of the site (<header id=“top_header”>) and (<footer id=“the_footer”>) to be page wide(and at the same time be in the main div because the text that it contains needs to start at the same distance from the left margin as the other content starts). What I mean by that is that I want these two to fit the screen/browser page, to be no space between the header and the edges, like the header and footer of this site are. I don’t know hot to explain this, but I hope you will understand.

I’m no css expert but does “width:100%” on the div not work for you?

Sent from my XT316 using Tapatalk 2

That won’t work because if the header and footer are inside the main <div> then their width would be 100% of that <div>, ie 1000px, rather than extending to the full viewport width.

Essentially, you will need to take the header and footer blocks out of the main <div> and then use CSS to make it look as though you haven’t. Off the top of my head, you might be able to achieve that with negative margins or by using position:relative to move blocks upwards.

Edit:

Ugh, just re-read the OP and come up with a different plan. If all you’re trying to achieve is for the text in the header to take on the same width and position as the centred 1000px-wide main column then why not just put another <div> inside the header and centre it with a width of 1000px?

Hi,

As Stevie said just nest an inner element like so:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
}
.content {
	width:1000px;
	margin:auto;
	background:#333;
	color:#fff;
	padding:1px 0;
}
.header, .footer {
	min-width:1000px;
	margin:auto;
	background:blue;
	border-bottom:1px solid #fff;
	border-top:1px solid #fff;
}
</style>
</head>

<body>
<div class="header">
		<div class="content">
				<h1>Header</h1>
				<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
		</div>
</div>
<div class="content">
		<h2>Main Page</h2>
		<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>
<div class="footer">
		<div class="content">
				<h3>Footer</h3>
				<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
		</div>
</div>
</body>
</html>


Thanks guys! You were very helpful!!