Alignment of Floating logo with Top Menu

I am trying to create a header in which I have the logo on the top left of the screen. To the right of the logo and aligned to it’s base, I want to put a top menu. I have not used any CSS frameworks, and all the HTML and CSS code is located here

I cannot get the menu to align to the bottom of the logo (which has float: left;
). Also, after testing the margin settings with a border on all elements ( border: 1px solid;
) successfully, the minute I remove the borders everything reshuffles, and I have to add padding: 1px;
in order to keep them in place.

Could someone please take a look and advise me as to the correct application of the relevant CSS?


Please note that the code does indeed work. My issue is that it is a hack (essentially adding non-existent padding to get the job done).

Problem courtesy of: Theo Scholiadis


What I would advise that you do is to absolutely position the logo and navigation containers and then set the position and sizes of each element to suit. This IMHAO is more robust and reliable that floating header elements.

ie in the css:

header {
    width: 100%; height: xpx;
    postion:relative; /* This makes elements inside that have position:absolute act relative to the container, useful if you need to move it around */
    top:0; left:0;

#logo {
    background: blah; width:xpx; height:xpx;
    position: absolute;
    top:0px; left:0px; 

nav.top_nav {
    width:xpx; height:xpx;
    position: absolute;
    top:0px; left:[header width + some padding]px;

Of course if needed you can tweek the zeros for padding.

Solution courtesy of: wjdp

CSS3 Recipes责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Alignment of Floating logo with Top Menu

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录