Border-bottom not showing correctly


Tags: html,css

Problem :

I am trying to put a border-bottom to the titles on my page, but It seems to underline the whole div instead of just the text. Does anyone whats causing this and how to fix it?

http://jsfiddle.net/1sue4ueg

html

<body>
<div id="mainContent">

    <div id="infoContent">
        <a href="#"><img src="./style/logo.svg" class="logo" alt="Drift"></a>
         <canvas resize="true" id="canvas" style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="657" height="780" data-paper-scope="1"></canvas>
    </div>

    <div id="projectContent" style="height: auto;">
            <div id="newBlock">
            <div id="aboutBlock">
                           <p>DRIFT is een nieuwe organisatie in het Gentse: een ‘ontwikkelingsplatform’ dat zich volledig richt op de artistieke en zakelijke ontwikkeling van jonge kunstenaars.</p>
            </div>
            <div id="newsBlock">
                <div id="newsHead"><div id="newsTitle" class="blockTitle"><p>NIEUWS</p></div><div class="newsDate">13.12.2015</div> </div><div id="newsContent">PARADIS — Hof van Eede & LOD
Componist<br>Thomas Smetryns koopt online een oude foto van een jonge danseres. Even later valt er een lijvig fotoboek in zijn brievenbus. Een leven in puzzelvorm, zo lijkt het.</div>         </div>

        </div>

        <div id="recentWorkBlock">
                <div id="recentWorkTitle" class="blockTitle">BINNENKORT</div>
                <table>
                    <tbody>

                        <tr class="blockRecentProjet" data-projet="17"><td class="colNameProj"><span class="nameProject">Kein applaus für scheisse</span></td><td class="colNumberProj "><span class="">17.12.2015</span></td></tr>
                        <tr class="blockRecentProjet recentSelectedProject" data-projet="16"><td class="colNameProj"><span class="nameProject">Kokokito</span></td><td class="colNumberProj "><span class="">24.12.2015</span></td></tr>
                        <tr class="blockRecentProjet" data-projet="15"><td class="colNameProj"><span class="nameProject">We don’t speak to be understood</span></td><td class="colNumberProj "><span class="">06.01.2016</span></td></tr>
                        <tr class="blockRecentProjet" data-projet="14"><td class="colNameProj"><span class="nameProject">So you can feel</span></td><td class="colNumberProj "><span class="">22.01.2016</span> </td></tr>
                        <tr class="blockRecentProjet" data-projet="13"><td class="colNameProj"><span class="nameProject">Mystery Magnet</span></td><td class="colNumberProj "><span class="">12.02.2016</span>

                    </td>
                    </tr>
                    </tbody>
                    </table>
            </div>

<div id="newsBlock">
                <div id="newsHead"><div id="newsTitle" class="blockTitle">DRIFT ORGANISEERT</div><div id="newsContent">
LAB — Vrijplaats voor experiment, ontmoeting en uitwisseling van artiesten voor/tijdens het creatieproces.<br><br>
OP DRIFT — Ad hoc-creatiesessies waarin artistieke talen elkaar kruisen en uitmonden in hogedruktoonmomenten bij In de Ruimte<br><br>
DE AVONDEN — Leessalon in NTGent: hedendaags repertoire en nieuwe stukken worden samen gelezen en bediscussieerd met een groep jonge acteurs, makers, regisseurs en dramaturgen; begeleid door NTGent.<br><br>
WORKSHOPS — Vanaf 2017 organiseert DRIFT workshops rond verschillende inhouden, vormen en disciplines, i.s.m. diverse partnerorganisaties.<br><br>
RESIDENTIES — Ontwikkelingsresidenties vanaf 2017.</div>            </div>

        </div>

                <div id="contactBlock">
                    <div id="contactTitle" class="blockTitle">CONTACT:</div>
                    <div id="listContact">
                        <div class="personnalInfo">
                            <a href="#">
                           <p>Campo Victoria<br>
Fratersplein 7<br>
9000 Gent<br>
Ruth Mariën <br>
+32497186317<br>
info@drift.be

<div id="contactBlock">
                    <div id="contactTitle" class="blockTitle">MAATSCHAPPELIJKE ZETEL</div>
                    <div id="listContact">
                        <div class="personnalInfo"
<p>Kouter 108<br>
9000 Gent<br>
Ondernemingsnummer: 633756230</p>
            </a>
                        </div>
                    </div>

                </div>
    </div>
</div></body></html>

css

body, html
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body, html, div, p, table, th, tr, td, li, ul, form, img
{
    margin: 0;
}

