Jump to content

margin-top percentage determined from box width


papabeers
 Share

Recommended Posts

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%;"

post-170165-0-33122200-1390582374_thumb.png

 

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...