Two child divs one match another with variable width

Question

I have 2 child divs within a parent div. I need child1 to be always centered in the parent, and child2 to be positioned under child1 (being aligned to left side of child1).

Child1 contains variable length of text. How can this be done?

#parent {
  text-align: center;
}

<div id="parent">
  <div id="child1">Variable length text here</div>
  <div id="child2">Some text here</div>
</div>

Current child2 position

This is what I need

Just to confirm, you want your child2 div to the left and under child1, in a block sense: upper right corner of child2 touching lower left corner of child1? — Timberwolf, Jan 13 '18 at 17:08
Yes ! So that if child1 text length changes then child1 is still centered (to parent div) and child2 keeps position to the left and under child1 — woodo, Jan 13 '18 at 17:10
You may need JavaScript for this. The only way I can think of doing this besides JS, is to switch to span elements and using margins,but that would leave child1 uncentered. Let me see if I can't find another way though. — Timberwolf, Jan 13 '18 at 17:14
This may be relevant: https://stackoverflow.com/a/11151128/1079192 — Timberwolf, Jan 13 '18 at 17:19
To clarify, are you intending for the text inside the `#child2` to start wherever the start of the text of `#child1` is, regardless of the width of the text of `#child2`? Could you include another example of what you are trying to achieve if the text length of `#child2` is longer than `#child1`? That may help put things into prospective for readers. — UncaughtTypeError, Jan 13 '18 at 17:23
Yes, i want text inside the #child2 to start wherever the start of the text of #child1 is, regardless of the width of the text of #child2 — woodo, Jan 13 '18 at 17:28
Timberwolf is right in suggesting a javsacript approach. You'll need to calculate the starting position of element 1's text node and apply those co-ordinates to the sibling element 2's text node, css is not intended for this functionality. — UncaughtTypeError, Jan 13 '18 at 17:33
@UncaughtTypeError i guess no need JS, we can always find a CSS trick for such things :) — Temani Afif, Jan 13 '18 at 19:02
@TemaniAfif I can see that, thank you :) But we *can't always* find a CSS trick for all these things all of the time, that's why, sometimes, javascript is the right approach. This is not one of those cases apparently, but this goes without saying ;) — UncaughtTypeError, Jan 13 '18 at 19:15

score 1 · Answer 1 · 2018-01-13T19:15:55.860

1

As your child1 text length is variable you’ll need to use jQuery to do this. Here’s a jsfiddle I made with a potential solution. Basically you’re calculating the width of your child1 and then using that to set padding that centers child1 and also puts all p elements on the same guideline.

<html>
<div id="parent">
<div id="child1" class="child"><p id="keyWidth">Variable text. 
</p></div>
<div id="child2" class="child"><p>
Variable text padding-left is: 
</p></div>
<div id="child3" class="child"><p>
Some much much much longer text here this text is so long
</p></div>
</div>
</html>

<style>
#parent {
display: block;
width: 50%;
margin: 0 auto;
padding: 2%;
background-color: yellow;
}

.child{
margin: 2%;
padding: 2%;
background-color: cyan;
} 

p{
width: auto; 
display: inline-block;
}
</style>

<script>
var keyWidth = $('#keyWidth').width();
var keyDivWidth = $('.child').width(); 
var keyPadding = keyDivWidth-keyWidth;

$('#child2 p').append(keyPadding);
$('p').css('padding-left', keyPadding/2 + "px");
</script>

edited Jan 13 '18 at 19:15

answered Jan 13 '18 at 17:52

This got downvoted as my jQuery was wrong (missing “px”). Updated and it works correctly now. – Jan 13 '18 at 19:10
this got downvoted because the question was not tagged with JS or jQuery ... the purpose is to find a CSS solution for this – Temani Afif Jan 13 '18 at 19:12
1

OP didn’t mention that they wanted a pure CSS solution, they asked, “...Child1 is variable length text. How can this be done?” – so I don’t see why jQuery doesn’t work here? Is there some unwritten stackoverflow code I don’t know about yet? – Jan 13 '18 at 19:15
OP doen't need to mention this. There is tag related to the question. If he want to consider JS or jQuery he can add theses tags. By the way i never said it's wrong or it's not working but it's better to avoid using something not tagged or related to the question even if t's correct [my opinion] – Temani Afif Jan 13 '18 at 19:19

Stickers · Accepted Answer · 2018-01-13T19:40:25.647

1

Try the display:table and display:table-caption approach:

.parent {
  display: table;
  margin: auto;
}

.child2 {
  display: table-caption;
  caption-side: bottom;
  background: silver;
}

<div class="parent">
  <div class="child1">Variable length text here</div>
  <div class="child2">Some text here</div>
</div>

<br>

<div class="parent">
  <div class="child1">Variable length text</div>
  <div class="child2">Some text Some text Some text</div>
</div>

edited Jan 13 '18 at 19:40

answered Jan 13 '18 at 18:38

Stickers

75,527
23
147
186

It works ! great solution ! Just edited your code to align-text: left and set minimum width (optional) .parent { display: table; margin: auto; text-align: left; min-width:100px; } .child2 { display: table-caption; caption-side: bottom; background: silver; text-align:left; min-width:100px; }

Variable length text here

Some text heref

– woodo Jan 13 '18 at 18:53
@woodo you can aslo check my solution, i provided another alternative without any need to specify a min-width ;) – Temani Afif Jan 13 '18 at 19:01

score 1 · Answer 3 · answered Jan 13 '18 at 18:56

Here is an easy flex solution. The idea is to use pseudo element that will take the remaining space in the right left to force the width of both text to be the same, then make align left the second one.

Then the trick is to make the content of the second child out of the flow using position:absolute so only the first content will decide about the width needed.

#parent {
  border: 1px solid;
  text-align: center;
  display:flex;
}
#parent:before,#parent:after {
  content:"";
  flex:1;
}

.child:nth-child(2) {
  position:relative;
}
.child:nth-child(2)::after {
  content:"A"; /* A hidden character to create the necessary space for one line */
  visibility:hidden;
}
.child:nth-child(2) > div {
  text-align:left;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  white-space:nowrap;
}

<div id="parent">
  <div class="content">
    <div class="child">
      <div>Variable length text here</div>
    </div>
    <div class="child">
      <div>Some text here</div>
    </div>
  </div>
</div>
<div id="parent">
  <div class="content">
    <div class="child">
      <div>Variable length text here</div>
    </div>
    <div class="child">
      <div>Some text here dsdf sdf sdf sdf</div>
    </div>
  </div>
</div>

Two child divs one match another with variable width

3 Answers3