Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Boonsuen Oh
Boonsuen Oh
18,788 Points

HTML & CSS coding question

Hi, I'm facing some problem when building a site myself. Here's the code.

<div id="main-header">
    <div id="main-menu">
        <nav>
        <h1 id="logo">&lt;ZAYN OH&gt;</h1>
        <ul>
            <li>&lt;&#47;ABOUT</li>
            <li>BLOG</li>
            <li>CONTACT&gt;</li>
        </ul>
        </nav>
    </div>
  </div>
#main-header {
  height: 490px;
  background-color: red;
  width: 100%;
  box-sizing: content-box;
}   

#main-menu {
  height: 70px;
  background-color: white;
}

#main-menu nav {
  background-color: rgba(0,0,0,0.2);
  margin: auto;
  width: 1040px;
  height: 100%;
  align-items: center;
  display: flex;
}

#logo {
  letter-spacing: 6px;
  background-color: antiquewhite;
  margin: 0 0;
}

#main-menu nav ul {
  list-style: none;
  background-color: aqua;
}

#main-menu nav ul li {
  display: inline-block;
  background-color: beige;
}

Why box-sizing: content-box does not work? What is the solid way to make any text or element inside #main-menu nav vertically centered? Preview can be see here Any help will be appreciated.

4 Answers

Zayn you can make <nav> also "display:flex" as it allowed to make child element also a flexbox. Then you can add "justify-content" for <nav> with values space-around or space-between. Or you can use "float: right" just for <ul>. Sorry, I still don't understand your goal with main-header. If you want to fix height of header you actually did it. It is 490px right now like in your css stylesheet. Or you want this height to be flexible and increase when you are adding something? Maybe you just want to add property "box-sizing:border-box" for prevent adding additional width with padding and border.

Boonsuen Oh
Boonsuen Oh
18,788 Points

Hi, I just figure out that the main-header already covers the height of main-menu, sorry for that. And you just remind a useful property "box-sizing:border-box", very thankful.

"Or you want this height to be flexible and increase when you are adding something?", can you tell me how to do that?

I added float to right to ul but it didn't works, weird. It should floats to the right inside the nav(with grey bg color), right?

I also tried justify-content with those two properties and they works, two main objects <ZAYN OH> and ABO...BL..C.. was successfully aligned to differrent place. And will dig into this property more :).

Thanks for providing those tips.

Zayn, sorry I missed that you asked about vertical alignment. For vertical alignment I know two ways. One of them is flexbox model - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or https://teamtreehouse.com/library/css-flexbox-layout. Another way by using padding-top and padding-bottom.

Boonsuen Oh
Boonsuen Oh
18,788 Points

Thank you I just solved the vertical center layout by adding display flex and align-items center to the parent element. Can you have a look on my site again? There is 3 list(<ul> and <li>) item inside the <nav>, how to make it align to the right inside the nav? How to make main-header without any changes of size(height, width...) when we include something in it just like I put the main-menu in it and the height just increased. I just updated the code. Thanks

Hi, Zayn. Why did you decide that box-sizing:content-box doesn't work in your case? What did you want to make with this property? For aligning text inside the #main-menu nav just add to this element property text-align: center

Boonsuen Oh
Boonsuen Oh
18,788 Points

text-align won't work, it only horizontally center the text inside nav.

Zayn I remembered one more way to attach nav to the right: add "margin-right: auto" to <h1> with logo. For making height flexible you can use "calc()". For more info look here https://developer.mozilla.org/en-US/docs/Web/CSS/calc. Happy to help you