body
{
    -webkit-font-smoothing: antialiased;

    -moz-font-feature-settings: "liga", "kern";
    -moz-font-feature-settings:"liga=1, kern=1";
    -ms-font-feature-settings:"liga", "kern";
    -o-font-feature-settings:"liga", "kern";
    -webkit-font-feature-settings:"liga", "kern";
    font-feature-settings: "liga", "kern";
}

/*
@font-face
{
    font-family: Swiss!important; 
    src: url('AtlasGrotesk-Medium.otf');
}
*/

@font-face {
    font-family: "Swiss";
    src: url("swiss-721-medium-bt.eot");
    src: url("swiss-721-medium-bt.eot#iefix") format("embedded-opentype"),
    url("swiss-721-medium-bt.woff") format("woff"),
    url("swiss-721-medium-bt.ttf") format("truetype"),
    url("swiss-721-medium-bt.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

.logo {
  display: block;
  padding-top: 15px;
  width: 275px;
  height: auto;
}

canvas[resize] {
    width: 100%;
    height: 100%;
}


.blockTitle
{
    font-family: Swiss!important; 
    font-size: 8pt;
        line-height: 12pt;
    display: inline-block;
    vertical-align: top;
        height: 10px;
        margin-bottom: 15px;
}

.blockTitle > p {
    border-bottom: 3px solid black;
}

#mainContent
{
        position: absolute;
        left: 15px;
        right: 15px;
        top: 0px; /*7px;*/
        /*padding-top:6px;*/
        bottom: 0px;
        overflow: auto;

    /* min-width: 984px;  1024 - 2x20 */
        /*
    margin-left: 10px;
        margin-right: 10px;
        margin-top: 7px;
        */
}

#infoContent
{
    /*width: 624px;*/
    width: 580px;
    display: inline-block;
    z-index: 42;
    position: relative;
    height: 100%;
    overflow: hidden;
    /* background-color: #fff; */
}


#wrapperRight {
    right: 0px;
    cursor: e-resize;
}
#wrapperLeft {
    left: 0px;
    cursor: w-resize;
}

.navArrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;

    z-index: 99;
}

#projetsList
{
    position: relative;
}

#mainTitles
{
    margin-top: 6px;
    height: 10px;
}

#mainTitles > div
{
    display: block;
    float: left;
}

#mainInfoTitle
{
    /*
    margin-left: 105.7px;
    width: 105.7px; */
    margin-left: 98.3px;
    width: 98.3px;
    height: 10px;
   /* display: inline-block;*/
}

#mainInfoTitle a:visited,
#mainInfoTitle a:active,
#mainInfoTitle a:hover,
#mainInfoTitle a
{
    text-decoration: none;
    color: black;
}

#aboutTitle, #overviewTitle
{
    /*width: 105.7px;*/
    width: 98.3px;
    display: inline-block;
    height: 10px;
}

#overviewTitle
{
    /*margin-left: 105.7px;*/
    margin-left: 98.3px;

    cursor: pointer;
}

#recentWorkTitle
{
    /*margin-left: 105.7px;*/
    margin-left: 98.3px;
}

#newBlock
{
    margin-top: 3px;
}



/** 5 most recents projects **/

.blockRecentProjet
{
    font-family: Swiss!important; 
    font-size: 8pt;
        line-height:  10pt;
    /*width: 250px;*/
        cursor: pointer;
}

.blockRecentProjet .colNameProj
{
    /*width: 211.4px;*/
    width: 196.6px;
}

.blockRecentProjet.recentSelectedProject .colNumberProj
{
    color: blue;
}


#aboutBlock
{
    font-family: Swiss!important; 
    font-size: 15pt;
    line-height: 16pt;
    text-align: left;
    padding-top: 15px;
}
/*
#aboutBlock .line1 {
    letter-spacing: 0;
}
#aboutBlock .line2 {
    letter-spacing: -0.010em;
}
#aboutBlock .line3 {
    letter-spacing: -0.005em;
}
#aboutBlock .line4 {
    letter-spacing: 0;
}
#aboutBlock .line5 {
    letter-spacing: 0.015em;
}
*/

#aboutBlock .line1 {
    letter-spacing: -0.015em;
}
#aboutBlock .line2 {
    letter-spacing: 0.0em;
}
#aboutBlock .line3 {
    letter-spacing: 0.0em;
}
#aboutBlock .line4 {
    letter-spacing: 0.015em;
}
#aboutBlock .line5 {
    letter-spacing: -0.015em;
}
#aboutBlock .line6 {
    letter-spacing: 0.0em;
}

