Jump to content

Move a Div inside a Div below on screen resize.


ike
 Share

Recommended Posts

I have a login script I want to place over an image which I believe I have done.  However, I would like to move the login script div below the image div on small screens. 

I can accomplish this with separate divs using mobile-collapse but can seem to make it work with the div inside the other div.

Any suggestions would be great!

Thanks!!

 

<!doctype html>
<html>
<head>

<META content="IE=11.0000">
<META http-equiv="X-UA-Compatible">

  
<META charset="utf-8">  
<META http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<META name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<TITLE>DIV TEST</TITLE>

 

<style>

*{
 padding: 0px auto;
 margin: 0px auto;
}

img {
     max-width: 100%;
    height: auto;
}


div.image-box {
      position: relative;
   border: 1px solid black;
   width: 95%;
   height: 500px;
   padding: 0px auto;
   margin: 0px auto;
}

div.login {
   position: absolute;
   float: right;
   top: 25px;
   right: 25px;
   width: 175px;
   height: 175px;
   padding: 15px;
   background-color: white;
   border: 2px solid red;
   background-color: rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 780px)
{
 
 
div.mobile-collapse {
 width: auto;
 margin-right: 0px;
 float: none;

div.image-box {
      position: relative;
   border: 1px solid black;
   width: 90%;
   height: 250px;
   padding: 0px auto;
   margin: 0px auto;
}
}


</style>


</head>

<body>

<div class="image-box">
 
<div class="login mobile-collapse">Login Div</div>
</div>


</body>
</html>

Link to comment
Share on other sites

I've got it working to some degree but not sure it is best practice. Just curious Is what I've done suitable?   I added  position: static; to the login div on screen resize and gave it enough top margin to move below the image div.  It was overlapping the body-content div so I gave the body-content div enough top margin to move below the login div.

Here is my new code.

<style>

*{
 padding: 0px auto;
 margin: 0px auto;
}

img {
     max-width: 100%;
    height: auto;
}


div.image-box {
      position: relative;
   border: 1px solid black;
   width: 100%;
   height: 500px;
   padding: 0px auto;
   margin: 0px auto;
}

div.login {
   position: absolute;
   float: right;
   top: 25px;
   right: 25px;
   width: 175px;
   height: 175px;
   padding: 15px;
   background-color: white;
   border: 2px solid red;
   background-color: rgba(0, 0, 0, 0.25);
}


div.body-content{
 width: 100%;
 height: 500px;
 background-color: #333;
}


@media screen and (max-width: 640px)
{

div.body-content{
 margin-top: 275px;
 width: 100%;
 height: 500px;
 background-color: #333;

 
div.mobile-collapse {
 width: auto;
 margin-right: 0px;
 float: none;

div.image-box {
     
   border: 1px solid black;
   width: 100%;
   height: 250px;
   padding: 0px auto;
   margin: 0px auto;
}

div.login {
   position: static;
   right: 25px;
   width: 175px;
   height: 175px;
   padding: 15px;
   margin: 275px auto 0px auto;
   background-color: white;
   border: 2px solid red;
   background-color: rgba(0, 0, 0, 0.25);
}
}


</style>


</head>

<body>

<div class="image-box">
<div class="login mobile-collapse">This is my div</div>
</div>


<div class="body-content"></div>

</body>
</html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...