Search code examples
csshtmltextalignment

Align a sub divs text with parent div


I am currently working on a website, very simple, but my first one. I am creating the header right now and I can't get my "Big Header"'s text to align with my "Header"'s text.

See, http://www.dummycode.com, for my website.

I want Dummy Code to align with home about projects blog donate but it is below it.

My style CSS is at http://dummycode.com/style.css

The two "methods" in my style sheet are below...

#header { 
    top:0px;
    left:50%;
    width:795px;
    height:100px; 
    box-sizing:border-box;
    margin-left:-397.5px;

    text-align:right;
    background:white;

    padding-top:35px;
    padding-bottom:35px;
    padding-right:10px;

    font-size:30px;
    word-spacing:12px;
    text-transform:lowercase;

    position:fixed;
}
#bigheader {
    padding-left:10px;
    font-size:50px;
    word-spacing:0px;
    text-align:left;
    text-transform:none;
    position:fixed;
}

And my HTML is here...

<div id="header">
<div id="bigheader">
<h>Dummy Code</h>
</div>
    <a class="current" href="/">Home</a>
    <a href="./about">About</a>
    <a href="./projects">Projects</a>
    <a href="./blog">Blog</a>
    <a href="./donate">Donate</a>
</a>
</div>

Solution

  • As you have used fixed position you could just give #bigheader and top value.

    #bigheader {
        // current css goes here
        top: 30px;
    }