CODEWITHSUNDEEP
csshtml
user2905081
user2905081

Reputation: 21

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%;
}
}

Upvotes: 1

Views: 4927

Answers (4)

Deep Dizzy
Deep Dizzy

Reputation: 303

The main div #wrapper you can center by doing 

#wrapper{ 
 width: 980px; /*1024, percentage*/
 margin-left: auto; 
 margin-right: auto;
}

or you can align in center by making margin:0 auto; and removing margin-lef: auto; margin-right: auto;

Upvotes: 0

user2905081
user2905081

Reputation: 21

I fixed the problem by removing the repeated div-id's and replacing them with div-class

Upvotes: 0

Steve
Steve

Reputation: 8640

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:

Upvotes: 1

ShayR
ShayR

Reputation: 169

If you want to center the main div (wrapper), change he css like this:

#wrapper{
width:980px /*Could be any width*/
margin:0 auto;
}

This will center the main DIV wrapper.

Upvotes: 1

Related Questions