Html CSS - div center, and left, right alignment

Question

How do I make the top div of the full horizontal length of the main container, while keeping the next two div, .left and .right in flex to each other?

To look like this -

.main {
  border: 1px solid red;
  display: inline-flex;
}

.main div.top {
  border: 1px solid orange;
  width: auto;
  display: inline-block;
}

.main div.left {
  border: 1px solid blue;
}

.main div.right {
  border: 1px solid green;
}

<html>

<body>
  <div class="main">
    <div class="top">
      <h1>top</h1>
    </div>

    <div class="left">
      <h1>left</h1>
    </div>

    <div class="right">
      <h1>right</h1>
    </div>
  </div>
</body>

</html>

Are you willing to add more `div` to achieve this? Or you want this behaviour while maintaining same number of elements — Utsav Patel, Mar 29 '20 at 15:44

score 1 · Answer 1 · answered Mar 29 '20 at 15:45

Another way to do this is with grid:

.main  {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.main  .top {
  grid-column: 1/3;
}

.main  {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
  padding: 4px;
}

.main  .top {
  border: 1px solid orange;
  grid-column: 1/3;
}

.main  .left {
  border: 1px solid blue;
}

.main .right {
  border: 1px solid green; 
}

<div class="main">
  <div class="top">   
    <h1>top</h1>
  </div>
  <div class="left">    
    <h1>left</h1>
  </div>
  <div class="right">    
    <h1>right</h1>
  </div>   
</div>

score 1 · Answer 2 · answered Mar 29 '20 at 15:47

Use display: flex; and flex-wrap: wrap on the parent container, 100% width on the first child and flex-grow: 1 on the other children, or also use percentage widths on the second and third DIVs.

* {
box-sizing: border-box;
}
.main  {
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
}

.main  div.top {
  border: 1px solid orange;
  width:100%;
}

.main  div.left {
  border: 1px solid blue;
  width: 40%;
}

.main div.right {
  border: 1px solid green; 
  width: 60%;
}

<html>
<body>
    <div class="main">
<div class="top">   <h1>top</h1>
   </div>
      
 <div class="left">    <h1>left</h1>
</div>

<div class="right">    <h1>right</h1>
</div>
     
    </div>
</body>
</html>

score 1 · Answer 3 · answered Mar 29 '20 at 16:32

Any width of .left and .right

.main {
      border: 1px solid red;
      display: flex;
      flex-wrap: wrap;
    }
    
    .main div.top {
      border: 1px solid orange;
      width: auto;
      display: inline-block;
      flex: 1 1 100%;
    }
    
    .main div.left {
      border: 1px solid blue;
      flex: 1 1 auto;
    }
    
    .main div.right {
      border: 1px solid green;
      flex: 1 1 auto;
    }

    <div class="main">
      <div class="top">
        <h1>top</h1>
      </div>
  
      <div class="left">
        <h1>left 11111111</h1>
      </div>
  
      <div class="right">
        <h1>right</h1>
      </div>
    </div>

Utsav Patel · Answer 4 · 2020-03-29T15:49:46.310

You can two div to create additional sections.

.main  {
  border: 1px solid red;
  display: flex;
flex-direction:column;
}

.main  div.top {
  border: 1px solid orange;
  width:auto; 
}

.main  div.left {
  border: 1px solid blue;
  flex:1
}

.main div.right {
  border: 1px solid green;
  flex:1 
}
   .main__section2 {
display:flex
   }

<html>
<body>
  <div class="main">
    <div class="main__section1">
      <div class="top">
        <h1>top</h1>
      </div>
    </div>
    <div class="main__section2">
      <div class="left">
        <h1>left</h1>
      </div>
      <div class="right">
        <h1>right</h1>
      </div>
    </div>
  </div>
</body>
</html>

score 0 · Accepted Answer · answered Mar 29 '20 at 15:44

You can try something like this:

I just added 2 extra divs if that is not an issue?

#MainDiv {
  width: 200px;
  border: 1px solid red;
}

.main {
  width: auto;
  display: flex;
  flex-direction: column;
}

#lower {
  display: flex;
  flex-direction: row;
}

.left,
.right {
  width: 100px;
  border: 1px solid black;
}

<html>

<body>
  <div id="MainDiv">
    <div class="main">
      <div class="top">
        <h1>top</h1>
      </div>
      <div id="lower">
        <div class="left">
          <h1>left</h1>
        </div>

        <div class="right">
          <h1>right</h1>
        </div>
      </div>


    </div>
  </div>

</body>

</html>

Html CSS - div center, and left, right alignment

5 Answers5