Margin auto

[linardzb]

Hey,

Im trying to centre the <div id="about_us_photo" class="grid_7"> inside a <div class="container clearfix"> just underneath the two other divs. Basically I need the <div id="about_us_photo" class="grid_7"> to align right in the middle of the container. It did not work with margin: 0 auto; Was for an hour trying to sort it out, could not. Can someone tell me what might the problem be for this? The code and image are added.

HTML:

<div class="container clearfix">
    <div id="logo" class="grid_2">

        <object data="img/logo.svg" type="image/svg+xml" class="logo">
            <!--[if lte IE 8 ]-->
              <img src="img/logo.svg" alt="Coat of Arms">
            <!--![endif]-->
        </object>

    </div>
    <div id="nav" class="grid_8 omega">
        <ul>
            <li class="about"><a href="#">Tē Krekli</a></li>
            <li class="pricing"><a href="#">Sazinies ar Mums</a></li>
            <li class="locations"><a href="#">Kas Mēs esam</a></li>
            <li class="contact"><a href="#">Blogs</a></li>
        </ul>
    </div>
    <div id="shoping_cart" class="grid_2 omega">
        Shopping cart

    </div>
    <div id="intro" class="grid_12">
        <h1 id="fittext1">Vienkārši, Skaisti un Latviski!</h1>
    </div>
    <div class="about_us grid_6">
        <h2>Par mums...</h2>
        <p>Izskatot neskaitāmas mājaslapas kuras piedāvā TĒ kreklus ar Latvijas pilsētu         ģērboņiem, secināju ka nav neviena mājaslapa, ne ģērboņa kas man ļoti piesaistītu gan vizuāli, gan cenu ziņā.</p>                                     
    </div>
    <div class="about_us grid_6 omega">
        <h2></h2>
        <p>Tad arī nolēmu uzrībināt šo mājaslapu kas piedāvā TĒ krekluskuripatī gan man, gan cerams tev arīdzan. Šie darbiņi ir ļoti vienkārši, tanī pašā laikā arī unikāli un viegli asociējami ar atspoguļotās pilsētas ģērboni. Doma ir paplašināt piedāvajuma klāstu ar vēl dažādiem apģērbiem: piem; Trikotāžas džemperiem ar uzgalvi. </p>                                      
    </div>      
    <div id="about_us_photo" class="grid_7">
        <img src="img/14dfb07.jpg">
        <h4>Esmu Linards</h4>
        <p>Šis ir mans otrs bizness. Atrodos starp Londonu un Rīgu, vairāk gan Londonā. Interesē kas notiek Latvijā un tās kultūrā. Varat mani aizrakstīt man uz šo <span>ī</span>meilu.</p>
    </div>  
    </div>
    <div id="copyright" class="grid_12">
        <p>© 2013 Ģērboņi LV. Visas autortiesības aizsargātas.</p>
    </div>      
</div>

style.css CSS:

#about_us_photo, .grid_7 {
margin: auto;
 }

#about_us_photo p {
float: left;
width: 55%;
 }

#about_us_photo img {
float: left;
margin: 0 35px;
 }

grid.css CSS:

.grid_1 { width: 6.5%; } /* 65px/1000px = 0.065px */


 .grid_2 { width: 15%; } /* 150px/1000px = 0.15px */ .grid_3 { width: 23.5%; } /*      235px/1000px = 0.235px */ .grid_4 { width: 32%;} /* 320px/1000px = 0.32px */ .grid_5 { width: 40.5%; } /* 405px/1000px = 0.405px */ .grid_6 { width: 49%; } /* 490px/1000px = 0.49px */ .grid_7 { width: 57.5%; } /* 575px/1000px = 0.575px */ .grid_8 { width: 66%; } /* 660px/1000px = 0.66px */ .grid_9 { width: 74.5%; } /* 745px/1000px = 0.745px */ .grid_10 { width: 83%; } /* 830px/1000px = 0.83px */ .grid_11 { width: 91.5%; } /* 915px/1000px = 0.915px */ .grid_12 { width: 100%; } /* 1000px/1000px = 1 */

 .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11,           .grid_12 { margin: 0 2% 1% 0; float: left; display: block; }

.alpha{margin-left:0;} .omega{margin-right:0;}

.container{ width: 90%; /width: 1200px;/ max-width: 1200px; margin: auto; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:’ ‘;display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

I DO APOLOGIZE ABOUT BAD FORMATTING AT THE END CODE, EDITOR DID NOT ALLOW TO EDIT IT NICELY.

Thank you

[Paulie_D]

A link to a live site would be easier.

[Senff]

#about_us_photo should have a width assigned to it in order to center it with margin:0 auto;, and it should NOT be floated (which is done through grid_7).

[linardzb]

Thanks guys,

Unfortunately its on my localhost.

Just adjusted the css to:

#about_us_photo, .grid_7  { 

width: 57.5%;
margin: 0 auto;

    }

still nothing

[Senff]

It will still have float: left; because of this line in grid.css:

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11,  .grid_12 { margin: 0 2% 1% 0; float: left; display: block; }

So you’ll need to override that as well, with float:none;

[Paulie_D]

#about_us_photo.grid_7  { <== No spaces 

width: 57.5%;
margin: 0 auto;
float:none;

 }

I think would get it done, wouldn’t it?

[linardzb]

Sorted,

Thank you

[Author]

Posts