Why isn't the div coloring the full height?

Question

Edit: Plunker preview here - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview

Probably a terrible title but after a minute I haven't been able to come up with better.

I have created a simple page with angularjs and some html. The issue I'm having is actually with css. When you click on a menu item, it highlights the block, but I'm getting a weird 1-2 px border that isn't highlighted along the bottom.

Been at this for hours and seriously going up the wall with it...

My html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />

<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>

<body>


<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
    <!-- The navigation menu will get the value of the "active" variable as a class.
         The $event.preventDefault() stops the page from jumping when a link is clicked. -->
    <div id="header">
        <div id="title">
            <h3 class="pull-left company-heading">Tool Title</h3>
        </div>
        <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">

            <!-- When a link in the menu is clicked, we set the active variable -->

            <a href="#" class="home" ng-click="active='home'">Home</a>
            <a href="#" class="projects" ng-click="active='projects'">Projects</a>
            <a href="#" class="services" ng-click="active='services'">Services</a>
            <a href="#" class="contact" ng-click="active='contact'">Contact</a>
        </nav>
    </div>
    <!-- ng-show will show an element if the value in the quotes is truthful,
         while ng-hide does the opposite. Because the active variable is not set
         initially, this will cause the first paragraph to be visible. -->

    <p ng-hide="active">Please click a menu item</p>
    <p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>

</html>

My css:

*{
    margin:0;
    padding:0;
}

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
}

#header {
    position: relative;
    background: none repeat scroll 0% 0% #185A82;
    margin-bottom:45px;
    line-height: normal;    
}

#title {
    display:inline-block;
    padding: 18px 200px;
    color:#fff;
    font-weight:bold;
    font-size:18px;

}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside, nav{
    display: block;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}


/*-------------------------
    The menu
--------------------------*/

nav{
    display:inline-block;
    border-radius:2px;

}

nav a{
    color:#fff;
    text-transform: uppercase;
    display:inline-block;
    padding: 18px 30px;
    text-decoration:none !important;
    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    transition:background-color 0.25s;
}

nav a:first-child{
    border-radius:2px 0 0 2px;
}

nav a:last-child{
    border-radius:0 2px 2px 0;
}

nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
    background-color:#e35885;
}

p{
    font-size:22px;
    font-weight:bold;
    color:#7d9098;
}

p b{
    color:#ffffff;
    display:inline-block;
    padding:5px 10px;
    background-color:#c4d7e0;
    border-radius:2px;
    text-transform:uppercase;
    font-size:18px;
}

Thanks, done so here: http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview — Aman Chawla, Sep 09 '14 at 07:52
You are using two different methods of displaying elements next to each other. Either use floats and clear, or use display inline. See this question for more info: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell — timo, Sep 09 '14 at 09:04

score 5 · Answer 1 · answered Sep 09 '14 at 08:10

5

You can try to add on your a tags the following css

line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/

hope it will help you

answered Sep 09 '14 at 08:10

Polochon

2,199
13
13

Abdulla khan · Answer 2 · 2014-09-09T07:59:49.760

3

Update the below css values with:

nav a{
  color:#fff;
  text-transform: uppercase;
  display:inline-block;
  padding: 22px 30px;
  text-decoration:none !important;
  -webkit-transition:background-color 0.25s;
  -moz-transition:background-color 0.25s;
  transition:background-color 0.25s;
}

edited Sep 09 '14 at 07:59

answered Sep 09 '14 at 07:53

Abdulla khan

758
5
11

