SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Mixing 100% Width with 80% Width

    Hi,

    I am building a homepage which has 100% width for one part and then 80% with 10% border down the left and right.

    One example would be http://www.kickstarter.com/

    Can anyone advise the best way to this design. Would you keep the two seperate?

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,286
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    As long as you watch the borders and other pieces of the box models, you should be fine. You'll want to keep them separate, but really you only need to place the width/margins on the 80% portion.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I have 2 DIVs. Left, Centre and Right. However the left and right DIVS only keep their width if I have something in it.

    Is their a way to keep with width even though it is empty?

    Is it okay to use   ?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    As long as the divs have a width set, they will stay at that width, empty or not.

    Off Topic:

    Quote Originally Posted by justlukeyou View Post
    Thanks, I have 2 DIVs. Left, Centre and Right.
    Hmm ... as they say, there are three kinds of people—those who can count, and those who can't.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks, it works fine in IE but in Firefox is collapses.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Do you have an example you can post?—either a link, or the HTML/CSS you are working with.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi, this my CSS. Ive tried different things like changing the height. It works fine in IE but the div collapses in Firefox.

    #headerleft {
    float:left;
    width:15%;
    height: 100%;
    }

    #headerright {
    float:right;
    width:15%;
    }



    #header {
    float:left;
    width:70%;
    }

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Because I am confused as to what you are trying to say, i will just note that teh BORDER property does NOT take % .
    Also CHECK your DOCTYPE!!!
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    If that doesn't do it ( or if it also breaks IE) you may have added padding, margin or border to any of those elements and you need to take that into account whenever you declare a width . Example : {width:15%; border:5px solid pink; padding 25px; margin:0 5%;} actually computes to:

    15% + (5% +5%)from Margin + (25px +25px)from Padding + (5px +5px)from Border=25%+60px. So if you were expecting the width to be 15% or even 25% you'd be off and your element will "drop"

  9. #9
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,286
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Hi, this my CSS. Ive tried different things like changing the height. It works fine in IE but the div collapses in Firefox.

    #headerleft {
    float:left;
    width:15%;
    height: 100%;
    }

    #headerright {
    float:right;
    width:15%;
    }



    #header {
    float:left;
    width:70%;
    }

    This is a completely different scenario than you posted earlier - you asked about one container at 80%, now you've got three containers which you want to place side by side. Assuming that you don't have any child content that is larger than your anticipated widths, you should be OK (don't forget to clear your floats though).

    If however, headerleft and headerright are there simply to force the margins, that's not the approach to take.

    Code:
    :
    <style>
         #header { width: 70%; margin: 0 auto; }
    </style>
    :
    <div id="header">CONTENT GOES HERE</div>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  10. #10
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    :
    <style>
         #header { width: 70%; margin: 0 auto; }
    </style>
    :
    <div id="header">CONTENT GOES HERE</div>
    Hi, I tried this, it pushes it to the left and makes the div 70% wide. I am looking to centre the 70% DIV.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    What you have there is fine, so something else on the page is messing it up.


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
  •