You can do this in some new browsers with the flexbox model: jsFiddle
HTML
<div> <div>left div</div> <div>middle div</div> <div>right div</div> </div>
CSS
body { width: 100%; height: 50px; display: -webkit-box; /* iOS 6-, Safari 3.1-6 */ display: -moz-box; /* Firefox 19- */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome */ display: flex; /* Opera 12.1, Firefox 20+ */ /* iOS 6-, Safari 3.1-6 */ -webkit-box-orient: horizontal; -webkit-box-pack: justify; /* Firefox 19- */ -moz-flex-direction: row; -moz-justify-content: space-between; /* Chrome */ -webkit-flex-direction: row; -webkit-justify-content: space-between; /* IE10 */ -ms-flex-direction: row; -ms-justify-content: space-between; /* Opera 12.1, Firefox 20+ */ flex-direction: row; justify-content: space-between; } div { width: 25%; background-color: #EFEFEF; }
The variously prefixed display: flex;
property tells the browser that the div
should use the flexbox model to layout the contents inside itself.
The variously prefixed forms of flex-direction: row;
and justify-content: space-between;
tell the browser to lay out the div
‘s inside the div
with display: flex;
set as a row with the space between them equally split.
As mentioned in the comments, the above is not really cross-browser friendly, as the new flexbox model is not yet properly supported in all browsers. If you need IE8+ support, you could use the code below instead, which should work in all browsers and IE8+. jsFiddle
HTML
<div>left div</div> <div class="middle"> <div class="inthemiddle">middle div</div> </div> <div>right div</div>
CSS
html { display: table; width: 100%; } body { display: table-row; width: 100%; } div { display: table-cell; background-color: #EFEFEF; min-width: 200px; } div.middle { width: 100%; background-color: #FFF; text-align: center; } div.inthemiddle { text-align: left; display: inline-block; margin: 0px auto; }