CODEWITHSUNDEEP
htmlcss
Ayan
Ayan

Reputation: 2918

Prevent the overlapping of divs

I have seen some questions about this problem. Tried to solve but cant find how to do it.

Here is my fiddle (Code done till now for mobile view only). My problem is that the action_container and main_container gets overlapped.

HTML

<body>
<?php include('./includes/header.php'); ?>

<div id="greetings_container">
        <div id="greeting_line">Hi<br>Ayan,</div>
        <div id="meal_time"><span>Breakfast?</span></div>
        <div id="down_arrow"><i class="fa fa-angle-double-down fa-lg" aria-hidden="true"></i></div>
</div>

<div id="action_bar">
    <input type="button" id="cart" name="cart" value="Cart">
    <input type="button" id="filter" name="filter" value="Filter">
</div>
<div id="main_container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
</div>

</body>

CSS

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
{
html, body
{
    height:100%;
    clear:both;
}
#greetings_container
{
   background-color: hsla(0,5%,52%,1.00);
   background-image: url(../images/bg1.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   width:100%;
   height:calc(100% - 65px);
   word-wrap:break-word;

}
#greeting_line
{
    text-align:center;
    color:#FFFFFF;
    font-size:78px;
    padding-top:20%;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:25px;
}
#meal_time
{
    background-color: #ED734F;
    text-align:center;
    color:#FFFFFF;
    font-size:35px;
    border-radius:35px;
    margin-left:15%;
    margin-right:15%;
    word-wrap:break-word;
}
#down_arrow
{
    color:#FFFFFF;
    font-size:36px;
    text-align:center;
    position: absolute;
    bottom:20px;
    width:100%;
    -webkit-animation: transform-bounch 2500ms linear 1000ms infinite normal;
    -moz-animation: transform-bounch 2500ms linear 1000ms infinite normal;
    animation: transform-bounch 2500ms linear 1000ms infinite normal;
}
#action_bar
{
    background-color:#DFDBDB;
    color:#FFFFFF;
    clear:both;
}
#cart
{
    position:absolute;
    right:0;
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    border:#1C9767 1px;
    font-size:18px;
}
#filter
{
    position:absolute;
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    border:#1C9767 1px;
    font-size:18px;
}
#main_container
{
    width:100%;
    font-size:18px;
    /*margin-top:60px;*/
}

}

Upvotes: 0

Views: 57

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Remove position:absolute on #cart and #filter then set float: right on #cart

#cart
{
    /*position:absolute;*/
    right:0;
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    padding: 10px;/*add this*/
    float: right;/*add this*/
    border:#1C9767 1px;
    font-size:18px;
}
#filter
{
    /*position:absolute;*/
    width:20%;
    height:10%;
    background-color:#20AC76;
    color:#FFFFFF;
    padding: 10px;/*add this*/
    border:#1C9767 1px;
    font-size:18px;
}

Upvotes: 2

user5637048
user5637048

Reputation:

Put both divs in a bigger div and style position to inline block. So do something like this:

<div style="position: inline-block;">
  <div id="action_bar">
  <input type="button" id="cart" name="cart" value="Cart">
  <input type="button" id="filter" name="filter" value="Filter">
  </div>
  <div id="main_container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class     aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos     himenaeos. Curabitur sodales ligula in libero.
  </div>
</div>

Upvotes: 1

Related Questions