Html div width 100% not functioning

前端 未结 5 656
鱼传尺愫
鱼传尺愫 2021-01-12 04:29

There are some problems with my HTML, so I am posting the code.

The first tag is a div with id=\"header\". I have given it 100% width and g

相关标签:
5条回答
  • 2021-01-12 04:55

    This is the style sheet which works with me:

      body{    
        margin:0;    
        padding:0;
    }  
        .clear{    
        display:block;   
        clear:both;
    }    
        #header{   
        min-height:156px;  
        display: block;
        width:100%;
        background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
    }
        #head-contents{    
        width:974px;    
        margin-left:200px;
        height:156px;
    }
        #header ul {    
        margin:85px 23px 0 0;    
        float:right;
        list-style-type:none;
    }
        #header ul li {    
        display:inline;
    }    
        #header ul li a {   
        margin-left:46px;
        font-size:19px;
        color:#fff;
        text-decoration:none;
    }
    
        #header ul li a:hover ,    
        #header ul li a.active {    
        color:#FD7600;
    }
    

    Resizing the window and setting the margins to auto will screw the position of your inner div because it s width doesn t fit the window.

    0 讨论(0)
  • 2021-01-12 04:55
    #header {   
        min-height:156px;
        width:100%;
        background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
    }
    
    0 讨论(0)
  • 2021-01-12 04:56

    I have found the solution:

    #header {
      height: 156px;
      min-width: 990px;
      background-image: url('http://www.webdesignideas.org/images/bellevueBg.gif');
      display: block;
    }
    
    #head-contents {
      width: 974px;
      margin: 0 auto;
      height: 156px;
    }
    

    It's all a matter of min-width in the #header. I checked out facebook's login page and figured it out.

    0 讨论(0)
  • 2021-01-12 05:05

    Take out the background-image property from #header and apply this style to the body tag:

    background: url('http://www.webdesignideas.org/images/bellevueBg.gif') 0 0 repeat-x #fff;
    

    You will no longer have the problem you described. All you need to do now is cut down the background image to 156px height, using an image-editing software package like Photoshop.

    Edit: here's the updated jsfiddle showing the solution: http://jsfiddle.net/eYrg8/35/

    0 讨论(0)
  • 2021-01-12 05:18

    Working FIDDLE Demo

    You must set the width of your head-contents as the min-width of your header:

    #header {
        min-height:156px;  
        display: block;
        width:100%;
        background-image:url('http://www.webdesignideas.org/images/bellevueBg.gif');
    
        min-width: 974px; /* this is width of head-contents */
    }
    
    0 讨论(0)
提交回复
热议问题