Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts

    How to use full width of main page (id="content")

    This is my test page so scroll past the @font-face text I'm testing at the top to the boxes.

    How can I make use of the whole content id section to get those boxes to 4 wide?

    http://www.hrreplacementcushions.com/

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello taymag,
    You should know about the box model. See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Your .entry-content is 68.9% the width of it's parent.
    To fit four .product-box's side by side, .entry-content would have to be 1176px wide.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    taymag (01-31-2013)

  • #3
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Thanks! Could I just go with 100%?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by taymag View Post
    Thanks! Could I just go with 100%?
    Look how wide the parent is. If you make .entry-content 100% the width of it's parent, do 4 of your boxes fit?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Ya. But the number of boxes wasn't necessarily the reason, it was more to just use the whole width. So will 100% be okay to use? Thanks

  • #6
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Thinking about going another route but figured I'd put it here instead of cluttering up the forum with another similar thread.

    How can I expand the id post-7 div to 100% to match up with the primary id?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by taymag View Post
    Ya. But the number of boxes wasn't necessarily the reason, it was more to just use the whole width. So will 100% be okay to use? Thanks
    100% would be fine.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    How can I expand the post-7 id to full width? I cant seem to find a div in between that is stopping it...

    Thanks!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by taymag View Post
    Thinking about going another route but figured I'd put it here instead of cluttering up the forum with another similar thread.

    How can I expand the id post-7 div to 100% to match up with the primary id?

    #post-7 inherits it's width from parent #content
    You would need to make #content full width of it's parent, #primary.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    taymag (02-01-2013)

  • #10
    Regular Coder
    Join Date
    Mar 2012
    Posts
    160
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •