SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make top border 100% width in container

    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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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/...d-columns.html

  6. #6
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by arijay View Post
    if you guys want to have a look of my site

    and the example of the site that i want to..
    Yep, my post above will show you what to do.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by arijay View Post
    hi guys, thanks for the response

    if you guys want to have a look of my site
    .
    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.



Tags for this Thread

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
  •