Али Велиев Али Велиев - 1 month ago 6
HTML Question

Position of div blocks (simple css issue)

I have an issue in my project:

<div id="div1"></div>
<div id="div2"></div>


I do in css for desctop @media (min-width:768px) options display block and float left. For first with 70% for second 30%.
In mobile I need 100% width both of them and need to display div2 on top div1. Float right for first and float left for second not working. Need your help guys.

Answer

If you want div2 on top, your html have to move div2 on top of div1

#div2 {
   width:30%;
   height:300px;
   background:red;
   float:right
}

#div1 {
   width:70%;
   height:300px;
   background:yellow;
   float:left
}

@media only screen and (max-width: 768px) {
#div1, #div2 {
  width:100%;
}
}
<div id="div2">div2</div>
<div id="div1">div1</div>

Comments