CODEWITHSUNDEEP
htmlcssfloating
webta.st.ic
webta.st.ic

Reputation: 5169

DIV with float right over DIV with float left

Hi I have a navigation div, which has a div on the bottom of it. This div has two other divs "DIV 1" and "DIV 2" (see on picture). Now I the navigation is closed on a tablet device, so I would show the second div which contains float: right over the first div which contains float: left, like in the picture. How can I do this? Now the first div is over the second. Thanks.

enter image description here

Upvotes: 1

Views: 685

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can do this with Flexbox and media queries just change order of second element to order: -1 , here is Fiddle

.nav {
  height: 200px;
  display: flex;
  align-items: flex-end;
  border: 1px solid black;
}
.one {
  background: #5B9BD5;
}
.two {
  background: #FF0000;
}
.div {
  flex: 1;
  padding: 10px 0;
  border: 1px solid black;
  margin: 5px;
  box-sizing: border-box;
}
@media(max-width: 480px) {
  .nav {
    flex-direction: column;
    align-items: normal;
    justify-content: flex-end;
  }
  .div {
    flex: 0 0 50px;
  }
  .two {
    order: -1;
  }
}
<div class="nav">
  <div class="div one">1</div>
  <div class="div two">2</div>
</div>

Upvotes: 3

Pegues
Pegues

Reputation: 1773

You can try the following, along with media queries to remove the float at 800px:

JSFiddle: https://jsfiddle.net/7ws3m9Lx/

CSS:

.div1,.div2 { width: 50%; }
.div1 { float: left; }
.div2 { float: right; }

@media screen and (min-width: 0) and (max-width: 800px){
    .div1,.div2 { float: none; width: 100%; }
}

HTML:

<div class="parent">
    <div class="div2">DIV2</div>
    <div class="div1">DIV1</div>
</div>

Upvotes: 1

Clemens Himmer
Clemens Himmer

Reputation: 1342

You can use media queries for that purpose.

You can just manipulate your divs at some point to change their style.

@media (max-width: 600px) {
  #someElement {
    float: left;
  }
}

Upvotes: 2

Related Questions