Align Image on Left Side of Menu CSS

Question

I am trying to create a menu that has the image on the left and a menu on the right. But can't get the menu to style correctly. Currently, the image is on the top and menu is underneath it. Any suggestions?

Thanks!

Code in my common menu:

<div class = "firstDiv">
    <img class = "myImage" src="font.jpg">
    <div class = "secondDiv">
        <nav>
            <ul>
                <li><a href = "index.php">Home</a></li>
                <li><a href = "page1.php">Page 1</a></li>
                <li><a href = "page2.php">Page 2</a></li>
                <li><a href = "page3.php">Page 3</a></li>
                <li><a href = "page4.php">Page 4</a></li>
                <li><a href = "page5.php">Page 5</a></li>
                <li><a href = "page6.php">Page 6</a></li>
            </ul>
        </nav>
    </div>
</div>

CSS Sheet:

nav{
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

nav ul {
    padding: .7em;
    list-style: none;
    background: #2f2b23;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset; 
    border: 3px solid black;
    /* added*/
   display: inline-block;


}
nav li {
    float:left;
}

nav a {
    float:left;
    padding: .8em .7em;
    text-decoration: none;
    color: black;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    border-color: #black #BF7530;
    background: #BF4630;
 }

nav a:hover, nav a:focus {
    outline: 0;
    color: #black;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #FFDB73;
}

nav a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}

nav li:first-child a {
    border-left: 0;
    border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            
}

.firstDiv{
    margin: 0 auto;
    background: #a4d25d; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 10px;
    padding-right: 10px;
    border: 5px solid black; 
    width:1140px; 
    height: 362px;
}

.myImage {float:left; border: 5px solid black; margin:5px;}

.secondDiv{
    border-spacing: 15px;
    border: 4px solid black;
    background-color: #FF8700;
    margin: 0 auto;
}

Answer 1

I believe you want to achieve similar like this demo does but you are complicating your design by not using right css and html markup:

html:

<header class="clearfix">
    <div class="firstDiv">
        <img class="myImage" src="font.jpg">
    </div>
    <div class="secondDiv">
        <nav>
            <ul>
                <li><a href="index.php">Home</a>
                </li>
                <li><a href="page1.php">Page 1</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS:

.firstDiv {
    border: 5px solid black;
    width:100px;
    height: 110px;
    float:left;
}
header{
    padding: 5px;
    background: #999;
}
.secondDiv {
    border-spacing: 15px;
    border: 4px solid black;
    background-color: #FF8700;
    float:left;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

Feel free to add your color styles again.

Answer 2

Assuming that there is enough room for your image and menu (you didn't specify the image size) you just need to float .secondDiv

Example

.secondDiv{
    float: left;
}