CSS divs side-by-side
Question
I realize that already there is a lot of material on here pertaining to this issue, but I still am having trouble placing three divs side-by-side rather than stacked on top of each other.
<body>
<div id='boom'>
<div id='menutab' class='navbar'>
Menu
</div>
<div class='navbar' id='storytab'>
Our Story
</div>
<div class='navbar' id='contacttab'>
Contact
</div>
</div>
</body>
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div.navbar{width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:fixed;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
5 answers
solution1
2 2013-12-31 06:22:23
Change your css as below
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03
/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div {
float:left;
padding-right:10px;
color:#FFF;
}
solution2
0 ACCPTED 2013-12-31 06:25:53
Use CSS left property , left property sets the left edge of an element,Try this code:
Fiddle :
CSS:
#menutab
{
left:100px;
}
#storytab
{
left:250px;
}
#contacttab
{
left:400px;
}
solution3
0 2013-12-31 06:29:13
Position:fixed; is the reason for your problem
Change the CSS accordingly.
solution4
0 2013-12-31 06:30:35
HTML
Added a wrapper around menu items
<div id='boom'>
<div class="menu">
<div id='menutab' class='navbar'>Menu</div>
<div class='navbar' id='storytab'>Our Story</div>
<div class='navbar' id='contacttab'>Contact</div>
</div>
</div>
CSS
Change position to relative and if you want it in center just add the menu css as shown beow, now the menu items will be in center irrespective of screen size, no hard coded px is required
.menu {
width: 50%;
margin: 0 auto;
}
div.navbar {
width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:relative;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
solution5
0 2013-12-31 06:32:34
You need small change in your css
inside this
div.navbar{
Remove position:fixed;
}
Its working fine
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.