papabeers Posted January 24, 2014 Share Posted January 24, 2014 I have an app for scheduling for out homeschooling. I use floating divs to represent various events in a column for each child and for each day. I found that I can set the height of each div such that one hour is 5.55% of the total height of the containing div. style="height:5.55%;" So I thought to represent the time between events using margin-top. So 30 minutes of free time could be represented this way: style="height:5.55%;margin-top:2.78%" But margin-top is calculated based on the width of the element. I was surprised by this inconsistency. The logic which determines that an element's height should be calculated based on the height of the containing element should also be applied to margin-top. Does this make sense? And how would one propose a change to the calculation of margin-top based on percent? Can it even be changed? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 24, 2014 Share Posted January 24, 2014 It would help if you provided an example of html to go with css. possible problems causing this (1) Outer parent can not determine height of floated child elements, so height of parent will equal 0 : fix: use overflow: hidden on parent. (2) Collapsing margins, where the margins (top/bottom) of child elements, will seep beyond the top/bottom edges of parent forcing the parent down instead of child element within parent. FIX: overflow: hidden; OR 1px padding top and bottom edges. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now