How to vertically align something with the element in front of its parent

Question

Given this html:

<header>Some header</header>
<div>
    <div class="right-of-header">should be to the right of header</div>
    <div>Some mor text is here</div>
</div>

I want the content of the first inner div appear to the right, of the header.

Is this possible, without using javascript to actually move the DOM element?

I just found this question: Position one element relative to another in CSS but this won't work for me, since I don't know the size and width of the header element. In other words, the solution should be responsive to different layouts.

There is a jsfiddle for it here

score 1 · Accepted Answer · edited Oct 02 '15 at 09:29

1

This works: https://jsfiddle.net/djgmj89c/

The idea is to

Make the float: left
Make the content that should go to the right of it float: right;
Make the element after the one that should go to the right clear: both;

Resulting in the following css:

header {
    float: left;
}
.clear {
    clear: both;
}
.right-of-header {
    float: right;
}

edited Oct 02 '15 at 09:29

Jens Schauder

77,657
34
181
348

answered Oct 02 '15 at 08:12

zucker

1,066
12
26

no, this is just right aligned. I want it on the same vertical position, but to the right of the header. I updated the fiddle to include an example how it should look like. – Jens Schauder Oct 02 '15 at 08:23
1

I used your approach and cleaned up your answer. I hope the drastic edit is ok with you. – Jens Schauder Oct 02 '15 at 09:30
In the version I actually use, replaced the `clear` class with this: `header+* :not(.right-of-header):first-of-type { clear: both; }` – Jens Schauder Oct 02 '15 at 09:31

Goowik · Answer 2 · 2015-10-02T08:41:17.833

1

The issue here is that a div has it's default display set to block.

My suggestion is to modify your html. Change the display value of your header to display: inline-block; and your right-of-header to display: inline;.

as follow:

<style>
header {
    font-size: 30px;
    display: inline-block;
}

.right-of-header {
    font-size: 8px;
    width: 50px;
    display: inline;
}
</style>

<header>Some header</header>
<div class="right-of-header">should be to the right of header</div>
<div>
    <div>Some mor text is here</div>
</div>

Here a demo: https://jsfiddle.net/z1c9Lgzo/

EDIT:

As you can't modify your html, another solution (which I'm totally against it, but can't seem to find another way) would be to alter the position relatively. Like so:

.right-of-header {
    font-size: 8px;
    width: 50px;
    float: right;
    position: relative;
    top: -40px;
}

Here a demo: https://jsfiddle.net/g4srpcpn/

You might need to tweek the top value for better alignment.

edited Oct 02 '15 at 08:41

answered Oct 02 '15 at 08:23

Goowik

782
11
36

Unfortunatly I can't move the div element. Well I could but that would create issues in other places ... – Jens Schauder Oct 02 '15 at 08:26
I added another answer. To be honest, as explained, I'm not a fan of altering positions for alignment issues. – Goowik Oct 02 '15 at 08:42
I understand and agree to your concerns, but this seems to a viable option. – Jens Schauder Oct 02 '15 at 08:45

score 1 · Answer 3 · answered Oct 02 '15 at 08:59

if you have a parent container with position relative maybe this can help you.

<header>Some header</header>
<div>
    <div class="right-of-header">should be to the right of header</div>
    <div>Some mor text is here</div>
</div>

<style>
header {
    font-size: 30px;
    display: inline-block
}

header + div{
    display: inline-block;
    float: right;
}

header + div > div:nth-of-type(2){
    position: absolute;
    left: 0;
    padding: 10px;
}

.right-of-header {
    font-size: 8px;
    width: 50px;
}
</style>

https://jsfiddle.net/0wqud60n/1/

How to vertically align something with the element in front of its parent

3 Answers3