CODEWITHSUNDEEP
csshtml
user1319385
user1319385

Reputation: 1

multi divs centered

I have 2 divs with 3 divs inside them, all 2 wrapped around one big div. I try and center it and its not working. Here is my code:

<div stye="margin-left:auto; margin-right:auto; width: 1210px;">
<div id="left" style=" float:left; width: 606px; height: 506px;">

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A picture of a cool guy wearing our shirt will go in here.</h1></div>

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; border-left:0px; height:200px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A product image will go in here.</h1></div>  

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0;border-top:0px; border-left:0px; height:300px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A tight product image will go in here.</h1></div>  

</div>
<div id="left" style="float:left; width: 604px; height: 506px;">

    <div style="top:0px; float:right; width:300px; border: 2px solid #FF0; border-left:0px; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A picture of a cool guy wearing our shirt will go in here.</h1></div>

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0; border-left:0px; height:200px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A product image will go in here.</h1></div>  

    <div style="top:0px; float:left; width:300px; border: 2px solid #FF0;border-top:0px; border-left:0px; height:300px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;"><h1>A tight product image will go in here.</h1></div>  

</div>
</div>

Upvotes: 0

Views: 84

Answers (2)

Will
Will

Reputation: 20235

You should use CSS classes to be more efficient. You also have two divs with id="left". Element ids are unique so you should use a class instead.

<style type="text/css">
.myclass {
    top:0px; float:left; width:300px; border: 2px solid #FF0; height:502px; text-align:center; font-family: Myriad Pro, Arial, sans-serif; color:#FFF;
}
</style>
<!-- this div gets all style from .myclass definition -->
<div class="myclass">content</div>

Also to center the divs, add the style margin: auto;

Upvotes: 1

Radu
Radu

Reputation: 1177

margin: 0 auto; width: 1210px;

you also have a typo "stye" :)

Upvotes: 2

Related Questions