CODEWITHSUNDEEP
htmlcss
JeanSibelius
JeanSibelius

Reputation: 1581

Why does setting height for the css in my header not force main content down?

I'm trying to adjust how much my header (header.php) "pushes" content down on my web page by setting "height: 100px" in my CSS. It works in a technical sense... when I Inspect Element in Chrome, the header is indeed 100px high. But main page content still "floats" up into the header area.

The web page in question is here.

CSS for the page is pasted here.

There doesn't seem to be any CSS associated with the main content page that manually overrides the height of the header's CSS. Am I fundamentally misunderstanding how all of this works?

Upvotes: 0

Views: 64

Answers (3)

fico7489
fico7489

Reputation: 8560

You are having this problems because you are working with absolute position, try with relative.

Upvotes: 0

WilsonG
WilsonG

Reputation: 199

Or just float the container to the right: 

#headerly {
/* position: absolute; */
float: right;
/* top: 10px; */
/* right: 10vh; */
/* height: 100px; */

}

Upvotes: 0

Steve
Steve

Reputation: 20469

This is because the div is absolutly positioned - remove those css rules and it will work as expected:

#headerly {
    /* position: absolute; */
    /* top: 10px; */
    /* right: 10vh; */
    height: 100px;
}

Upvotes: 1

Related Questions