Question

So I’m tweaking some CSS except I’m terrible at it.

I have those

#logop {
  text-align: left;
  height: 50px;
}

#menu {
  font-family: "Arial Black", Impact, Arial, sans-serif;
  text-align: center;
  width: 100%;
  height: 50px;
  padding-top: 13px;
  z-index: 30;
}

.nav {
  height: 100px;
  position: fixed;
  top: 0px;
  z-index: 20;
  width: 100%;
  background-color: rgb(41, 35, 30);
  -moz-box-shadow: 0px 2px 15px #000;
  -webkit-box-shadow: 0px 15px 5px #000;
  box-shadow: 0px 2px 15px #000;
  background-image: image-url('damask.png');
}

and this

<div id="container" class="spacer">
    <div class="nav" id="top">
        <div id="menu">
            <div id="logop"> <%= image_tag('logo.png') %></div>
            <ul>
                <li><a href="#top">HOME</a></li>
                <li><a href="#one">ABOUT</a></li>
            </ul>
        </div>
    </div>
</div>

I’m trying to get the logop left of the menu. If I use float:left the logo goes all the way up to the corner of the page when I just want it left of the menu. How would I do this ?

Answer 1

Just try the below link
Use float:left for both the menu style and for your logo

<div id="container" class="spacer">
<div class="nav" id="top">
    <div id="menu">
        <div id="logop" style="float:left;"> <%= image_tag('logo.png') %></div>
        <ul style="float:left;">
            <li><a href="#top">HOME</a></li>
            <li><a href="#one">ABOUT</a></li>
        </ul>
    </div>
</div>
</div>