Community Forums › Forums › Archived Forums › Design Tips and Tricks › Unexpected results from CSS
- This topic has 4 replies, 2 voices, and was last updated 9 years, 4 months ago by WisdmLabs.
-
AuthorPosts
-
November 29, 2014 at 3:40 am #133192timlomasMember
Hi.
I'm trying to get to the bottom of a problem that has been brought to my attention when using my CC Child Pages plugin (https://wordpress.org/plugins/cc-child-pages/) with your themes.
The plugin displays boxes which should be spread evenly across the page (width, padding, margin all set as percentages to ensure that everything should work correctly).
Each box is floated to the left, except for the last box in the row which is floated to the right (as this seems to play better with some old versions of IE). However, there is a large gap between last box and the preceding one when using a Genesis powered theme.
To isolate the problem, I have been playing with styling some divs directly in a page from within the WordPress page editor, and get the same result:
<div style="width: 100%; padding: 0; margin: 0; background: #ffe0e0;"> <div id="no1" style="width: 21%; margin: 1%; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: left;">Test</div> <div id="no2" style="width: 21%; margin: 1%; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: left;">Test</div> <div id="no3" style="width: 21%; margin: 1%; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: left;">Test</div> <div id="no4" style="width: 21%; margin: 1% 1% 1% 0; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: right;">Test</div> <div style="clear: both;"></div> </div>
As you can see, each box has an effective width of 25% (2 x 1% margins + 2 x 1% padding + 21% main content = 25%) ... however, the large gap is very apparent when viewing the page (although when viewing the code in the Visual editor it displays as expected). (This can be seen in action at http://testbed.ccplugins.co.uk/)
Can you shed some light as to what is causing the discrepancy and how I might be able to make the code more compatible with your themes?
Thanks.
http://testbed.ccplugins.co.uk/November 29, 2014 at 4:03 am #133194WisdmLabsMemberHi,
The issue is because of the box-sizing property being inherited.The below CSS calculates the effective width to be 23% and not 25%. Because of this you can see large gap of 8%.
box-sizing: border-box;
Solution:
Add the below CSS to the class.ccchildpage
:
box-sizing: content-box;
November 29, 2014 at 4:08 am #133196timlomasMemberThanks for restoring my sanity 🙂 I'd just started going through the Genesis CSS ... and I don't think I'd have spotted that very quickly!
November 29, 2014 at 4:20 am #133197timlomasMemberWith a bit of experimenting, it seems that I need to add the box-sizing code to both the outer wrapper and inner boxes to be sure of it working 100% as expected.
To update the example from my first post :
<div style="width: 100%; padding: 0; margin: 0; background: #ffe0e0;box-sizing: content-box; "> <div id="no1" style="width: 21%; margin: 1%; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: left;box-sizing: content-box; ">Test</div> <div id="no2" style="width: 21%; margin: 1%; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: left;box-sizing: content-box; ">Test</div> <div id="no3" style="width: 21%; margin: 1%; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: left;box-sizing: content-box; ">Test</div> <div id="no4" style="width: 21%; margin: 1% 1% 1% 0; padding: 1%; background: #e0e0ff; text-align: center; font-size: 200%; float: right;box-sizing: content-box; ">Test</div> <div style="clear: both;"></div> </div>
Thank you WisdmLabs for your help ... I'm sure it has saved me many hours of head scratching!!!
December 1, 2014 at 2:21 am #133304WisdmLabsMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.