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

Posted by Zach Saul
Zach Saul
11,156 Points

Confused about how to create DIVs to position content.

My intention on this page is really simple: I want to have 2 Div's underneath the nav bar of EQUAL height, and EQUAL width each taking up 50% of the viewport's width. I have placed a thin border on each div so it's easy to see where each div is rendering on the page.

I cannot seem to figure out a way to get them to align evenly side by side. any ideas?

this seems like it should be so simple but I can't seem to figure it out.

here is my CSS for the 2 DIVs:

each was given a semantic class name, and again my intention is to have the boxes sit side by side (tagline on the left, login-form on the right) the sole purpose of the borders was to see where the containers begin and end. 

.tagline {

    box-sizing: border-box;
    display: inline-block;

    overflow: auto;

    color: #9d330e; 

    font-family: 'Open Sans'; 
    font-size: 4.25em; 
    font-weight: bolder;

    width: 50%; 
    text-align: right;
    margin: 0; 
    padding: 0;

    border-style: solid;
    border-width: thin;
    border-color: #000;
}

.login-form {

    box-sizing: border-box;
    display: inline-block;
    overflow: auto;

    color: #fff; 

    width: 50%; 
    margin: 0;
    padding: 0; 

    border-style: solid;
    border-color: #000; 
    border-width: thin;
}

1 Answer

Shivam Sadachar
Shivam Sadachar
8,109 Points
Shivam Sadachar
Shivam Sadachar
8,109 Points

Hi, An easy fix to this problem is to add this styling to your tagline element 

float:left;

Now if you're wondering why the two divs aren't side by side even though you gave them a display of inline-block, the problem is not in your CSS but in your HTML. In your HTML, try removing any whitespace between your divs because HTML is interpreting the whitespace between your divs as an actual space and it moves your login-form div below your tagline div. (Your code should like this:) html <div class="tagline"></div><div class=".login-form"> Personally, I prefer having whitespace in my HTML to keep my code clean, so I use the float method ( and I also apply a clearfix if necessary).

Hope that helps :)