/** News block style
**/
#newsBlock
{
    margin-top: 10px;
    font-family: Swiss!important; 
    font-size: 15pt;
    line-height: 17pt;
}

#newsBlock .newsDate, #newsBlock #newsTitle
{
    display: inline-block;
    height: 10px;
    line-height: 12pt;
}

#newsBlock #newsTitle
{
    /*width: 95.7px;
    margin-left: 105.7px;*/
    width: 200px;
    margin-left: 98.3px;


}

#newsBlock .newsDate
{
    font-family: Swiss!important; 
    font-size: 8pt;
    /*margin-left: 221.4px;*/
    margin-left: 196.6px;
}

#newsBlock #newsContent
{
    /*margin-top: 2px;*/
    text-align: left;
    font-family: Swiss!important; 
    font-size: 15pt;
    line-height: 17pt;

}

/** list of all last projects **/

#recentWorkBlock
{
    margin-top: 10px;

}

#recentWorkBlock table{
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0;
}

#recentWorkBlock table td,
#recentWorkBlock table tr
{
    vertical-align: top;
    padding: 0;
}


#projetsList
{
    margin-top: 2px;
    font-family: Swiss!important; 
    font-size: 8pt;
    line-height:  10pt;

    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2
}

#projetsList .blockInfoProjet
{
    margin-bottom: 0px;
    display: block;
    cursor: pointer;
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */

}

#projetsList .blockInfoProjet .numProjet
{
    /*width: 85px;*/
    /*margin-left: 115.7px;*/
    margin-left: 108.3px;
    display: inline-block;
}

#projetsList .blockInfoProjet .mainInfoProject
{
    /*width: 95.7px;*/
        width: 88.3px;
    display: inline-block;
    vertical-align: top;
}

#projetsList .blockInfoProjet .contentProj
{
    vertical-align: top;
    /*width: 191.4px;*/
        width: 176.6px;
    display: inline-block;
    margin-left: 10px;
}

.projectSelected .numProjet
{
    color: blue;
}

.viewedProj
{
  /*  color: #9400D3;*/
}

#projetsList .titleCategory
{
    margin-top: 12pt;
    /*width: 95.7px;*/
    width: 88.3px;
    display: inline-block;
}
/*
#projetsList .charCategory
{
    width: 105.7px;
    display: inline-block;
}
*/

#projetsList .categoryName
{
    display: inline-block;
}


/**
* Right part
**/

#projectContent
{
    vertical-align: top;
    position: absolute;
    overflow: auto;

    z-index: 20;

    top: 0px;
    /*right: 10px;*/
    /*width: 507px;*/
    width: 580px;
    left: 590px;
    height: 100%;
    /* bottom: 40px; */

    display: inline-block;
}

.wrapperPreview
{
    float: left;
    display: inline-block;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;

    z-index: 30;
}

#infoZoomProject
{
    z-index: 20;

    top: 22px;
    /*bottom: 0px;*/
    position: absolute;
    /*width: 507px;*/
    width: 580px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    cursor: pointer;
}

#infoZoomProject .previewBigImage,
#tempNewBlock .previewBigImage,
#tempOldBlock .previewBigImage
{
    /*width: 507px;*/
    width: 580px;
    height: auto;
   /* max-height: 100%;*/
    max-width: 100%;
}

#tempNewBlock
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    top: 22px;
    /*width: 507px;*/
    width: 580px;
    position: fixed;
}

#tempOldBlock
{
    z-index: 20;

    top: 22px;
    /*bottom: 0px;*/
    position: absolute;

    /*width: 507px;*/
    width: 580px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    cursor: auto;   
}

.zoomImageProject
{
    width: 100%;
    height: 100%;

    overflow: hidden;
}

#infoZoomProject img
{

}


#indexProject, #indexProjectWrapper, #zoomTitleProject
{
    font-family: Swiss!important; 
    font-size: 8pt;
    display: inline-block;
}

#indexProject
{
    color: blue;
}

#indexProjectWrapper
{
    width: 100%;
    height: 20px;
    text-align: center;
    margin: 0 auto;
    padding-top: 4px;
}

#zoomTitleProject
{
  /*  position: fixed;
    bottom: 14px;

    left: 634px;
    right: 15px;
  */
    text-align: center;
    height: 20px;
    /*width: 507px;*/
    width: 580px;
    margin-top: 6px;
}



/**
** zoom on a project
**/
#listPictureProject
{
    display: none;

    position: fixed;
    top : 20px;
    /*width: 507px;*/
    width: 580px;
    /*left: 649px;  634 + 15 */
    left: 605px;
    bottom: 0px;
}

