Very basic HTML/CSS question- having a link line up with the rest of the sentence

Question

So I want to have this:

In association with Company Name

What I'm getting right now is this:

In association with Company Name

The company name is a link, but I have my links be red with no underlining by setting them to a class in CSS.

This is the html I have:

<a>In association with <div id="bodylinks" class="bodylink"><a href="url.com">Company Name</a></a></div>

Here is the CSS associated with bodylink

.bodylink a
{
font:  14px Helvetica;
color: red;
text-decoration:none;
}

So the company name gets thrown to the next line because it is a different div, how can I avoid this and still use the .bodylink a class to format the link?

Thank you

Answer 1

div's are used to create new sections (divisions) in your page. If you don't intend the link to be in a new section, you should remove it and give the tag the class attribute like this:

<a class="bodylink" href="www.example.com">link text</a>

You'll also need to change your CSS so it applies to tags with class bodylink like this:

a.bodylink {
  /* styling */
}

Answer 2

Try using a span instead, or give the anchor (<a>) itself the class.

Answer 3

Use <span> instead, an inline element that doesn't break the text flow. <div> is a block element that creates a "line break" so to speak.

Also, you've got the nesting of your elements all wrong. That's not valid HTML.

Answer 4

No one bothered to mention that his markup is syntactically incorrect. You can't have the opening anchor tag outside the div, and the closing anchor tag inside.

The div tag is a block level element. You need an inline element, such as a span tag, as others here have suggested.

Answer 5

<div class="bodylink">In association with <a href="url.com">Company Name</a></div>

Why do you ahve the whole line anchored? If you use the code above the line in in a div with the class formatting and the Company Name is linked.

Ryan

Answer 6

First of all the HTML code should be corrected, as steve_c said.

And to make a div appear inline with other content use the display: inline; CSS code on the div you want to appear inline.

Example:

the text before div <div style="display: inline;"><a href="#">the link in the text</a></div>