Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Linards Berzins
PLUS
Linards Berzins
Courses Plus Student 13,480 Points
Posted by Linards Berzins
Linards Berzins
Courses Plus Student 13,480 Points

Margin auto on grid

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 two class="about_us grid_6" and class="about_us grid_6 omega" 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. I have slightly adjusted the code from BUILD RESPONSIVE WEBSITE series. Her's the code.

about_us_photo, .grid_7 {

width: 60%;
margin: 0 auto;

}

about_us_photo p {

float: left;
width: 60%;

}

about_us_photo img {

float: left;
margin: 0 35px;

}

<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>

1 Answer

ty lacock
ty lacock
2,191 Points
ty lacock
ty lacock
2,191 Points

I believe you cannot use the margin: 0 auto trick to center elements if they contain other floated elements which is the case here with your <img> and your <p>.

Would using text-align: center achieve what you want?