Question 355126 in Html Question posted in
Some basic documentation can be found here.

Html – Aligning 1 Div above 3 more

Can anyone help with the CSS?

I can get the three columnar divs pretty easily, but can’t figure out how to align a div above them the width of the three below.

I’d also like to align an image in a header row to the left most div below.

I am not at all a web developer; this is a landing page for something else I am working on.

Thanks!

enter image description here

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  .inner-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Add margin for spacing between the two rows */
  }

  .box {
    width: 300px; /* Adjust width as needed */
    margin: 20px;
    background-color: #ccc;
    padding: 20px;
    border-radius: 10px;
  }

  p {
    margin-bottom: 10px;
  }
<div class="container">
  <div class="box">
    <p>This is the first div.</p>
  </div>
  <div class="inner-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    set the container to flex direction column to stack your top box and bottom container (holding the 3 boxes) vertically

    the top box naturally takes up the full width of its container

    the bottom container uses display flex to lay out the boxes and uses space between to evenly distribute them.

    run the code snippet

    .container {
  display: flex;
  flex-direction: column;
  width: 100%; 
}

.top-box {
  background-color: #ccc;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.bottom-container {
  display: flex;
  justify-content: space-between; /* Distributes the column boxes evenly */
  gap: 10px; 
}

.column-box {
  background-color: #ccc;
  padding: 20px;
  border-radius: 10px;
  flex-grow: 1; /* Allows boxes to grow and fill the container */
  text-align: center;
}
    <div class="container">
  <div class="top-box">
    <p>This is the top div that stretches across the entire width.</p>
  </div>
  <div class="bottom-container">
    <div class="column-box">Column 1</div>
    <div class="column-box">Column 2</div>
    <div class="column-box">Column 3</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    The reason that the boxes below are the same size as the box above is that they are all declared the same. So, for a solution, I’ve created a new class called topbox and another called boxes.

    .boxes has all the shared attributes that you would want between the elements, but doesn’t have the width. That is because the top box needs to have a different width to be the same size as the three below.

    The CSS

    .box{
  margin: 20px;
  background-color: #ccc;
  padding: 20px;
  border-radius: 10px;
}

.topbox{
  width: 1050px;
}

.boxes{ 
  width: 300px; 
}

    The HTML

    <div class="container">
  <div class="box topbox">
     <p>This is the first div.</p>
  </div>

  <div class="inner-container">
    <div class="box boxes"></div>
    <div class="box boxes"></div>
    <div class="box boxes"></div>
  </div>
</div>

    For what it is worth, things like Bootstrap and TailwindCSS will make this sort of thing a lot easier in the future. Of course its good to know basic HTML and CSS but these frameworks really take a lot of the hard work out of it.

    Login or Signup to reply.
  3. 0

    A single flexbox with it’s items each set to flex: 1 1 auto seems to work.

    .inner-container {
  display: flex;
  gap:12px;
}
.inner-container > div {
  flex: 1 1 auto;
  height:64px;
  width:64px;
  outline: 2px dashed black;
}
    <div class="container">
  <div class="box">
    <p>This is the first div.</p>
  </div>
  <div class="inner-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search