CSS Floating Right and Left

Question

I am attempting to get 2 divs to line up side by side in a parent div then repeat the same on the next row however. When I float the 2 child divs in the second row everything ends up trying to go to the top.

Div Code

<div class="location_row">
<div class="loc_title_div loc_title">

</div>
<div>
    <div class="addr_div addr_text">

    </div>
    <div class="loc_img_div">

    </div>
</div>
</div>
<div class="location_row">
<div class="loc_title_div loc_title">
</div>
<div>
    <div class="addr_div addr_text" >
       </div>
    <div class="loc_img_div">

    </div>
</div>
</div>

CSS Code

.loc_title {
    font-weight: bold;
    font-size: 12pt;
}

.addr_text {
    font-size: 11pt;
    color: #000;
}

.loc_img {
    border: 3px;
    border-color: #1e398d;
    padding: 3px;
    margin-left: 0px;
}

.loc_title_div {
    width: 100%;
    height: 20px;
    color: #fff;
    background: #1e398d;
    padding-left: 5px;
}

.addr_div {
    float: left;
    width: 50%;
}

.loc_img_div {
    float: right;
    width: 50%;
}

.location_row {
}

Answer 1

I think specifying the top attribute for the inner divs will solve your problem.

.addr_div {
    float: left;
    width: 50%;
    top:xx% or xpx;
}

.loc_img_div {
    float: right;
    width: 50%;
    top:xx% or xpx;
}

Need to specify top for the divs in both rows to line up correctly.

Thanks

Answer 2

You need to use property clear to clean up the floated elements of the previous row : Try this --

.location_row{
  clear:both;
} 

The demo http://jsfiddle.net/ukdwE/3/

On this link you can check All About Floats with more options to clear your floats.

Answer 3

try this please

.location_row{
    width:45%;
    float:left;
    margin-right:2%;
}

Answer 4

http：// jsfiddle.net / LbTLr /`“ title =” JS Fiddle Url“>检查网址，这可能会解决您的问题