CODEWITHSUNDEEP
htmltagslinebreak
Smith
Smith

Reputation: 21

HTML - How do I prevent this <div> linebreak?

In HTML, how do I prevent this "linebreak" when using the <div> tag?

Example:

<div class="menu"><a href="URL"><br><br>menu</a></div>
<div class="apple"><a href="URL"><br><br>apple</a></div>

Visual example:

Visual example

How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu

NOTE: Pretend that 'apple' is inside its own invincible maroon box.

Upvotes: 2

Views: 179

Answers (4)

Smith
Smith

Reputation: 21

<div class="menu"><a href="URL"><br><br>menu</a><span class="youtube"><a href="URL"><br><br>youtube</a></div>

Upvotes: 0

elbblick
elbblick

Reputation: 336

When using <span> instead of <div>, you need to get rid of the line breaks (<br>).

If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:

<div class="menu" style="float:left;"><a href="URL"><br><br>menu</a></div>
<div class="apple"><a href="URL"><br><br>apple</a></div>

Upvotes: 1

worldofjr
worldofjr

Reputation: 3886

You can change your CSS to include the following;

div.menu, div.apple {
    float:left;
    display:inline-block;
}

You might also need to set the width of each to less than 50%.

Upvotes: 0

Bob
Bob

Reputation: 53

It sounds like you have two block elements that you would like to display side by side? Have you tried using the "display: inline-block;" property in your css yet?

Upvotes: 0

Related Questions