CODEWITHSUNDEEP
htmlcss
Anish Mittal
Anish Mittal

Reputation: 1182

Shift Entire Div with its inner Divs in next line in HTML/Wicket

After viewing so many questions, I didn't find the solution, as I'm new to HTML/Wicket. So asking this question:

I have a parent div [div1]. Inside that 2 divs are there horizontally [div2, div3].

div3 contains 2 more divs horizontally [div4, div5].

What I want to achieve is:

When text for div5 gets increased, then entire div3 should move below div2.

Any solution for that?

Code used is:

.coverageDetailsOuterAHX span {
  display: inline-block;
  float: none;
  margin-right: 2%;
  width: 319px;
}

.coverageDetailsInnerAHX {
  display: inline-block;
  float: none;
  margin-right: 2%;
}

.coverageDetailsAHX {
  display: inline-block;
  float: none;
  margin-right: 2%;
}

.innerRealCostAHX {
  display: inline-block;
  float: left;
  width: 316px;
}
<div>
  <div class="innerRealCostAHX">
    <a href="http://microsoft.com"> It is microsoft </a>

  </div>

  <div class="coverageDetailsOuterAHX">

    <div class="coverageDetailsInnerAHX">
      <a href="http://google.com"> It is google </a>
    </div>

    <div class="coverageDetailsAHX">
      <a href="http://yahoo.com"> It is Yahooooooooooooooooooooooooooooooooooooooooooooo</a>
    </div>

  </div>

</div>

I want to display "It is google " and "It is Yahoooooooooooo" horizontally 
and below "It is Microsoft".

Upvotes: 0

Views: 172

Answers (2)

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

You can achieve this using display: flex. See below code sample for working example.

 .coverageDetailsOuterAHX{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 500px;
  width: 100%;
}
 
  .coverageDetailsOuterAHX div{
    width: calc(50% - 4px);
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
        word-break: break-all;
    border: 2px solid red;
  }
    .coverageDetailsOuterAHX div:first-child {
        flex-basis: 100%;
      
      width: 100%;
    }
<div class="coverageDetailsOuterAHX">
  <div> This is short text </div>
  <div> This is long text dsffffffffffffffffffffffffffffasdwerferffsdfsdfwerwerwe </div>
  <div>  This is long text dsffffffffffffffffffffffffffffasdwerferffsdfsdfwerwerwe  </div>

</div>

Upvotes: 0

yunzen
yunzen

Reputation: 33439

It can be done with display: flex;

.costAHX {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.innerRealCostAHX {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 316px;
}

.coverageDetailsOuterAHX {
  flex-shrink: 1;
  flex-grow: 100;
  flex-basis: 319px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}


/* For presentation purposes */

div {
  border: 1px solid;
  padding: 20px;
  position: relative;
}

div[title]:before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 215, 0, 0.5);
  font-size: 10px;
  padding: 3px;
}
<div class="costAHX" title="div1">
  <div class="innerRealCostAHX" title="div2">
    <a href="#"> It is Liliput </a>

  </div>

  <div class="coverageDetailsOuterAHX" title="div3">

    <div class="coverageDetailsInnerAHX" title="div4">
      <a href="#"> It is Brobdingnag </a>
    </div>

    <div class="coverageDetailsAHX" title="div5">
      <a href="#"> It is Luuuuuuuuuuuuuuuuuuggnaaaaaaaaaaaaaaaaaaagg</a>
    </div>

  </div>
</div>

Upvotes: 2

Related Questions