Header on left, Link on right, Paragraph on the next line - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Header on left, Link on right, Paragraph on the next line

If somebody could show me what I’m doing wrong I would be very appreciative

Jeremy_H

5:10 pm on Sep 30, 2005 (gmt 0)

10+ Year Member

I am having a difficult time in CSS, and I just can’t figure it out. I’m hoping somebody might be able to shine some light on me.

Right now I have a header (h1) that is followed by a paragraph (p). This works great. It looks like this:

HHHHHH
HHHHHH

PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPP

(The header is shown with two lines because the header text is taller).

My CSS looks like this:

<style type="text/css">
body{width:728px}
h1{font:lighter 30px serif}
</style>

However, I am trying to insert a text link into my document that will be on the same line as my header, but right justified. I’m trying to get it to look like this:

HHHHHH
HHHHHH LINK

PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPP

(I can't get it to show right here, but the link should be aligned with the right side of all the Ps).

I’ve been trying to figure it out with different float and display properties, it I get scrambled text that looks like this:

HHHHHH PPPP LINK
HHHHHH PPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
PPPPPPPPPPPPPPPPPPP
P

If somebody could show me what I’m doing wrong I would be greatly appreciative.

Thanks

iamlost

10:30 pm on Oct 2, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

One solution: specify a restricted width for the <h1> to overcome it's default 100% width; specify the <a> as display: block; rather than it's default of inline so that text-align: right; can be applied, and then float it right.
Remember that floats must come first so place the <a> ahead of <h1> in your HTML code.

Note: I zeroed all paddings/margins in the example - adjust widths/paddings/margins as required remembering possible "quirks" and standards-compliant browser box-model conflicts.

CSS:

* { padding: 0; margin: 0;
}
body {width: 728px; background: #ffd;
}
h1{font: lighter 30px serif; width: 70%; background: #fdd;
}
a {display: block; float: right; width: 30%; text-align: right; font-size: 20px; background: #dfd;
}
p {background: #dff;
}

HTML:

<body>
<a href="x">This is a Link</a>
<h1>This Is A Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque adipiscing erat a lectus. Nunc tincidunt metus sit amet purus. Proin eget massa. Phasellus vel dui a tellus convallis bibendum.</p>
</body>

Note: restricting body width does not work in IE5.

Jeremy_H

11:40 pm on Oct 4, 2005 (gmt 0)

10+ Year Member

Thank you IAL,

It definitely gets me started in the right direction. I had most of that stuff in the CSS before, but I didn’t know that stuff floated needs to be in before the object, that clears up some stuff.

Since the link text is smaller from the header text, one problem I’m getting is that the two are aligned at the top,

H L
H

Is it possible to get the aligned together at the bottom?

H
H L

Thanks again!