CODEWITHSUNDEEP
htmlcsslayoutflexboxresponsive-design
Jirin
Jirin

Reputation: 33

Two floating divs in div

I have a div and two divs on one line in this master div. But I want, when I change the browser window, that the second div moves under the first div. I don't want horizontal scroll.

div.footban {
  width: 100%;
  text-align: center;
  display: flex;
}

div.footban div {
  border: solid 1pt black;
  display: table;
  min-width: 300px;
  margin: 0 auto;
}
<div class="footban">
  <div>Hello Hello Hello Hello Hello Hello</div>
  <div>Hello Hello Hello Hello Hello Hello</div>
</div>

Upvotes: 0

Views: 165

Answers (3)

Yves Kipondo
Yves Kipondo

Reputation: 5613

div.footban {
    display: flex;
}

when you set the display property of an element to flex like you did, the flex-direction by default is set to row which put every direct child element on the same line

when you resize you window you can just set some media query that take effect on certain size of your browser window and reset the flex-direction to column and that will put every direct child of the div.footban to be align verticaly and the second div will be under the first one

// I use 768px just for sample purpose

@media all and (min-width : 768px) {
    div.footban {
        flex-direction: column;
    }
}

Upvotes: 1

Naren Verma
Naren Verma

Reputation: 2327

You can also use the @media queries

Just add the display: block

@media all and (max-width:768px){
    div.footban{display: block;}
}

Upvotes: 2

pretzelhammer
pretzelhammer

Reputation: 15135

All you have to do is add flex-wrap: wrap; to div.footban :)

div.footban {
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
div.footban div {
  border: solid 1pt black;
  display: table;
  min-width: 300px;
  margin: 0 auto;
}
<div class="footban">
  <div>Hello Hello Hello Hello Hello Hello</div>
  <div>Hello Hello Hello Hello Hello Hello</div>
</div>

Upvotes: 2

Related Questions