CODEWITHSUNDEEP
css
demic0de
demic0de

Reputation: 1313

Allow inner div inside a div with fixed width to have a 100% width

I'm trying to achieve the same thing IN THIS EXAMPLE ...i want my navigation to be like on that website.

HTML

<div id="container">
    <div id="nav"></div>
</div>

CSS

#container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#nav {
    width: 100%
    background: #585858;
    height: 37px;
}

I'm tryting to get the same effect as repeat-x; for the nav

Upvotes: 0

Views: 142

Answers (3)

RbG
RbG

Reputation: 3193

#container
{
  width:980px;
}
#nav{
  position:absolute;
  left:0;
  right:0;
  /*...no need of width:100%;..*/
}

EXAMPLE

Upvotes: 1

maikelsabido
maikelsabido

Reputation: 1327

Maybe you want to achieve something like this: http://jsbin.com/oWeKiqa/2/

Try this on your CSS:

#container {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#nav {
    width: 100%;
    background: #585858;
    height: 37px;
    left: 0;
    display: block;
    position: absolute;
}

Upvotes: 1

defau1t
defau1t

Reputation: 10619

Add overflow:hidden; to container div and don't forget that you have a typo as you forget to add ; at the end of width property so its not being applied.

http://jsbin.com/efilOSA/1/

Upvotes: 0

Related Questions