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

[taymag]

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/

[Excavator]

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.

[taymag]

Thanks! Could I just go with 100%?

[Excavator]

Originally Posted by taymag

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?

[taymag]

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

[taymag]

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?

[Excavator]

Originally Posted by taymag

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.

[taymag]

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!

[Excavator]

Originally Posted by taymag

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.

[taymag]

Thanks