Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Container Element doesnt have height [duplicate]

Tags:

html

css

The Header part of my template doesn't get the height of its nested Elements.

<header id="header">
    <div id="header-inner">
        <div id="top-left">
            <a href="#" title="something" rel="home">Site Title</a>
        </div>

        <nav id="top-right">
            <div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto;}
#top-left {float:left;}
#top-right {float:right;}

I also made a jsfiddle:

http://jsfiddle.net/hqpb3cyc/

The only solution I know is to give the #header and / or #header-inner float:left; or display:inline-block; But I think thats not the right way to do this!?

Hope someone can help me

best regards

like image 675
Hans Ullrich Avatar asked Dec 15 '14 19:12

Hans Ullrich


People also ask

Why does my div have no height?

The reason why the height or the containers is 0 is because you are floating all the content inside them and floated elements don't expand the height (or width) of their parents. As you are floating all elents in row it has 0 height and therfore so has .

How do I keep two side by side DIV elements the same height?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.

How do I keep my DIVs the same height?

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow. Usage: $(object). equalHeights([minHeight], [maxHeight]); Example 1: $(".


2 Answers

You have to clear floats. For example:

<br style="clear: both" />

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}
<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- clear both floats -->
  <br style="clear: both" />
</header>

Addinional you can use pseudo-element :after to clear floats:

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}
#header-inner:after {
  content: "";
  clear: both;
}
<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>
like image 125
Alex Char Avatar answered Sep 28 '22 00:09

Alex Char


You should clear the floated inner element. You don't even have to change your HTML. You can do that in CSS as well by using the after pseudo element:

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto; border: 1px solid red;}
#top-left {float:left;}
#top-right {float:right;}
#header-inner::after{
    display: block;
    content: "";
    clear: both;
}
<header id="header" role="banner">
	<div id="header-inner">
		<div id="top-left">
			<a href="#" title="something" rel="home">Site Title</a>
		</div>

		<nav id="top-right">
			<div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
		</nav>
	</div>
</header>

Updated fiddle

like image 33
GolezTrol Avatar answered Sep 27 '22 23:09

GolezTrol