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 CSS Layout Techniques Display Modes Block vs. Inline Elements

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Overlapping Buttons

So I decided to work through this lesson by building the entire layout from scratch, because if there's any good litmus test for my progress using TreeHouse, it's seeing how far I can go on my own. I think I have done a pretty good job so far, except for these buttons which are currently overlapping both the header tag and the main tag. I put the nav elements inside the header tag, like this:

<div class="container">
            <div class="main-wrapper">
            <div class="header">
                    <div id="logo">Hello World
                    </div>
                    <nav>
                        <ul>
                            <li>Option 1</li>
                            <li>
                                Option 2</li>
                                <li>Option 3</li>
                        </ul>
                    </nav>
            </div>
            <!--END OF HEADER-->

But, as I've said already, the buttons are riding the header and the main elements.

Here's what my css looks like:

body {
    background-color: #3E2D05;
    width: 90%; 
    margin: auto;

}

.header{
    background-color: #968444;
    padding: 20px;
    white-space: nowrap;
}

.main{
    background-color: #EFBD68;

}


.footer{
    background-color: #968444;
}


.main-wrapper {
    width: 90%;
    margin: auto;
}

nav li{
    background-color: #173508;
    display: inline;
    color: white;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    float: left;
}

h1{
    display: inline;
}

#logo{
    font-size: 40px;
    font-style: bold;
    margin-right: 50px;
    display: inline;
    background-color: #210A12;
    color: #A68534;
    font-family: 'Lato', sans-serif;
    float: left;
}

I am genuinely stumped and frustrated that I can't align my own buttons properly. I was so sure the float-left would have done the job, but it seems to have only made things worse.

Any ideas on how to proceed would be much appreciated!

Thanks so much in advance!

Sincerely,

Todd

4 Answers

Andrew Mosley
Andrew Mosley
12,328 Points

It's hard to see what you're aiming for the page to look like but as a quick tip, try using display: inline-block without a float. Also I noticed your body is styled to only 90% of the page width and then the main wrapper to only 90% of that. Not sure if that is the intended goal.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Andrew, your recommendation about the inline-block helped!!

I inspected the element and saw that I needed to change "display: block" to "display: inline-block" in the normalization.css file. Initially I thought this was weird because I almost NEVER touch the normalization file, but I guess it was called for.

I'm a bit a curious about your last comment regarding the body and the wrapper tags. Are they not supposed to be both 90%?? Hahaha.

Thanks so much for your help, Andrew! I appreciate it!

Sincerely,

Todd

Joseph Alejandro
Joseph Alejandro
1,428 Points
Joseph Alejandro
Joseph Alejandro
1,428 Points

I'm not a 100% sure about this and I could be wrong but setting the body to have a 90% width and the main-wrapper also to 90% width will make the wrapper 10% smaller than the width of the body element which is also 10% smaller than the html element or the full with of the site. This is probably almost the same as making the wrapper 20% width and I'm not sure that's what you were aiming for here.

BTW: Sorry if I miss spelled something or couldn't explain myself correctly, I'm still learning English, hope this helps!

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Hi Joseph,

Thanks so much for the reply! And hmmm... that's an interesting idea! I never thought to do that, actually.

I'll do some tinkering on JS Fiddle and see if that works! Thanks again for reaching out ! :)

-T

peterpyne
peterpyne
10,932 Points

Joseph is right in that a percentage value is relative to it's parent. For example: If your body=50%, and it's child, the wrapper=100%, then the wrapper will only ever cover 50% of the page because it's width is relative to it's parent.

Todd Squitieri
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Thanks for the feedback, Peter! Yes, I have since learned my lesson (haha)!

Appreciate the assistance! :)

-T