-1

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 ?

Yong
  • 1,622
  • 1
  • 4
  • 29
Anurag Mishra
  • 647
  • 3
  • 15
  • 31
  • 1
    Have a look at `flex` or `grid` CSS styles, this can make what you're trying to do much simpler. A lot of the time, there's additional space (i.e. a new line between each element) that's not accounted for in these widths causing it to wrap. You can test this by reducing the width of `secondDiv` or `thirdDiv` by a couple of percent and see if they end up on the same line – Rylee Feb 15 '22 at 06:52
  • @Rylee Or you know, just remove the `'` in `display: 'inline-block'` :P – pso Feb 15 '22 at 06:53
  • @pso I suppose that would solve the issue. I'm assuming (possibly wrongly) that they want the second and third div to "fill up" the rest of the space, not just have a max width. – Rylee Feb 15 '22 at 06:57

5 Answers5

2

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>
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
0

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>
Sahil Thummar
  • 1,926
  • 16
  • 16
0

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>
Arman Ebrahimi
  • 2,035
  • 2
  • 7
  • 20
0

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.

Yong
  • 1,622
  • 1
  • 4
  • 29
0

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>
A Haworth
  • 30,908
  • 4
  • 11
  • 14