Make top border 100% width in container

HTML & CSS
1

Hi there… im new in css, I want to make a custom layout for top border & menu 100% in width, but the other container is 980px in width…, how do i do that? here’s my code…

/* layout */
#container {
width: 980px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-top: 10px solid #CCC;
border-bottom: 39px solid #CCC;
padding-bottom: 5px;
}

somebody help me :frowning:

2

Hi, arijay, welcome to the forums.

The code for the container doesn’t tell us anything about the rest of your design.

Why would you want a menu to have 100% width, yet the rest of the page to have a fixed width?

Can you give us a better idea of the picture that you have in mind? Perhaps a link to your site?

3

Welcome to Sitepoint arijay,

The answer is you can’t.
The width of your top border will be 100% of the width of the element + left and right padding (if applicable) and lenght of left and right border (if applicable).

So you will need to apply that style to a different element; one that 100% the width of the screen. You may have to alter your HTML to create such element.

hope that helps

4

Better to simply place it above the container in the html then it woul go 100%. But if you can’t you can try a couple things. If you AP the menu and don’t put position relative on the container it leave the container. Give it width 100% and it will be 100%. Or no AP you maybe give the inner margin{0 -999em;}; body{overflow-x:hidden;}. Without test I don’t know how that last one will behave.

5

The best way to set something like this up is to have a 100% width container and inside that your 980px content area, like this:

http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html

6

hi guys, thanks for the response

if you guys want to have a look of my site

and the example of the site that i want to…

thanks…

7

Yep, my post above will show you what to do. :slight_smile:

8

On another matter you might want to check your site as Mcaffee won’t let me visit there:

Whoa!
Are you sure you want to go there?

http://watchcontinent.com/ may be risky to visit.

Why were you redirected to this page?

When we visited this site, we found it exhibited one or more risky behaviors.