That makes the blue bar smaller, but now the pink is slightly too tall. Is there some elegant solution by which I can make the highlight fill the height of the bar? – Aman Chawla Sep 09 '14 at 07:55
In that case increase the padding value of anchor tag by nav a{22px 30px} – Abdulla khan Sep 09 '14 at 07:58
Thanks for the follow up response. With this I see the exact same thing, it seems to be ever so slightly beyond the blue bar. – Aman Chawla Sep 09 '14 at 08:04
It works fine @ my chrome browser, you can use firebug(firefox) or inspect element in chrome to match the padding values as per your requirement. – Abdulla khan Sep 09 '14 at 08:07
Hmm, that's exactly what I am using. Perhaps my eyes deceive me. – Aman Chawla Sep 09 '14 at 08:08
As you were the first person to posit this solution, I will certainly select your answer as "correct" if this is what I end up using. Thanks for your time. – Aman Chawla Sep 09 '14 at 08:12

score 2 · Answer 3 · answered Sep 09 '14 at 07:58

2

Your titles padding is the problem

This will work:

#title {
  display: inline-block;
  padding: 14px 200px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

answered Sep 09 '14 at 07:58

Beowolve

548
2
13

You seem to have come up with the same solution as Akwebmedia. First, how are you two calculating 14 (or is it just guess/check)? Second, it still overflows a bit, see my response to Akwebmedia. – Aman Chawla Sep 09 '14 at 08:00
sorry was too late, well adjust the padding of the links then: padding: 22px 30px; – Beowolve Sep 09 '14 at 08:02

score 2 · Answer 4 · answered Sep 09 '14 at 08:00

Update your css style of nav > a with this:

nav a {
    color: #fff;
    display: inline-block;
    padding: 23px 30px 19px;
    text-decoration: none !important;
    text-transform: uppercase;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    transition: background-color 0.25s; 
}

Otherwise you can set a custom height to the a.

Tobías · Answer 5 · 2014-09-09T09:28:14.330

Trying to adjust the size of the elements by using padding can be tricky. In this case it is better that the size is determined by the content of the elements. I propose the following changes:

First remove the padding of #tittle and instead add the desired positioning.

#title {
    display:inline-block;
    position: relative;
    top: 18px;
    left: 200px;
    color:#fff;
    font-weight:bold;
    font-size:18px;
}

For the height of #header match the height of the child elements, we must include an element with style clear: both. This is so because #nav has float: right and the floats algorithm will extract the box from the normal flow. (reference: Visual formatting model )

HTML:

  <div id="header">
    <div id="title">...</div>
    <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
    <div class="clear"></div>
    ...
  </div>

CSS:

.clear {
  clear: both;
}

Finally, the elements contained in #header that we do not want in the normal flow are include in a div with the style float: left.

I updated your example: http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview

I hope this helps.

Michael Kang · Answer 6 · 2014-09-09T08:29:35.610

When you use floats, you need to add a "clear" style to clear the floats:

<br style="clear:both" />

This is because anything inside of a div that's floated does not take space inside the div. The clear float CSS instructs the DIV to ensure that it encloses its floated children.

For example:

  <div id="header">
    <div id="title">
      <h3 class="pull-left company-heading">Tool Title</h3>
    </div>
    <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
      <!-- When a link in the menu is clicked, we set the active variable -->
      <a href="#" class="home" ng-click="active='home'">Home</a>
      <a href="#" class="projects" ng-click="active='projects'">Projects</a>
      <a href="#" class="services" ng-click="active='services'">Services</a>
      <a href="#" class="contact" ng-click="active='contact'">Contact</a>
    </nav>
    <br style="clear:both" />
  </div>

You also have to remove the margin-bottom CSS style for your header.

#header {
    position: relative;
    background: none repeat scroll 0% 0% #185A82;

    line-height: normal;    
}

Demo Plunker

This actually makes the visible gap under the highlighted block even bigger :-/ — Aman Chawla, Sep 09 '14 at 08:06
You also have to remove the margin-bottom CSS style that you have in your #header. — Michael Kang, Sep 09 '14 at 08:30

score 1 · Answer 7 · answered Sep 09 '14 at 09:30

1

Change the padding of nav a to

nav a {
    padding: 21.5px 30px;
}

answered Sep 09 '14 at 09:30

Leon

81
1
8

Why isn't the div coloring the full height?

7 Answers7