CODEWITHSUNDEEP
htmlcss
woodo
woodo

Reputation: 33

Two child divs one match another with variable width

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

Upvotes: 3

Views: 117

Answers (3)

Stickers
Stickers

Reputation: 78676

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>

Upvotes: 1

user9183335
user9183335

Reputation:

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272734

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>

Upvotes: 1

Related Questions