Require a small space between the middle div and the two on each side. The middle bar should have a fixed width.
Here is my attempt so far, but it seems messy:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: auto;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#mainBar {
position: relative;
z-index: -1;
width: 406px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#mainBarInner {
position: relative;
z-index: 1;
width: 400px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#leftBar {
position: absolute;
z-index: -2;
width: 40%;
height: 50px;
left: 0px;
background-color: red;
}
#rightBar {
position: absolute;
z-index: -2;
width: 40%;
height: 50px;
top: 50px;
right: 0px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="leftBar"></div>
<div id="mainBar"><div id="mainBarInner"></div></div>
<div id="rightBar"></div>
</div>
</body>
</html>
Is there a better way to achieve this without aligning the divs on both sides and under the middle one?
Demo file: FIDDLE DEMO