Overlapping Divs in HTML

Question

Ich möchte die Divs relativ zueinander arbeiten. Die divs überlappen, wenn ich Zeilen in der Gridview hinzufüge. Sie können das Problem im Bild sehen. Ich bin nicht gut in HTML/CSS. Bitte hilf mir.

Dies ist der 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

Sie sollten wirklich clear die float s. Geben Sie nicht so viele <br /> für das richtige Layout. Die Lösung besteht darin, clear: both auf der .women_main zu verwenden.

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>

Wenn die rechte Seite zu lang ist:

.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>

Sie konnten feststellen, dass beide anpassen richtig auf die Höhe.

Answer 2

Ich habe Ihren Code ausgearbeitet und hiermit den Codepen-Link angehängt. Bitte überprüfen Sie, ich hoffe, dies wird Ihnen helfen.

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