'how to make two div at the same line with different div without parent div? [duplicate]

I am writing a css code to make two div at the same line but it's not working properly.

Here is my HTML code sample -

.A {
  max-width: 100%;
  display: block;
}

.firstDiv {
  max-width: 100%;
}

.secondDiv {
  max-width: 66.66%;
  display: 'inline-block';
}

.thirdDiv {
  max-width: 33.33%;
  display: 'inline-block';
}

.fourthDiv {
  max-width: 100%;
}
<section class='A'>
  <div class='firstDiv'>
    <input type='text' />
  </div>
  <div class='secondDiv'>
    <input type='text' />
  </div>
  <div class='thirdDiv'>
    <input type='text' />
  </div>
  <div class='fourthDiv'>
    <input type='text' />
  </div>
</section>

firstDiv is coming in full line, I want secondDiv & thirdDiv in same line with 66.66% & 33.33% width respectively. then fourthDiv is coming full line. Only secondDiv & thirdDiv is creating a problem. It is coming in same line due to inline-block but width is not the same which I have given for both div. How can I make secondDiv & thirdDiv in the same line with 66.66 & 33.33% width respectively ?

htmlcss


Solution 1:[1]

Remove ' on display: inline-block;

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.secondDiv {
    width: 66.67%;
    display: inline-block;
}
.thirdDiv {
    width: 33.33%;
    display: inline-block;
}
.fourthDiv {
    max-width: 100%;
}
input{width:100%;}
<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div class='secondDiv'>
        <input type='text' />
    </div><div
     class='thirdDiv'>
        <input type='text' />
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>

Solution 2:[2]

Use 'display: inline-block;' or 'float: left' in second Div.

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.secondDiv {
    max-width: 66.66%;
    display: inline-block; // or float: left;
}
.thirdDiv {
    max-width: 33.33%;
    display: inline-block;
}
.fourthDiv {
    max-width: 100%;
}
<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div class='secondDiv'>
        <input type='text' />
    </div>
    <div class='thirdDiv'>
        <input type='text' />
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>

Solution 3:[3]

One way good in this case is flex:

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.container{
  display: flex;
  gap: 5px;
}
.secondDiv {
    max-width: 66.66%;
}
.thirdDiv {
    max-width: 33.33%;
}
.fourthDiv {
    max-width: 100%;
}
<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div class="container">
    <div class='secondDiv'>
        <input type='text' />
    </div>
    <div class='thirdDiv'>
        <input type='text' />
    </div>
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>

Solution 4:[4]

You can layout the whole section as a grid.

This snippet creates it as a grid with three columns. The first and fourth elements take up the full width and the middle two split a row between them in the ratio 2:1.

A simple way which lets you visualise what is happening is to layout using grid-template-areas:

grid-template-areas:
'first  first  first'
'second second third'
'fourth fourth fourth';


.A {
  max-width: 100%;
  display: block;
  display: grid;
  frid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 'first first first' 'second second third' 'fourth fourth fourth';
  gap: 1vmin;
  /* just so we can see the separate divs */
}

.A>div {
  background-color: lightblue;
  /* just for this demo */
}

.firstDiv {
  grid-area: first;
}

.secondDiv {
  grid-area: second;
}

.thirdDiv {
  grid-area: third;
}

.fourthDiv {
  grid-area: fourth;
}
<section class='A'>
  <div class='firstDiv'>
    <input type='text' />
  </div>
  <div class='secondDiv'>
    <input type='text' />
  </div>
  <div class='thirdDiv'>
    <input type='text' />
  </div>
  <div class='fourthDiv'>
    <input type='text' />
  </div>
</section>

Solution 5:[5]

Here's an alternative solution using grid to achieve the 66% and 33% for the firstDiv and the secondDiv. See the snippet below:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  width: 100%;
}

.A {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.firstDiv {
  grid-column: span 3;
}

.secondDiv {
  grid-column: span 2;
}

.thirdDiv {
  grid-column: 3/4;
}

.fourthDiv {
  grid-column: span 3;
}
<section class='A'>
  <div class='firstDiv'>
    <input type='text' />
  </div>
  <div class='secondDiv'>
    <input type='text' />
  </div>
  <div class='thirdDiv'>
    <input type='text' />
  </div>
  <div class='fourthDiv'>
    <input type='text' />
  </div>
</section>

More on grid here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Sahil Thummar
Solution 3 Arman Ebrahimi
Solution 4 A Haworth
Solution 5

Related Questions