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

Jonathan Martínez
Jonathan Martínez
13,375 Points
Posted by Jonathan Martínez
Jonathan Martínez
13,375 Points

Div alignment! A little question about CSS best practices.

Ok, so I have this:

<body>
<div class="container">
        <div class="logo"></div>
        <div class="buttons"></div>
        <div class="chef"></div>
        <div class="social"></div>
    </div>
</body>

And this CSS:

.container 
{
    height: 100%;
    width: 810px;
    background-color: #999;
}

.logo 
{
    height: 200px;
    width: 520px;
    background-color: white;
    margin: 20px auto;
}

.buttons
{
    height: 50px;
    width: 300px;
    background-color: #0FC;
    margin: 0 auto; 
}

.chef 
{
    height: 300px;
    width: 770px;
    background-color: #0CF;
    margin: 20px auto;  
}

.social
{
    width: 200px;
    height: 25px;
    background-color: #FF0; 
}

As you can see, I have several divs inside a big div container. Everything is centered, but I want the social div (last one) to stick to the right, with a margin of 20 px so everything is in place. Which one is the best way to do this?

If I give social a relative position, I could do this by simply adding the right property with 590px. Is this the correct way to do it? It's not that elegant!

This has been always bugging me while working on CSS. I hope you guys can help!

3 Answers

Howard Slatter
Howard Slatter
8,049 Points

Float the element right is what you need to do.

You may want to Google 'Clearfix'.. after using float on that element, then apply .clearfix to it's parent element (.container).

Also be careful of your spelling, 'container' is spelt differently in your css and html, little things like that will drive you crazy.

Good luck.

Jonathan Martínez
Jonathan Martínez
13,375 Points
Jonathan Martínez
Jonathan Martínez
13,375 Points

Yeah, it was a typo! Ok, I found 3 ways to do it...

  • Adding a div with clear:both after the floated .social.
  • Adding overflow: auto to .container
  • Applying .clearfix to .container

Will use the last one :D Thanks!

Joel Bantly
Joel Bantly
14,752 Points
Joel Bantly
Joel Bantly
14,752 Points

I'm no expert, but try using the Float declaration. So, float: right;

Jonathan Martínez
Jonathan Martínez
13,375 Points
Jonathan Martínez
Jonathan Martínez
13,375 Points

Problem is that the div container has a background color. If I float it to the right, it "floats" and looses it's place on the container div, being below it.

I made a Fiddle so this could be easy to check: http://jsfiddle.net/374Rk/1/

See that adding the float property makes it "leave" the div container!