SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Fit to the page

  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    SitePoint Addict
    Join Date
    Aug 2013
    Location
    New Zealand
    Posts
    277
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I'm no css expert but does "width:100%" on the div not work for you?

    Sent from my XT316 using Tapatalk 2

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Kiwiheretic View Post
    I'm no css expert but does "width:100%" on the div not work for you?
    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?

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

    As Stevie said just nest an inner element like so:

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

  5. #5
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys! You were very helpful!!


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
  •