Content inside a DIV

[csosa]

So I have a link tag in my footer not sure why its pushing my other content down…

<div id="footer">
    <a href="iogproducts.com">LINK</a>
            <p class="IOG">IOG Products, LLC.&nbsp;&nbsp;United States of America
            </p>
</div>

#footer {
	width: 974px;
	height:40px;
	clear: both;
    background: #eae9e9;
	margin: 0 auto; 

}

.IOG {
    text-align:center;
    line-height:40px;
    font-size:10pt;
    font-weight:700;
    font-family: "open sans", sans-serif;
}

[RyanReese]

Anchors are inline and the <p> tag is a block element. That won’t let them be on the same line the way you have it set up.

You could set both to display:inline-block though. This lets them both basically be display:inline (thus let them both be on the same line) while allowing for some display:block functionality. Best of both worlds.

[ronpat]

Do you know how to assign an outline to an element?

a {outline:1px solid magenta;}
p {outline:1px solid blue;}

Try it and see where the boxes are.

[csosa]

I see so <p> tags are block elements in original form?

[RyanReese]

Correct.

[csosa]

@ronpat

a {outline:1px solid magenta;}p {outline:1px solid blue;}

wow <p> tags take a lot of space…

[RyanReese]

It takes up all space available. It would expand out to 6000px if your container/viewport was that big.

Block elements take up all space available (by default.)
Inline elements are shrink-to-fit
Inline-block elements are shrink to fit
Table-cells are shrink to fit

[csosa]

thanks.