Overlapping Divs in HTML [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want the Divs to work relative to each other. The divs are overlapping when I add rows in gridview. You can see the problem in the image. I am not good at html/css. Kindly help me out.
This is the HTML:
<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">...</div>
<br />
</div>
<div class="right-side">
<div class="w_content">...</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="women_main">...</div>
</section>
CSS:
.right-side {
width:50%;
float:right;
margin-top:0px;
padding-top:0px;
}
.left-side{
width:50%;
float:left;
}
.women_main {
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}

Answer 1

You should really clear the floats. Don't give so many <br /> for getting to the right layout. The solution is to use clear: both on the .women_main.
Initial Look:
.right-side {
width: 50%;
float: right;
margin-top: 0px;
padding-top: 0px;
}
.left-side {
width: 50%;
float: left;
}
.women_main {
clear: both;
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}
<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">...</div>
<br />
</div>
<div class="right-side">
<div class="w_content">...</div>
</div>
<div class="women_main">...</div>
</section>
When the right side is too long:
.right-side {
width: 50%;
float: right;
margin-top: 0px;
padding-top: 0px;
height: 600px;
}
.left-side {
width: 50%;
float: left;
}
.women_main {
clear: both;
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}
<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">...</div>
<br />
</div>
<div class="right-side">
<div class="w_content">...</div>
</div>
<div class="women_main">...</div>
</section>
You could find that both adapt correctly to the height.

Answer 2

I have worked out on your code and attached herewith the codepen link. Please check, I hope this will help you.
HTML
<section id="section-1" class="content-current" onclick="setTabIndex(1)">
<div class="left-side">
<div class="women_main">... LEFT CONTENT ...</div>
</div>
<div class="right-side">
<div class="women_main">... RIGHT CONTENT ...</div>
</div>
</section>
<section class="two">
<div class="">... SECTION2 ...</div>
</section>
CSS
.content-current, .two {
width: 100%;
position: relative;
border:1px solid #000;
height:100px;
}
.left-side {
width: 49%;
float: left;
border: 1px solid red;
}
.right-side {
width: 49%;
float: right;
border: 1px solid blue;
}
.women_main {
-webkit-box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
box-shadow: 0px 0px 2px 1px rgba(37, 37, 37, 0.39);
padding: 1em;
border: 2px solid #e3e3e3 !important;
}
.content-current:after {
clear:both;
}
.two {
margin-top: 10px;
background: #ccc;
}
http://codepen.io/WebTechie/pen/EZxNwJ