logo on left and menu on right in same row
I want to have in the same raw, in the left a logo, 开发者_运维知识库and in the right a menu like Contact Us. If I make 3 divs for this and I allign the first left, and the 3rd right, it doesn't work. How can you have this?
Float would be a clean, simple way to do it. Try floating your logo div left, and your menu div right, like so:
HTML:
<div id="navbar">
<div id="logo">Logo</div>
<div id="navmenu">Nav menu</div>
</div>
CSS:
div#logo {
float: left;
}
div#navmenu {
float: right;
}
Without any actual markup to look at, the following is a very simple three-column setup. This is not meant as a three-column page layout, only three columns stretching across the top. Note the use of float
to send the DIV
's to the same row, left to right*.
* You could set the last right. Also, you will have to clear as well for any content following the #menu-row
DIV
(this is the overflow: auto
part).
CSS
#menu-row {
overflow: auto;
}
#menu-logo {
width: 10%;
float: left;
}
#menu-logo img {
width: 100%;
}
#menu-content {
width: 80%;
background: #ddd;
float: left;
}
#menu-right {
width: 10%;
height: 1.3em;
background: #dfd;
float: left;
}
#menu-content li {
display: inline;
list-style-type: none;
height: 128px;
}
#page-content {
background: #ddf;
}
HTML
<div id="menu-row">
<div id="menu-logo">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
</div>
<div id="menu-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Stuff</li>
</ul>
</div>
<div id="menu-right"></div>
</div>
<div id="page-content">
<p>This is stuff.</p>
</div>
http://jsfiddle.net/LYJUB/1/
I dont fully understand your question, but you might be able to fix it by positioning the divs absolute.
in the HTML: <div id="leftdiv"></div>
in the CSS:
#leftdiv{
width:10%;
height:100%;
position:absolute;
left:0%;
top:0%;
}
#rightdiv{
width:10%;
height:100%;
position:absolute;
right:0%;
top:0%;
}
#centerdiv{
width:80%;
height:100%;
position:absolute;
left:10%;
top:0%;
}
精彩评论