.mainViewDetail
{
    width: 580px;
    height: 100%;
    background-position-x: center;
    background-position-y: top;
    background-size: contain;
    background-repeat: no-repeat;
}

.wrapperEvent
{
    float: left;
    display: inline-block;
    height: 100%;
    cursor: pointer;
}


#wrapperListProject
{
    width: 100%;
    height: 100%;

    overflow: hidden;

}

.imageDetailProject
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    width: 100%;
    height: 172px;

    margin-bottom: 20px;
    text-align: center;

    display: inline-block;
    cursor: pointer;
}

.imageDetailProject img
{
   /* width: 100%*/
   height: 250px;
   margin: 0 auto;
}

.wrapperDetailBlock
{
    width: 49%;
    display: inline-block;
}

#wrapperListProject .leftDetail
{
    margin-right: 2%;
}


/**
** show list of project previews
**/

#listOverviewProjects
{
    display: none;

    position: fixed;
    top : 0px;

    width: 1160px;
    /*left: 649px;*/
    left: 15px;
    bottom: 0px;

}

#wrapperOverview
{
    width: 100%;
    height: 100%;
    padding-top: 23px;
    overflow: hidden;
}

.colOverview
{
    padding: 0 5px;
    width: 24.1%;
    display: inline-block;
    vertical-align: top;
    float: left;
    position: relative;
}

#wrapperOverview .firstCol .previewImageProj
{
    padding-left: 0 !important;
}

#wrapperOverview .lastCol .previewImageProj
{
    padding-right: 0 !important;
}


.blockPreviewOverview
{
    cursor: pointer;
    width: 250px;
    display: inline-block;
    vertical-align: top;
}

.previewMargin
{
    margin-right: 7px;
}

.previewImageProj
{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;

    width: 100%;
    /*height: 200px;*/

    cursor: pointer;

    margin-bottom: 20px;
   /* padding: 0 5px;*/
    text-align: center;

    display: inline-block;
}

.previewImageProj img
{
    width: 100%;
}


/**
* contact block
*/

#listContact
{
    width: 100%;

    overflow: overlay;
}

.personnalInfo
{
    vertical-align: top;
    /*width: 201.3px;*/
    width: 400px;
    float: left;
    font-family: Swiss!important; 
    font-size: 15pt;
    display: inline-block;
    margin-right: 10px;
}

.personnalInfo a, .personnalInfo a:hover, .personnalInfo a:visited
{
    text-decoration: none;
    color: #000;
    cursor: pointer;
}

.BMEMail
{
    letter-spacing: -0.015em;
}



#contactTitle
{
    margin-top: 10px;
    /*margin-left: 105.7px;
    width: 95.7px;*/
    margin-bottom: 4px;
    margin-left: 98.3px;
    width: 150px;
}

.lineHeadProj
{
    display: inline-block;
}

thanks in advance



Solution :

I suggest to you please take span replace of p tag bcz, p tag use for paragraph, if you want work on the same code so modify css

.blockTitle > p {
    border-bottom: 3px solid black;
    display: inline-block;
}

    CSS Howto..

    how can i center a nested div

    How to use setInterval

    How to positioning the tooltip above cursor

    How to fix the top row and first column in a webpage, with only CSS

    How to avoid gaps using Isotope with Masonry layout sortby random

    How to copy the GTK style of a widget and apply it to another?

    CSS column-count and Chrome bug: how to avoid overflow content being cropped

    How to get CSS selectors to work in the Developer Tools for Chrome 17?

    How to change Jquery terminal cursor shape? I want it to be '|' not a block

    How to make iframe use all height available to it

    how to change a css background onclick

    How to animate X number of divs using CSS and javascript?

    CSS: How to set image width larger than the container's [closed]

    How to create dynamic CSS based on user input

    How to generate image background that flips with each duplication in css? [duplicate]

    How to align a link icon after the text via CSS?

    how to change text color hover

    How to contain a scrollable div element completely within another?

    How to add an url to image by css?

    Always show hover text in an appropriate position

    How to manage z-index of navigation menu?

    How do I scrape the table from a website (link provided) using CSS? [closed]

    How to make irregular CSS border

    How can change the style of
      tag in CSS

    how to clip text in css like gmail does to emails subject listings

    CSS border - how to populate content inside div with border

    How can I fix an element to the page that is of a variable distance from the edge of the screen?

    How to use one popup box to display arbitrary number of information respectively?

    How to get Facebook Like Box “Dark Scheme” to work correctly? (Background is transparent.)

    How do I position a div under a fixed position div