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;
}

score 1 · Accepted Answer · answered Apr 30 '14 at 21:04

1

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;
}

answered Apr 30 '14 at 21:04

Turnip

35,836
15
89
111

KKS · Answer 2 · 2014-04-30T21:48:56.047

0

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.

edited Apr 30 '14 at 21:48

answered Apr 30 '14 at 21:11

KKS

3,600
1
27
54

Link to read more about Clearfix css used above is http://stackoverflow.com/a/8554054/1211329 – KKS Apr 30 '14 at 21:12
@Brendan User asked for image to be on left side and menu to be on right of it. The demo illustrates this. The css that he has is not a real world css code. In my demo, I have tried to simplify css/html for user. – KKS Apr 30 '14 at 21:43
Ah, I get it, that was kind of you rather than just leaving them with a one-liner. Good Job! – Brendan Apr 30 '14 at 21:46
@Brendan that one liner answer is not appropriate! because that just teaches the user to fix his code to get the output but it doesn't teaches the right way to achieve it!! – KKS Apr 30 '14 at 21:47
Exactly, that's why I appreciate you taking the time to do all that. – Brendan Apr 30 '14 at 21:57

Align Image on Left Side of Menu CSS

2 Answers2