SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stretch Div Inside Header 100%

    I am trying to get 2 colors within the header area. The first is one color the main wrapper, the 2nd div within the header is another color. It stretches across to right side but not all the way through to the left side in IE9 and FF18. there is a 5 to 10px margin on left.

    Code:
    <div id="mo_header_wrapper">
    	<div id="mo_header" class="wrapper">
            <div id="mo_menu" class="ddhmenu"> 
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">Home</a>  </li>
                    <li><a href="portfolio.html">Home</a> </li>  
                    <li><a class="search" href="search.html">Home</a></li>
                    <li><a class="listings" href="contact.html">Home</a></li> 
                    <li><a  class="selected" href="contact.html">Home</a></li>
                </ul>
                <br style="clear: left" />
            </div> <!-- end of mo_menu -->
        </div>
    </div>
    Code:
    #mo_header {
    	height: 80px;
    	width:100%;
    	
    }
     #mo_header_wrapper {
    	width: 100%;
    	background-color:#red;
    	height:380px;	
    }
    
    
    .wrapper { 
    	width: 960px;
    	padding: 0 10px;
    	margin: 0 auto;
    }
    
    
    
    #mo_menu { float:right; margin-top: 20px; }
    
    
    .ddhmenu {
    	width:100%;
    	background-color:#green;
    	padding-top:10px;
    	border:solid 1px #ffffff; 
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    First thing, don't use # before color names:

    background-color:#red;
    background-color:#green;

    The gap on the left is caused by this:

    Code:
    .wrapper {
    width: 960px;
    padding: 0 10px;
    margin: 0 auto;
    }

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    lukkas, delete the "#" in front of the colors written as words.

    Code:
    #mo_header_wrapper {
    	width: 100%;
    	background-color:#red;
    
    .ddhmenu {
    	width:100%;
    	background-color:#green;
    Then delete the following properties:

    Code:
    .wrapper { 
    	width: 960px;
    	padding: 0 10px;    /* DELETE the horizontal paddng */
    	margin: 0 auto;
    }
    
    .ddhmenu {
    	width:100%;
    	background-color:green;
    	padding-top:10px;
    	border:solid 1px #ffffff;    /* DELETE the horizontal border */
    }
    The horizontal values of padding and border are affecting the width and position of the inner div.



    Off Topic:


    EDIT: I seem to be running about 3-5 mins behind. Global time warp? ... internet slowing? (ninja'd by Ralph)

  4. #4
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the padding solution did fix it.

    Thanks


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
  •