I cannot see div

user_17863947 0
Viewed 75

I am making an extension in chrome that takes as an input a word and returns the meaning of this word.

I am trying to make a div to my website in order to show the result in it but I cannot see it. Is it positioned incorrectly?

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #0af, #00FF6C)
}

P {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: large;
  font-style: italic;
}

p>input {
  height: 15px;
  font-size: large;
}

p>div {
  display: block;
  background-color: green;
  height: 50px;
  width: 50px;
}
<body>
  <p> Write a word :
    <input type="text"><br>
    <div>hello</div><br>
    <button id="sub">Submit</button>
  </p>
</body>

css html
2 Answers

If you look at your developer tools, you'll see that the <p> tag has been closed before the <div> tag.

enter image description here

Since the <div> isn't a child of <p>, it's not going to match this css selector: p > div.

The reason this happens is because the paragraph tag contains phrasing content. This is a type of content which includes text and a variety of tags which are applied to this sort of flow content (eg. <strong>, <em>, <a>, etc.) <div> is not flow content, but rather structural.

There's actually a "feature" of the paragraph tag where you can omit the closing tag </p> and the browser will automatically insert it as soon as it parses a non-flow tag. That's actually what's happening here -- it parses the text, then the input tag, and then it hits the <div> and automatically closes the paragraph.

It's also, coincidentally, why you've got the extraneous <p></p> after the button ... because that's where your actual </p> tag was, and the browser sees it and completes the pair by injecting a <p> and making an empty paragraph.

user_4197050

Instead wrapping all with a p-tag you change it do div and assign a class. In this example .wrapper. and instead p>div you have to write .wrapper div {} and so on.

body {
  margin:0;
  padding:0;
  background: linear-gradient(to right,#0af,#00FF6C)
}

.wrapper {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: large;
    font-style:italic ;
}

.wrapper input {
    height:15px;
    font-size: large;  
}

.wrapper div {
    display: block;
    background-color: green;
    height:50px;
    width:50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
<script src="background.js"></script>

</head>
<body>
  <div class="wrapper"> Write a word :

    <input type="text"><br>
    <div>hello</div><br>
    <button id="sub">Submit</button>

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

user_148071110
Related