user2905081 user2905081 - 4 months ago 8
HTML Question

Divs not center aligning

I have two divs, one placed left, one placed right. In the left div I have text, in the right div I have images. When I copy and paste the HTML underneath and repeat the same line of divs, the divs are just off of center. Why is that? here is my code -

HTML -

<div id="wrapper">
<div id="left">

<br><br>

<CENTER> TEXT</CENTER></div>
<div id="right">

<br><br>

<font-size: "14px;">

IMAGE
IMAGE
IMAGE
<br><br>

</td>
</tr>
</div>


CSS -

#wrapper {
width: 100%;
overflow: auto;
}

#left {
float:left;width:48%;margin-right:1%;
}

#right {
float:right;width:48%;margin-left:1%;
}
}

Answer

I can't reproduce the issue you are reporting. If you take a look at this fiddle, you will see that everything works correctly.

This assumes that you are copy/pasting the wrapper div too. If that's not what you want (and you only want to repeat the divs inside the wrapper), then you need to make sure that you are using classes instead of ids for left and right and that the floating gets cleared for every new row. You can achieve this through clear: both on the .left class:

.left {
    clear:both;
    float:left;
    margin-right:1%;
}

You can see the result in this fiddle:

Comments