Jump to content
papabeers

margin-top percentage determined from box width

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?

 

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...