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

Html – Put contents above one another that are not beside each other in the markup

How can I modify the css below such that Box 3 is right below Box 1?

Without modifying any of the html or at least semantically box-1, box-2, box-3, box-4 has to be in this specific order with that layout.

All elements have flexible height.

https://jsfiddle.net/kuyfjho7/

#parent {
  width: 1100px;
}

#box-1 {
  background: green;
  height: 100px;
  width: 200px;
  float: right;
}

#box-2 {
  background: red;
  height: 200px;
  width: 800px;
}

#box-3 {
  background: yellow;
  height: 150px;
  width: 200px;
  float: right;
}

#box-4 {
  background: gray;
  height: 1000px;
  width: 800px;
}
<div id="parent">
  <div id="box-1">Box 1</div>
  <div id="box-2">Box 2</div>
  <div id="box-3">Box 3</div>
  <div id="box-4">Box 4</div>
</div>

Layout needed:

enter image description here

Tags:

2

Answers


  1. 0

    Using flexbox and specifying the order for each box might work. This may not work as you want with variable height content though since these are all in the same "row" it will change the height of it’s sibling as well.

    #parent {
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#box-1,
#box-3 {
  width: 200px;
}

#box-2,
#box-4 {
  width: 800px;
}

#box-1 {
  background: green;
  order: 2;
}

#box-2 {
  background: red;
  order: 1;
}

#box-3 {
  background: yellow;
  order: 4;
}

#box-4 {
  background: gray;
  order: 2;
}
    <div id="parent">
  <div id="box-1">Box 1</div>
  <div id="box-2">Box 2</div>
  <div id="box-3">
    <p>Box 3</p>
    <p>lots of content!</p><p>lots of content!</p><p>lots of content!</p><p>lots of content!</p><p>lots of content!</p>
  </div>
  <div id="box-4">Box 4</div>
</div>
    Login or Signup to reply.
  2. 0

    In my experience, You could set display:flex CSS property to the parent div tag and set order as you wish to the child divs such as "order: 4".
    And Set the "align-items:start || end || …" to the child divs so that they can have their correct width and height. Hope this could help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search