Follow up on previous topic, which reference is not required in this endeavor.
I have an element, parent element, which is height: 100%, inside of it, there are 4 <a href="#">'s
I cannot use vertical-align: middle method. Because I need to apply margin to the elements, which is kinda impossible on table-cell.
I cannot use flexbox, because of compatibility, which explodes before Internet Explorer 10.
Any other manners to align four inline-block elements vertically?
Wonāt padding do the trick?
100% of what? % heights need a parent height defined, defining heights is often not advisable.
It would kind of screw up my design. (you can start laughing now)
I cannot be more precise.
I donāt know the design you have in mind, so itās hard to give specific advice, or understand why padding wonāt work in it, but there will be a way.
Iām guessing itās a basic horizontal menu bar, like the other thread. Thatās simple enough with display table. Unless there is something special about it we donāt know.
re:ā 100% of whatāā¦ what was meant is that the browser itself doesnāt know what you mean by height:100% UNLESS you have given the PARENT element explicit height. So if you have a .parent with height:auto; and a .child with height: 100% the child will not ātakeā the declaration.
It would kind of screw up my design.
OH BOY!!
Would it still screw up your design IF you use box-sizing:padding-box; ( donāt forget to prefix) ?
Why do people suddenly become so asocial whenever someone make grotesque mistake or has very specific unpopular approaches to tasks?
If you think that I hurt your brain because of my very stupid question or request, youāre MORE THAN WELCOME to continue scrolling. Iām in no way trying to get your irritated.
Oh it will work, but the buttons have to further from each other, so that certain elements like shadows or underline donāt overlap, their own elements must stay away from each other. Itās hard to explain, but the elements must be further from each other, not just their content.
Nothing new. Iām just asking for vertical centering:
ā¦
Why do you CONCENTRATE on HEIGHT of the PARENT? And WHY do you CAPS things, that DONāT even partake in SOLUTION. The BOX is GETTING itās height from PARENT. The HUNDRED per-cent work PERFECTLY. Yes? Can we stop screaming for a second?
Stupidly enough, because suddenly everybody got irritated as if I offended their almighty left/right-wing. I decided to change my design so it will look nicely with padding.
This is my last post on SitePoint. It seemed like a good website, but if thereās no room for juniors without mediors/seniors having their pans fried, then I donāt think this website is right for me.
Thanks to all the Advisors who had enough patience and will to help me 
Have you posted any code in this thread? or a link to a working page? (Sorry if I missed a link somewhere.)
If you will post a āworking pageā of code in this thread (one that starts with <doctype> and ends with </html> and demonstrates the issue/s), I donāt mind giving it a look. The āworking pageā will give me an overall picture from which we can hopefully help.
Folks here are not intending to come across as rude, impatient, or critical nor do we intend to be irritating. That serves no one.
Cheers
Unfortunately, children donāt get their height from the parent, which is what was being pointed out above. Before flexbox, the only workaround was to get JS to calculate the height of the parent and then use that info to distribute child elements.
Sorry you feel put off by the responses. Weāre only trying to helpātruly! 
I think you are being a little bit sensitive and perhaps not understanding that the comments were well intentioned. Sometimes its hard to tell the nature of a post especially when someone says āyou canāt do thatā 
(Thatās why I add a lot of smilies when telling people they are doing it completely wrong as there no nice way to say rip it up and start again).
The core of the problem is that CSS is governed by context and to give an accurate answer we need t know the complete context of whats involved which will usually means seeing a demo of the code thatās not working for you.
When you say things like this:
I cannot use vertical-align: middle method. Because I need to apply margin to the elements, which is kinda impossible on table-cell.
What you are saying is half correct but not in a meaningful way with regards to the problem. Vertical align applies to the content in the table-cell which will be vertically aligned within the table-cell and that content can easily have margins applied to it as required.
Margins do not apply to table-cells themselves because that would be nonsense in the context of a cellular layout (You canāt move cells in a table up and down). However you can certainly move the content in a cell up and down.
Another sticking point for beginners and even some intermediate to advanced folk is a misunderstanding of how height works. This is not always their fault because height is a complex subject and easily misunderstood.
Here are just a few of the things you need to know about heights:
A percentage height can only be applied to an element if its parent has a fixed height defined. If a parent only contains content then its height is auto and a percentage height on the child will fail and resolve to auto.
If the parent has a percentage height defined also then it follows that this parents parent must have a height defined also. If all have percentage heights defined then there must be an unbroken chain of heights heading all the way back to the html element.
If the element is some distance down the page and you apply 100% height to it then that will take the bottom of the element below the fold of the page and not just to the bottom of the viewport.
If you put more content into the percentage height element than it can hold then the element will not grow and content will spill out.
Suffice to say that for most situations a percentage height is inadvisable or the wrong approach.
There are exceptions where you want a page wrapper than has a minimum of 100% height to fill the page and in these case you would set html and body to height:100% and then this page wrapper could have min-height:100% which will allow it to grow.
Another exception to all the rules above is that if you define the pagewrapper as display;table then you can indeed apply height:100% because elements with a display of table will treat height as a minimum and allow the element to grow (assuming the that html and body have been set to 100% or that you are using the new css vh units instead).
So you can see from the brief summary of some of the rules that detailed answers can only be made based on the situation in hand.
Based on your first post my thoughts would be something like this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;height:100%}
body{display:table;height:100%;width:100%}
.wrap{
display:table-cell;
text-align:center;
vertical-align:middle;
background:#ccc;
}
.wrap a{
display:inline-block;
vertical-align:middle;
width:30%;
height:50px;
background:red;
textx-align:center;
line-height:50px;
margin:25px;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#">Testing</a>
<a href="#">Testing</a>
<a href="#">Testing</a>
<a href="#">Testing</a>
</div>
</body>
</html>
If you donāt want the blocks side by side then change the anchors to display block and auto side margins instead.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;height:100%}
body{display:table;height:100%;width:100%}
.wrap{
display:table-cell;
text-align:center;
vertical-align:middle;
background:#ccc;
}
.wrap a{
display:block;
vertical-align:middle;
width:30%;
height:50px;
background:red;
textx-align:center;
line-height:50px;
margin:25px auto;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#">Testing</a>
<a href="#">Testing</a>
<a href="#">Testing</a>
<a href="#">Testing</a>
</div>
</body>
</html>
Just a note:
I meant no personal offense or criticism, and am sure neither did anyone else. What was being suggested by myself and others was to check that you were following ābest-practicesā ( an industry term for how things āneed to be doneā in order to achieve correct results), itās nothing personal.
As Paul said, CSS works the way CSS works which is some, if not many times , counter intuitive until you actually understand how it works. For example: the HEIGHT of the patron element is set by the sum of the HEIGHTs of the children, unless you set specific height for the parent. So if you try to set the height of the children as a fraction of the parent it creates an inline loop of sorts: the parent doesnāt know what height it should be, until the children tell it so, and the children canāt set their height until the parent knows its height.
As far a āall capsā go, I canāt speak for anyone else, but when I do it am usually trying to make my answer scannable, itās not yelling nor a show of frustration , sorry if it seemed that way. Itās usually done to emphasise TAGS or PROPERTIES ( sometimes myself or other people use class notion too DIV.someclass)
No question is stupid, but you have to give the smart answers a chance even if they seem contrary to your current path. Itās my experience thought close to a decade of coming to this community for answers, that the SitePoint staff and volunteers are nothing if not patient, helpful and knowledgable ( yeahā¦ sound like and ad but itās true). I am sure you will find the same if you give it a fair chance.
Iām actually working on this problem because i hate using table for some reason and i love flexbox sooo much but iām afraid of its compatibility so i started on making a mini CSS library that mimics the features of flexbox like centering vertically and horizontally(both are my reason why i love flexbox), space-between, around, grow, shrink, direction, etc. Iāll update you soon enough.
It is very well supported now, and where it is not, you can provide fallbacks like giving the flex children display: inline-block, it wonāt be exactly the same for them, but at least functional.
Thanks! Good to hear, looks like more green than i last checked.
Well i think itās safe to say iāll not give a single damn to those ie 9 users and below.
Iām making less effort for them. Iāll make things function and display in a usable way, but if itās not exactly like it is in a new browser, thatās not a problem for me. They just get a āno-thrillsā version.
If you pander to their every need, they will never upgrade to a decent browser.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.