CODEWITHSUNDEEP
htmlcss
Rash J
Rash J

Reputation: 143

Positioning in div

I would like to align two containers with text in the parent div. One of them should be position on the center of parent div (with width 'as needed') and the second one should aligns to the right of parent div.

Parent div and first container (on the center) should have resizable width with minimum width and the second container (on the right) should have fixed width.

my code is:

.parentDiv {
  min-width: 100px;
  width: 30%;
  background: red;
  position: relative;
  min-height: 30px;
}

.firstContainer {
  min-width: 50px;
  margin-right: 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 30px;
  background: green;
  text-align: center;
}

.secondContainer {
  width: 50px;
  position: absolute;
  right: 0;
  height: 30px;
  background: yellow;
}
<div class="parentDiv">
  <div class="firstContainer">
    There could be a long text and if should be resizable
  </div>
  <div class="secondContainer">fixed</div>
</div>

It works if the text from first container does not need a new line:

enter image description here

the problem is about the small size of parent div, the text from the first container is 'outside' of this container and this container does not increase the hight

enter image description here

How is it possible to fix that?

Upvotes: 0

Views: 52

Answers (3)

user14550434
user14550434

Reputation:

It's as simple as just using flexbox:

.parentDiv {
  width: 30%;
  display: flex;
}

.firstContainer {
  background: green;
  text-align: center;
  margin: auto;
}

.secondContainer {
  background: yellow;
}
<div class="parentDiv">
  <div class="firstContainer">
    There could be a long text and if should be resizable
  </div>
  <div class="secondContainer">fixed</div>
</div>

<br />

<div class="parentDiv">
  <div class="firstContainer">
    There could be a long text and if should be resizable
  </div>
  <div 
    class="secondContainer" 
    style="width: 500px;"
  >fixed (500px)</div>
</div>

Upvotes: 1

JohntheTyro
JohntheTyro

Reputation: 126

The only problem is width:30%; in .parentDiv actually makes the whole line block get reduced into a small box, because your two div is under the parentDiv, what they going to do will be effected by upper Div, you have to release it. Or at make the first container with fit-content.

Upvotes: 0

Tom Bombadil
Tom Bombadil

Reputation: 3975

.parentDiv{
  display: grid;
  grid-template-columns: 2fr 1fr;
  background:red;
}

.firstContainer{
  background:green;
  text-align: center;
}

.secondContainer{
  background:yellow           
}

You can use grids. No need to set height, width, position: absolute etc.

If you want to adjust the width of the columns. Play around with:

grid-template-columns: 2fr 1fr;

Make it 3fr 1fr or 2fr 1fr as per your width requirements. It will also resize accordingly without any additions.

Upvotes: 1

Related Questions