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

Pepe Suarez
Pepe Suarez
18,267 Points
Posted by Pepe Suarez
Pepe Suarez
18,267 Points

Problem with layout

I am trying to layout some div elements in my page, but for some reason im having trouble with the width of my div elements and they do not align well.

Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

this is my code

Div Elements Html 

            <div class="main-div">
                <div class="uno col"><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity. Delay rapid joy share allow age manor six. Went why far saw many knew. Exquisite excellent son gentleman acuteness her. Do is voice total power mr ye might round still.</p> </div>
                <div class="dos col"><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity. Delay rapid joy share allow age manor six. Went why far saw many knew. Exquisite excellent son gentleman acuteness her. Do is voice total power mr ye might round still.</p> </div>
            </div>
David Omar
David Omar
5,676 Points
David Omar
David Omar
5,676 Points

Can you post the css also?

Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

```css .main-div {

            background: lightblue;
            width: 100%;
            height: 100%;



        }

        .main-div div {

            display: inline-block;

        }

        .uno {
            width: 60%;
            margin: 0;
            margin-right: -10px;
            vertical-align: top;
        }

        .dos{
            width: 20%;
            margin: 0;
            margin-left: 20px;
        } ```
Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

The only way is working is if i set the width percentage like the code above, but i know it should work if the width of my two div elemts nested in the main-div equals 100% so, i dont know what i did wrong....

6 Answers

Timothy Hooker
Timothy Hooker
15,323 Points

They should layout if they equal 100% yes but only if margin and padding are set to zero. If there is any padding or margin in play, it will push the div down. .main-div... is there a reason you decided to display that in-line block?

Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

Yes i wanted to do like a main content column for one div and the other a smaller content column to post quotes.

So padding and margin must be zero in in all div elements or in the main div where the other to div elements are nested?

David Omar
David Omar
5,676 Points
David Omar
David Omar
5,676 Points

How exactly do you want them laid out?

Pepe Suarez
Pepe Suarez
18,267 Points
Pepe Suarez
Pepe Suarez
18,267 Points

I am trying to do it like columns

David Omar
David Omar
5,676 Points
David Omar
David Omar
5,676 Points

you have to take into account the margins and padding to add up the width, the reason for your divs not aligning when you put them 50% width is because the extra margin is pushing the second div down. if you add this code:

div {
width: 720px;
padding: 20px;
}

the real width of your div is 760px because your adding 20px to the left and the right.

David Omar
David Omar
5,676 Points
David Omar
David Omar
5,676 Points 
 .main-div {       
    background: red;
    width: 80%  ;
    margin: 0 auto;
}

.main-div div {
    display: block;
    float: left;
    margin: 5%;
}

.uno {
    width: 40%;
    vertical-align: top;
}

.dos{
    width: 40%;
 }

everything adds up to the whole width of your main div

Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points 
.main-div {
            background: lightblue;
            width: 100%;
            height: 100%;
        }

        .uno, 
        .dos {
            display: inline-block;
            margin: 0;
            vertical-align: top;
        }

        .uno {
            width: 70%;
        }

        .dos{
            width: 30%;
        }
Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points

I forgot to add .main-div { padding: 0; };

Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points

Obviously they dont have to be set to zero... just they would have to be set to that if you wanted them to perfectly fill the space with no margin, no border, and no padding. Otherwise, you have to factor each of these into the equation.