Question

Struggling with what should be a simple layout.

I want a logo, with a and a subtext on the right of it.

I have the following ASPX page (but is is plain html so the aspx is not so relevant)

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Image ID="Image1" CssClass="logo" ImageUrl="~/logo.png" runat="server" />
<h1>
    headertext</h1>
<p>
    <br />
    subtitletext</p>

And the following CSS:

.logo
{
vertical-align: top;
}

h1,p
{ display: inline; }

Now the subtitletext ends up under the logo, and not under the headertext even though the logo is much higher that the two texts together. Any ideas why? The br is needed because I want the p under the H1 and not after it.

ps. i know with some extra DIV’s or a table i can fix it easily, but can’t it be done without them?

Answer 1

Why? Because the image, header and paragraph are all inline elements – image as this is its default display and the others because you forced them via CSS rule.

The line break tag tells the browser: get down one line from the point of this tag, so in your case everything until the <br /> is one line, then after this tag new line begins.

Most simple way to “solve” this is use float instead of inline display:

img, h1,p { float: left; }

Live test case.

Edit: in case of wider contents, the paragraph will appear “after” the header, not aligned properly. To solve this, one way is giving fixed width to them both:

h1, p { width: 250px; }

Updated fiddle.