Align logo, header and menu

0
votes

How to align a logo, header text and menu all on one line, with the logo aligned left, followed by the header text and the menu right? Most answers I have seen are for two elements (e.g., logo and menu).

For example, in the example below, the image div and the text div should align left (they do) and the menu div should alight right (it doesn't). They all also should vertically align (the menu div doesn't). See also http://jsfiddle.net/ecodiv/0xk935n6/ 

<div class="header">
    <div class="image"></div>
    <div class="text">Header text</div>
    <div class="menu">
        <ul>
            <li><a href="#">menu 1</a></li>
           <li><a href="#">menu 2</a></li>
        </ul>
    </div>
</div>

And the CSS:

.header {
}
.header .image {
    background-color: red;
    width: 70px;
    height: 93px;
}
.header .text {
    background-color: yellow;
}
.header menu {
    float:right;
}
.menu ul {
    float: right;
    list-style-type: none;
}
.menu li {
    float: left;
    margin: 0 8px;
}
.image, .text, .menu {
    display: inline-block;
    vertical-align: bottom;
}
2
htmlcss
To allow for a more fluid design you may want to look into using display: table-cell instead of floats in the future :). – Callum.
That looks like an interesting alternative. I'll have a look, also to see if it deals better with vertical alignment of logo, text and menu – Paulo
@callum - table-cell options works nice with three tables, thanks again. One problem is that I can't right align the text in the most right table-cell (jsfiddle.net/ecodiv/j2kqrcmc) – Paulo
The problem here is because you are floating the menu items - if you add "display: inline-block" to your menu class, this works as you want it to ^^. – Callum.

2 Answers

4
votes

You are missing a dot notation for class in your CSS.

Instead of 

.header menu {
    float:right;
}

write

.header .menu {
    float:right;
}

Also, if you want your .text and .image to be in the same line as .menu, just add float: left to both of these...

1
votes

you can change to use position: absolute on the menu div and then set right: 0; bottom: 0;, this will align the menu to extreme right and bottom.

.header {
    position: relative;
}

.header .menu {
    position: absolute;
    right: 0;
    bottom: 0;
    border:2px solid green;
}

JSFiddle