Using div inside p tag loses my styles

Question

I have a page where I want to represent a URL to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have

index.html:

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

styles.css:

body {
    background: #f0f0f0;
    width: 80%;
    margin: 0 auto;
}

h1 {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 60px;
}

p {
    font-size: 20px;
    font-family: sans-serif;
}

.cl {
    margin: 38px;
    padding: 25px;
    background: #f8f8f8;
    font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
    font-size: 12px;
  }

.fake-url {
    color: blue;
}

Most recently I had tried using .fake-url in the div,

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

and after that I did

p, p div {
    font-size: 20px;
    font-family: sans-serif;
}

it's a fake link. It seems I have to use `span` within any lower tag (like p, headers, etc)? It's been a while for the basics for me — codyc4321, Oct 27 '16 at 04:44

score 2 · Accepted Answer · answered Oct 27 '16 at 04:46

2

I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.

And as someone mentioned above, you have an extra ; inside the div's class

answered Oct 27 '16 at 04:46

VdeVentura

2,041
2
15
16

does anyone know why a div inside a p breaks? something nitty gritty – codyc4321 Oct 27 '16 at 04:47
@codyc4321 as a I said, it's because of the default display style of the divs, they are meant to be "display: block" in the other hand, spans are like "display: inline" – VdeVentura Oct 27 '16 at 04:49
@codyc4321 http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – Roko C. Buljan Oct 27 '16 at 04:53

Ouroborus · Answer 2 · 2016-10-27T04:56:21.283

2

<div> elements don't belong inside <p> elements. Browsers usually rework this so that the <p> element is closed just before the <div> element and then opened again just after. This effectively splits your paragraph into two pieces, one before the <div> and one after.

Instead, use a <span> or, more appropriately, a <a> element.

MDN has an entry that mentions this. Specifically, in the section marked "Tag omission", it mentions that if an opening <p> element is followed by an opening <div> element then the paragraph is implicitly closed.

edited Oct 27 '16 at 04:56

answered Oct 27 '16 at 04:48

Ouroborus

16,237
4
39
62

"and then opened again just after." I'm sorry but this behaviour doesn't occur in chrome nor safari. it might be misleading. look at what happens when someone thinks that the P tag will be automatically reopened after a div: https://jsfiddle.net/ytjckvtd/ – VdeVentura May 13 '17 at 09:06
@StormRage Thus "usually". The general case is: Broken HTML can be handled (or not handled) by the browser however it pleases. There isn't a standard for correcting malformed HTML. – Ouroborus May 13 '17 at 21:54

score 1 · Answer 3 · edited Oct 27 '16 at 05:03

1

<p>
    we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
    <div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>

Just removing the ; from the class name in the div will fix it.

edited Oct 27 '16 at 05:03

Ouroborus

16,237
4
39
62

answered Oct 27 '16 at 04:47

SamDev

11
1

Using div inside p tag loses my styles

3 Answers3