Can't align image in navbar

[Lasse]

Hello so im trying to add the following to my naviagtion

html code:
<div class="navigation">
<a href="{$mybb->settings['bburl']}/index.php"><span id="home_bit"><i class="fa fa-home"></i></span></a><span>{$nav}{$activesep}{$activebit}</span>
<a href="https//csgoboost.dk" style="background-image:url(https//spinx4k.dk/csgoboost.png); float: left;">CSGOBoost.dk</a>
</div>


CSS Code:
.navigation {
background: #FEFEFE;
color: #000;
padding: 17px 0px;
border-bottom: 3px solid #2980b9;
font-family: Open Sans;
font-size: 15px;
border-radius: 2px;
}


i want to add an image + button
but when i add the image to

.naviagtion (css file) it covers the whole nav and not only align on the left side

my question is how do i make it work?

See image attach for perspektive show

   

[[ExiTuS]]

1. Try this way and correct the URL of your image

<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk" style="background-image:url(https://spinx4k.dk/csgoboost.png);">CSGOBoost.dk</a></div>
...

1. Your image is very large in size (983x271 pixels). Do you really want to add an image in such dimension? This will deform your whole header navigation for sure.
2. Your should decicde whether the image is displayed or the link-text or both

What about this solution:

<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk"><img src="https://spinx4k.dk/csgoboost.png" width="200" /><br />CSGOBoost.dk</a></div>
...
<div style="clear: both;></div>
</div>

[ExiTuS]

[Lasse]

1. Try this way and correct the URL of your image

<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk" style="background-image:url(https://spinx4k.dk/csgoboost.png);">CSGOBoost.dk</a></div>
...

1. Your image is very large in size (983x271 pixels). Do you really want to add an image in such dimension? This will deform your whole header navigation for sure.
2. Your should decicde whether the image is displayed or the link-text or both

What about this solution:

<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk"><img src="https://spinx4k.dk/csgoboost.png" width="200" /><br />CSGOBoost.dk</a></div>
...
<div style="clear: both;></div>
</div>

[ExiTuS]

Very thanks for your reply defently works out

only thing i can't figure out with your second solution it makes the nav-bar go down and get static with the forum post itself

I then tryed using "margin and padding" to get the image more aligen to center because yea take a look at the new attached image    

[[ExiTuS]]

This overlapping is caused by the floating element. Therefore you need to claer this floats.
Did you forget to add the "clear: both" element at the end of the navigation section?

<div class="navigation"> /* 1 */
... /* 2 */
<div style="clear: both;></div> /* 3 */
</div> /* 4 */

*1 Begin of navigation section
*2 Your image and all the stuff within navigation/breadcrumbs
*3 This line will clear the floats!!!
*4 End of navigation section

[ExiTuS]

[Lasse]

This overlapping is caused by the floating element. Therefore you need to claer this floats.
Did you forget to add the "clear: both" element at the end of the navigation section?

<div class="navigation"> /* 1 */
... /* 2 */
<div style="clear: both;></div> /* 3 */
</div> /* 4 */

*1 Begin of navigation section
*2 Your image and all the stuff within navigation/breadcrumbs
*3 This line will clear the floats!!!
*4 End of navigation section

[ExiTuS]

Yes i did use

<div style="clear: both;></div>

But did'nt help :/

So far i got this setup + the image isnt showing https://spinx4k.dk/ so i removed the image since the float was way off as showen in the image

[[ExiTuS]]

The alternate solution is working well - but it was my mistake to forgot the closing quote sign!
<div style="clear: both;></div> /* wrong */
<div style="clear: both;"></div> /* correct */

[ExiTuS]

PS.
Never just copy and paste any code without have a look at the idiot syntax