CODEWITHSUNDEEP
htmlcss
De'Shaun
De'Shaun

Reputation: 67

Why aren't my words staying inside of my div

I created a header for a website im doing but the words wont stay inside of it, they go below it. Please help. Heres the code:

#headerclasshomenofix{
	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	position:absolute;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}
<div id="headerclasshomenofix">
		<h1><i>Music School</i></h1>
</div>

See how the "Music School" words float down.. I don't know what i did wrong.

Upvotes: 3

Views: 81

Answers (5)

K.H.
K.H.

Reputation: 1462

Your element is too small to fit this kind of font size. I am assuming you want to keep position: absolute. Do one of these:

  • reduce font-size
  • remove or increase height (60px works fine for me)

Upvotes: 1

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

just set h1{margin:0;padding:0;}

#headerclasshomenofix{

	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	position:absolute;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}
h1{margin:0;padding:0;}
<div id="headerclasshomenofix" style="left: 0px; top: 0px">
		<h1><i>Music School</i></h1>
</div>

Upvotes: 0

rajesh
rajesh

Reputation: 1485

Remove the position absolute css from #hearderclasshomenofix

#headerclasshomenofix{
	background-color:white;
	width:100%;
	height:40px;
	left:0px;
	top:0px;
	font-family:"AR CENA";
	border-bottom:thick gray solid;
}
<div id="headerclasshomenofix" style="left: 0px; top: 0px">
		<h1><i>Music School</i></h1>
</div>

Upvotes: 1

DaniP
DaniP

Reputation: 38252

For default many tags like the h1 has default values on some properties like this for the h1 on Chrome:

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Therefore you just need to reset the default margin 

#headerclasshomenofix {
  background-color: white;
  width: 100%;
  height: 40px;
  left: 0px;
  top: 0px;
  position: absolute;
  font-family: "AR CENA";
  border-bottom: thick gray solid;
}
h1 {
  margin: 0
}
<div id="headerclasshomenofix" style="left: 0px; top: 0px">
  <h1><i>Music School</i></h1>
</div>

Upvotes: 1

Aid19801
Aid19801

Reputation: 1166

I'm not sure entirely, what the issue is? If it's how the words/css appear on the page - you can change position absolute to position static

Also you probably want to keep consistent with the height being in pixels and width being in percentage.

If you mean the actual elements, in the code, the code looks fine? The H1 and tag should be inside your div like that?

Upvotes: 0

Related Questions