HTML CSS, highest dynamic height div

Question

Good afternoon,

I am trying to make my first responsive layout using Bootstrap Framework.

As a basic layout, I took an example template, and now I'm trying to change this template.

I added the following:

<div class="row col-xs-12 col-md-6 border1" id="HeadBar"> This is not showing up </div> 

Here I want to place the page title (logo and company name)

My CSS code is:

 #HeadBar { background-color: #ffffff; height: 10%; width: 100%; position: relative; display: block; } #HeadBar h1 { margin: 0px; padding: 10px; } 

The problem is that #HeadBar is not displayed at all. Not to mention being responsive.

Adding the H1 tag makes it visible. But I want it to be visible without any additions.

I hope someone can see my mistakes. I know this is very simple. But I need to hang it.

https://jsfiddle.net/ferencik/zb50wgve/

Answer 1

Still need some addition, like adding z-index:1001 (or any value greater than 1000, because you have the navbar-static-top class in your navigator - it has z-index:1000 - which overlaps your #HeadBar ) in #HeadBar

 #HeadBar { background-color: #FFF; width: 100%; position: relative; display: block; height: 10%; z-index: 1001; } 

Answer 2

Add z-index: 9999; in css.

Fiddle

Answer 3

Instead of using z-index I would recommend fixing your position problems, which are the actual cause of the problem.

I also .row class from the #headBar div. .row used for fields inside a container and should not be used in the parent container itself.

In .navbar , I returned position to initial , as it always fixed the top of the parent instead of finding its place below the previous brother.

 /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { margin: 0px; padding: 0px; padding-bottom: 40px; color: #5a5a5a; } /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: absolute; top: 0; right: 0; left: 0; z-index: 20; } /* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper > .container { padding-right: 0; padding-left: 0; } .navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px; position: initial; } .navbar-wrapper .navbar .container { width: auto; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { height: 500px; margin-bottom: 60px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } /* MARKETING CONTENT -------------------------------------------------- */ /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } /* Featurettes ------------------------- */ .featurette-divider { margin: 80px 0; /* Space out the Bootstrap <hr> more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 0px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; } /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } .featurette-heading { font-size: 50px; } } @media (min-width: 992px) { .featurette-heading { margin-top: 120px; } } #HeadBar { background-color: #ffffff; height: 10%; width: 100%; position: relative; display: block; } #HeadBar h1 { margin: 0px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="navbar-wrapper"> <div class="container"> <div class="col-xs-12 col-md-6 border1" id="HeadBar"> This is not showing up </div> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#about">About</a> </li> <li><a href="#contact">Contact</a> </li> </ul> </div> </div> </nav> </div> </div> 

• Jsfiddle

Answer 4

First, the question to solve this is what are you trying to achieve? should this text element be fixed? Static

Secondly, an element with a row class should wrap the elements with col-something-number

Thrid. If nav is static, don't break the navigation component, just add a div at the top, see this script https://jsfiddle.net/6evtc3ry/

Answer 5

CSS

Edit Add a property to the .navbar-wrapper .navbar

  float:left; width:100% 

See the fiddle https://jsfiddle.net/zb50wgve/4/

OR

Structural changes

Add a .row to #HeadBar . and remove the row class from #HeadBar

code:

 <div class="row"> <div class=" col-xs-12 col-md-6 border1" id="HeadBar"> This is not showing up </div> </div> 

See the script: https://jsfiddle.net/zb50wgve/5/

Answer 6

Using bootstrap, you need to separate a series of DIVs with col -... such as this:

  <div class="row" id="HeadBar"> <div class="col-xs-12 col-md-6 border1"> Something to show </div> </div> 

Because col -... divs uses the float system, and the line allows you to clear the DOM. By the way, using% for heights with a static or relative position does not work. You must use pixels, em or whatever you want.

 #HeadBar { background-color: #ffffff; min-height: 50px; // example width: 100%; position: relative; display: block; } 

or just use a fixed or absolute property to set the pourcentage value:

  #HeadBar { background-color: #ffffff; height: 10%; width: 100%; position: fixed; left: 0; top: 0; display: block; } 

Hope this helps!

Answer 7

Just use div instead of applying all classes, just use #headbar when using

 <div id="HeadBar" class=""> This is not showing up </div> 

It will work well

Answer 8

You can use this,

 #HeadBar { display:inline-flex; height:10%; width:100%; }