Quick CSS layout question

**Thordendal** · Oct 7, 2012 17:35

Hi guys,

I think this is a simple one, but not sure how do achieve what I'd like:

I would like to create the attached image – horizontal line with an icon at the end (which I will use an icon font for). It needs to be responsive so the line can scale when the width of the container reduces, and the icon stays on the right of the container.

I've tried using a div with a border-bottom but I don't know how to make the line stop a few pixels short of the icon. I've also tried a HR but couldn't get that to work.

Any ideas?

Thanks in advance.

Jed

Attachment 60779

**ralph.m** · Oct 7, 2012 18:02

Hi Thordendal. Welcome to the forums.

My knees always knock when someone says "this is a simple one".

Often, it isn't. There are various ways you could do this, some more sophisticated than others. Personally, I tend to go for the easier, less sophisticated options. I would probably create a div for the white background to start with. I would add left and right padding of about 35px.

Inside that I'd put two divs. The first one would have a width of 30px, be floated right, and have a line-height of 52px. This div would contain the icon. The other would have a right margin of 30px, and would have a height of 52px and a transparent, repeating background image that has a part of that horizontal line in it. (So I'd use an image for the line.)

That's what I'd try. It may take some tweaks. There are cleverer things to do, but that should be pretty reliable.

Here's an example using just an image for the icon rather than text:

http://pageaffairs.com/sp/thor/

**Thordendal** · Oct 7, 2012 18:21

Hi Ralph,

Wow, thanks for the detailed response and example!

Looks great, and I'll go with that method.

Nice work!

Jed

**ralph.m** · Oct 7, 2012 18:53

Cool! The only tricky bit might be when you use the actual font instead of an image. Centering the text vertically can be tricky, but I think the key might be to give it line-height: 52px;

Let us know if it doesn't work, and we can look at how to do it.

**Thordendal** · Oct 7, 2012 19:02

Thanks – good point about centering the font vertically.

I'm actually thinking I may use the graphic anyway as that is the only instance of an icon. So loading the font with all the CSS is probably overkill for one usage. I think I'll go with the graphic.

Cheers!

**dresden_phoenix** · Oct 7, 2012 21:07

My knees always knock when someone says "this is a simple one". Often, it isn't.

you and me both.

See if this fits your needs:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		.rule{padding:2em; position: relative;}
		.rule:after {content:""; display:block; border-bottom:1px solid #000; margin-top: 1em;  margin-right:3em ; text-align:right; height:.6ex; line-height: 1;}
		.rule:before {content:"*"; position: absolute; right:1.5em; bottom:.25em; font-size: 200%}
		</style>
	</head>
	<body>
<div class="rule">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
	</body>
</html>

replace the "*" in content with whatever character from the icon font you are using, tweak font-size in .rule:before to suit your needs ( you may need to PROPORTIONALLY adjust the other em/ex based spacing in the other rules as well)

hope that helps

**Thordendal** · Oct 7, 2012 21:23

Thanks Dresden,

Looks like another good solution.

I'll have a look at this later and let you know how I go.

Cheers!
Jed

**Thordendal** · Oct 8, 2012 01:52

Thanks guys,

I tried Ralph's method and it worked perfectly.

Cheers
Jed

User Tag List

Thread: Quick CSS layout question

Thread Tools

Display

Quick CSS layout question

Bookmarks

Bookmarks

Posting Permissions