Results 1 to 6 of 6
  1. #1

    CSS / HTML Help: Background will not fill browser

    Hello!

    So right now I'm redoing my site (again), and wanted to fill one of my divs with a solid color, but have it fill the entire browser window width wise. I know the wrapper itself won't have any issues with that, as other sites I have it fills up the browser window, but not sure how I can do that with the NAVIGATION div.

    Here is the css / html:
    Code:
    #container
    {
    	margin: 0 auto;
    	width:100%;
    	height:700px;
    	
    }
    
    #header
    {
    	height:150px;
    	width:1000px;
    	border-style:solid;
    	border-width:4px;
    	margin: 0 auto;
    
    }
    
    #navigation
    {
    	width:100%;
    	height:50px;
    	margin:0 auto;
    	background-color: #565656;
    	background-repeat: repeat-x;
    }
    
    .navigationtext
    {
    	text-align:center;
    
    }
    
    #content
    {
    	width:1000px;
    	height:800px;
    	border-style:solid;
    	border-width:4px;
    	margin: 0 auto;
    
    }
    
    <!Doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="jcmi_css.css">
    <title>
    Home
    </title>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">
    	image
    	</div>
    	<div id="navigation">
    		<div class="navigationtext">
    		navigation
    		</div>
    	</div>
    <div id="content">
    content here
    </div>
    </div>
    </body>
    </html>
    I know it's a long shot to ask here but I know there are lots of website coders floating around so. XD A shot in the dark!
    I am getting some css / html books this week so if no one knows the answer I should be able to find it in there.
    Last edited by insanejoker; 01-07-2015 at 12:43 PM. Reason: edit for clarification

  2. #2
    feline fine Noxid's Avatar
    Weasyl
    Noxid
    Join Date
    Feb 2014
    Location
    CANADURR
    Posts
    475
    if you add
    Code:
    body {margin:0px;}
    it should behave as you want
    tip: right-click and select "inspect element" in your preferred browser to bring up some developer tools that can highlight the different parts of the box model for different elements in your page, this can help you identify problematic areas

  3. #3
    AHHH that worked!!

    thank you And I will keep that in mind THANK YOUUU

  4. #4
    should probably be
    Code:
    html,body{margin:0}
    Some browsers have the page margin on the <body> tag, some have it on the <html> tag (I think IE did).

  5. #5
    This page may help you in case you need more assistance and coding tips:

    http://www.w3schools.com/

    Maybe it helps you as well

  6. #6
    I have heard that w3schools often contains outdated or just plain wrong information. The Mozilla Developer site is a far better source of information.

    https://developer.mozilla.org/en-US/docs/Web/Guide

 

 

Posting Permissions

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