CODEWITHSUNDEEP
htmlcss
Zac.Ledyard
Zac.Ledyard

Reputation: 162

My </p> tag is affecting the position of my div. Why is this?

I have this div wedged between two bars(other divs), though when I add text into the equation, the div gets repositioned down. It works as intended without the p element and its children. Here's a fiddle to demonstrate the issue: http://jsfiddle.net/57uSQ/

this is the HTML that is causing the problem:

    <p>
        <span class="name">DOLCE & GABBANA</span>
        </br>
        <span class="title">THE ONE</span>
    </p>

And the correlating CSS:

.videoDesc {
    display: inline-block;

    border: 1px solid #000000;
    border-right: 0px;

    height: 200px;
    width: 500px;
}

.videoDesc p {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.videoDesc .name {
    display: inline-block;
    padding: 0px;
}

.videoDesc .title {
    display: inline-block;
    padding: 0px;
}

.title {
    font-family: Lekton;
    font-size: 1.25em;
}

.name {
    font-family: Oswald;
    font-weight: lighter;
    font-size: 2.5em;
    letter-spacing: 10px;
    padding-left: 5px;
}

Upvotes: 0

Views: 63

Answers (1)

j08691
j08691

Reputation: 207861

You need to add vertical-align:top to .videoDesc:

.videoDesc {
    display: inline-block;
    border: 1px solid #000000;
    border-right: 0px;
    height: 200px;
    width: 500px;
    vertical-align:top;
}

jsFiddle example

The default vertical alignment is baseline, which is causing the behavior you see.

Upvotes: 3

Related Questions