CODEWITHSUNDEEP
htmlcss
user5965902
user5965902

Reputation:

h1 refuses to nest in div

I have a div. It is 100% width and 150 pixels tall. I nested an <h1> tag in it, and it sits under an image instead of next to it.

<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>

CSS:

 body {
      background-color: #aaffaa;
    }
    .topbar {
      width: 100%;
      height: 150px;
      background-color: #00bb00;
    }
    img {
      height: 150px;
      width: 150px;
    }
    h1 {

    }

Upvotes: 0

Views: 1617

Answers (3)

Jacob G
Jacob G

Reputation: 14172

A heading (<h1>,<h2>,etc) is a block level element:

A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.Source: MDN Docs

Simply display the h1 inline-block like:

 h1 {
   display: inline-block;
   vertical-align:top;
   /*vertical-align aligns it at the top of the image, instead of the baseline*/
 }

JSFiddle Example with your code

Upvotes: 4

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

Another option would be to float the two inside elements left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/

 img {
   float: left;
   height: 150px;
   width: 150px;
 }

 h1 {
   float: left;
 }

Upvotes: 0

OptimusCrime
OptimusCrime

Reputation: 14863

All header tags are block by default, meaning it spans the width 100%. If you want it side-by-side another element you need to change the display like so:

h1 {
    display: inline;
}

Upvotes: 0

Related Questions