DIV таинственным движением вниз

Question

Я проектирую заголовок, и мой текст div движется вниз.

HTML:

CSS:

/*Code written by Oliver Murfett and Caelan Grgurovic 2015 
Start Code*/ 

/*The following are classes that can be added to tags to give them certain features*/ 

.italics, i, em { 
    font-style: italic; 
} 

.bold, b, strong { 
    font-weight: bold; 
} 

.underline, u { 
    text-decoration: underline; 
} 

.hidden { 
    display: none; 
} 

/*Fonts*/ 
@font-face { 
    font-family: "Open Sans-Regular"; 
    src: url(Fonts/OpenSans-Regular.ttf); 
} 

@font-face { 
    font-family: "Trajan Pro Regular"; 
    src: url(Fonts\Trajan Pro Regular.ttf); 
} 
/*The following styles are to the maximize page space*/ 
html, body { 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: white; 
    top: 0px; 
    height: 100%; 
    min-height: 100%; 
} 

#body-container { 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    top: 0px; 
    height: 100%; 
    min-height: 100%; 
} 

header { 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    top: 0px; 
    height: 100px; 

} 

/*The following styles are to style the header*/ 

#header-content { 
    width: 100%; 
    margin: 0px; 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
    height: 100%; 
    min-height: 100%; 
} 

#logo-container { 
    height: 100%; 
    min-height: 100%; 
    display: inline-block; 
    margin-right: 20px; 
} 

#logo-container img { 
    height: 100%; 
    min-height: 100%; 
} 

#header-text-container { 
    height: 100%; 
    min-height: 100%; 
    top: 0; 
    display: inline-block; 
    margin-top: 0px; 

} 

#header-text-top-container { 
    height: 50%; 
    min-height: 50; 
} 

#header-text-bottom-container { 
    height: 50%; 
    min-height: 50; 
} 

#SACRED-HEART-COLLEGE { 
    font-family: "Trajan Pro Regular"; 
    font-size: 34px; 
    color: rgb(30,30,117); 
} 

Весь код здесь: http://jsfiddle.net/j5kcfwLa/

Теперь для моей проблема: # заголовок-текст-контейнер DIV движется вниз, а не оставаться наверху. Я пробовал top: 0;, который ничего не делает, и position: absolute, что делает ненужные шансы. Как я могу заставить этот контейнер к вершине своего родителя?

Answer 1

Изменить это:

#SACRED-HEART-COLLEGE { 
    font-family:"Trajan Pro Regular"; 
    font-size: 24px; 
    color: rgb(30, 30, 117); 
} 

к этому:

#SACRED-HEART-COLLEGE { 
    font-family:"Trajan Pro Regular"; 
    font-size: 24px; 
    color: rgb(30, 30, 117); 

    position: absolute; 
    top: 0; 
} 

JSFiddle demo

Answer 2

если вы тусклый, чтобы достичь как на пользователей сказали тогда вы можете попробовать, просто добавив

#SACRED-HEART-COLLEGE { 
 
    font-family: "Trajan Pro Regular"; 
 
    font-size: 24px; 
 
    color: rgb(30,30,117); 
 
    line-height: 0; 
 
    display: block; 
 
}

эй, вы пытаетесь достичь этого.?

Demo Fiddle

/*Code written by Oliver Murfett and Caelan Grgurovic 2015 
 
Start Code*/ 
 

 
/*The following are classes that can be added to tags to give them certain features*/ 
 

 
.italics, i, em { 
 
\t font-style: italic; 
 
} 
 

 
.bold, b, strong { 
 
\t font-weight: bold; 
 
} 
 

 
.underline, u { 
 
\t text-decoration: underline; 
 
} 
 

 
.hidden { 
 
\t display: none; 
 
} 
 

 
/*Fonts*/ 
 
@font-face { 
 
    font-family: "Open Sans-Regular"; 
 
    src: url(Fonts/OpenSans-Regular.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: "Trajan Pro Regular"; 
 
    src: url(Fonts\Trajan Pro Regular.ttf); 
 
} 
 
/*The following styles are to the maximize page space*/ 
 
html, body { 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t background-color: white; 
 
\t top: 0px; 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
} 
 

 
#body-container { 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t top: 0px; 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
} 
 

 
header { 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t top: 0px; 
 
\t height: 100px; 
 
\t 
 
} 
 

 
/*The following styles are to style the header*/ 
 

 
#header-content { 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 10px; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box;  
 
\t height: 100%; 
 
\t min-height: 100%; 
 
} 
 

 
#logo-container { 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
\t float:left; 
 
\t margin-right: 20px; 
 
} 
 

 
#logo-container img { 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
} 
 

 
#header-text-container { 
 
\t height: 100%; 
 
\t min-height: 100%; 
 
} 
 

 
#header-text-top-container { 
 
\t height: 50%; 
 
\t min-height: 50; 
 
} 
 

 
#header-text-bottom-container { 
 
\t height: 50%; 
 
\t min-height: 50px; 
 
} 
 

 
#SACRED-HEART-COLLEGE { 
 
\t font-family: "Trajan Pro Regular"; 
 
\t font-size: 24px; 
 
\t color: rgb(30,30,117); 
 
}

\t <body> 
 
\t \t <div id = "body-container"> 
 
\t \t \t <header id = "header"> 
 
\t \t \t \t <div id = "header-content"> 
 
\t \t \t \t \t <div id = "logo-container"> 
 
\t \t \t \t \t \t <img src = "Images/SHCK Logo.png" alt = "SHC Logo"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id = "header-text-container"> 
 
\t \t \t \t \t \t <div id = "header-text-top-container"> 
 
\t \t \t \t \t \t \t <span id = "SACRED-HEART-COLLEGE">SACRED HEART COLLEGE</span> 
 
\t \t \t \t \t \t \t <span id =""></span> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div id = "header-text-bottom-container"> 
 
\t \t \t \t \t \t \t <span id = "Kyneton">Kyneton</span> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </header> 
 
\t \t </div> 
 
\t </body>