CODEWITHSUNDEEP
htmlcss
Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17586

div has a 100% width when page is full size but reduced the width when page size is reduced

I have a div with a background image, it has a width of 100% when page is full size. Like this:

enter image description here

When the page is re-sized, the width reduced. Like this:

enter image description here

My HTML: 

<section>
  <div class="links">
    <div class="links_area">
      <ul id="menu">
        //html goes here      
      </ul>
    </div>
  </div>
</section>

My CSS: 

div {
display: block;
}
section { clear:both;display: block;}
.links{background:url(../images/links_bg.gif) repeat-x; width:100%; height:37px;}
.links_area{width:1003px; height:37px; margin:0 auto; }
ul#menu {  float: right;  height:auto;  margin: 0 0; width: 796px;}
ul#menu li {display:inline;}
ul#menu li a {display:block; float:left; background-position:0 0; color:#FFFFFF; text-decoration:none; font-family:Tahoma, Geneva, sans-serif; font-weight:bold; font-size:13px; padding:12px 10px 10px 4px; border-right:none;}

I cannot figure out why this is happening.

Upvotes: 1

Views: 418

Answers (3)

Akhil Thesiya
Akhil Thesiya

Reputation: 950

After Your UL put one div Like <div style="clear:both; float:none"></div>.

Upvotes: 2

Dead Man
Dead Man

Reputation: 2941

You can try to provide 100% width in .links_area instead of width:1003px.

Try this : 

.links_area{width:100%;}

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21239

This rule:

.links_area{width:1003px; height:37px; margin:0 auto; }

gives that div a fixed width, but since the next rule floats the #menu,

ul#menu {  float: right;  height:auto;  margin: 0 0; width: 796px;}

the div does not contain it, so it (#menu) resizes when the window resizes. Try adding overflow:auto; to the .links_area rule.

Upvotes: 3

Related Questions