Jump to content
ike

Move a Div inside a Div below on screen resize.

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>

Share this post


Link to post
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>

Share this post


Link to post
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

×