0

I'm trying to vertical align a div but it's not working at all for some reason. What am I doing wrong?

body {
border: 1px solid red;
height: 500px;
}
#contactUs {
border: 1px solid blue;
vertical-align: bottom;
}
<div id = "contactUs"> Contact Us </div>

Note: I do not want absolute positioning answers.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jessica
  • 1,667
  • 1
  • 17
  • 35
  • What? There's no way it can works. `#contactUs` isn't an inline element, but it's not in any container, just in `body`. –  Jan 22 '16 at 02:46
  • @TheProHands Is body not a container? – jessica Jan 22 '16 at 02:49
  • @TheProHands Anyway, that's not true anyway, as I just tried to wrap an outer div around this div, and tried the same css on it, but with same results, so it must be something else. – jessica Jan 22 '16 at 02:52
  • *@jessica Nah, what I said is true, dear.* –  Jan 22 '16 at 02:56
  • @TheProHands I've proved my point by providing a not working example. Why don't you prove that you're right by providing a working example then? – jessica Jan 22 '16 at 02:57
  • I know, but I said about the **666**. Okay, but don't need examples, I know about that. I seen your HTML code and edited in developer tools from Chrome. –  Jan 22 '16 at 02:57
  • Don't just tell me that. Show me. Answer the question below. – jessica Jan 22 '16 at 02:59
  • @TheProHands Unless you don't actually know the answer and is just wasting my time, which is seemingly likely. – jessica Jan 22 '16 at 03:00
  • Okay, but what do you want to do? Do you want to make the TEXT "Contact Us" be on bottom of the blue border? Is THAT? I'm 14............ more respect. :D –  Jan 22 '16 at 03:01
  • @TheProHands That's exactly it. But as I've said in the above 'Note', I do not want any absolute positioning answers. – jessica Jan 22 '16 at 03:02
  • @jessica possible to use padding-top in either % or fixed and putting the text inside another div? just tried that but not sure if that's what u want. Or do u insist on having the vertical-align? – cweitat Jan 22 '16 at 03:03
  • @cweitat Page is dynamic, no way to know how much padding is needed, also do not wanted fixed, or absolute positioning answers. The 500px is just an example. – jessica Jan 22 '16 at 03:04
  • @cweitat So in short, yes, I'm insisting on the vertical align. Anyway to make it work? – jessica Jan 22 '16 at 03:06
  • I finally understand what you want after seeing the new answer.............. please make more explained questions. (comment fixed) –  Jan 22 '16 at 03:20

2 Answers2

2

The vertical alignment effort didn't work because the vertical-align property applies only to inline and table-cell elements. (See the spec for details.)

You can align the #contactus div at the bottom of the containing block (body) with flexbox.

body {

    display: flex;               /* convert element to flex container */
    flex-direction: column;      /* create a vertical alignment for child elements */
    justify-content: flex-end;   /* align child elements at the end of the container */

    border: 1px solid red;
    height: 500px;
}

#contactUs { border: 1px solid blue; }
<div id = "contactUs"> Contact Us </div>

To learn more about flexbox visit:

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Yes! The 'new' finally came out! Because everyone wanted it! Great! Can you comment on all of the new, and exactly what they do? – jessica Jan 22 '16 at 03:09
  • I just found a problem. I don't want to align all child elements at the end. Only specific child elements. In this case, only one child element, and that is #contactUs. – jessica Jan 22 '16 at 03:18
  • ...Anyway around this? – jessica Jan 22 '16 at 03:21
  • Correct. Because there was only one child element in your question. Post another fiddle or question and I'll try to explain. – Michael Benjamin Jan 22 '16 at 03:21
  • There's no way to vertical align just one element to the bottom of its parent? There's only one child element in the example above, because it's just an example, and I try to make all my examples as simple as possible, so answerers don't complain that the code is too long. You can't possibly expect any pages to just have one element, the contact us at the bottom of the page, right? Of course there would have to be other contents. – jessica Jan 22 '16 at 03:23
  • Yes, of course there is a way. I'm asking to see a fiddle or a new question because there are various methods for making it happen, and I'm not sure what you're working with. – Michael Benjamin Jan 22 '16 at 03:25
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/101356/discussion-between-michael-b-and-jessica). – Michael Benjamin Jan 22 '16 at 03:40
-2

If you only need the "Contact Us" text vertically aligned you can set #contactUs line-height to 500px.

line-height:500px;
MomasVII
  • 4,641
  • 5
  • 35
  • 52