Positioning three divs left, center and right - html

Question

This community has already been a big help. I have one noob question. I did do a search, but didn't turn up this situation, so apologies if this has been asked before.
I have a "nav" div currently sitting in a wrapper div. Nested in my nav div are three child elements that I want to position left, center, and right accordingly. I tried floating the three elements but they're all stacking on one side. I would like the logo div on the left, header in the center, and phone number on the right.
I know these can be positioned more precisely with absolute positioning, but since I'm trying to keep the layout as fluid as possible, is there another way?
Here is my HTML
<div class="wrapper">
<div class="nav">
<div class="logo"><em>BLI </em></div>
<div class="header"><em>California's Leader in Workers' Compensation</em></div>
<div class="phonenumber">Call us:<br>
909-256-0525</div>
</div>
And my CSS:
.wrapper{
min-width:1200px;
position:relative;
width:100%;
overflow:auto;}
.nav{
color:#FFFFFF;
font-size:1.563em;
font-weight:bold;
float:left;
font-family: Arial;
background-color:#C7C2C2;
width:100%;
height:80px;
display:inline;
}
.logo{
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
width: 50px;
color: #0E2B5E;
top: 9px;
clear: both;
float: left;
}
.header{
text-shadow:black 0.1em 0.1em 0.2em;
padding-top:40px;
clear:both;
width:300px;
text-align:center;
float:left;
}
.phonenumber{
text-shadow: black 0.1em 0.1em 0.2em;
float: left;
font-size: 1em;
padding: 5px;
}
Any general responsive design tips would also be appreciated.
Thanks!

Answer 1

You can use display:table; on the wrapper and display:table-cell; on all its child elements.
This treats the wrapper div as if it were a table element with the width of 100%, and all its child elements as table cells. (http://www.w3schools.com/cssref/pr_class_display.asp)
.wrapper{
width: 100%;
height:auto;
display:table;
background-color:gray;
}
.logo{
display:table-cell;
text-align:left;
width:33%;
}
.header{
display:table-cell;
text-align:center;
width:33%;
}
.phonenumber{
display:table-cell;
text-align:right;
width:33%;
}
By making the wrapper 100% and its children 33%, its now responsive too!
I cleared out your current styling to make it easier for you to read.
Fiddle: http://jsfiddle.net/mLmcfrup/

Answer 2

Here i can solved your problem and it is fully Responsive css code and it is working in all browser's and change width according to browser size.It can be used in mobile, pc and other resolution. I hope it helps you.
Live Working Demo
HTML Code:
<div class="main">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
CSS Code:
.main
{
width:100%;
position:relative;
}
.left
{
width:20%;
float:left;
position:relative;
background-color:red;
}
.middle
{
width:60%;
float:left;
position:relative;
background-color:green;
}
.right
{
width:20%;
float:left;
position:relative;
background-color:blue;
}
Result:

Answer 3

To place the inner divs side-by-side, and keeping it fluid, use the css display properties table and table-cell.
.nav {
display: table;
width: 100%;
}
.nav > div {
display: table-cell;
}
Remove all the floats and stuff, and let the nav work like a table, placing it's children side by side like inline cells...
Here's a simple example of how it works (without all of your styling): http://jsfiddle.net/1co0qLx9/

Answer 4

Here are 2 best solutions of your concern.
I have created 2 fluid layouts based on your code.
First with "float" so that you could easily relate and implement quickly.
URL:- http://sandeepparashar.com/stackoverflow/fluid-layout-with-float.html
Second with "box-flex". Becasue float has been out dated and you would get a chance to know about new CSS3 properties. Also box flex has no width restriction.
URL:- http://sandeepparashar.com/stackoverflow/fluid-layout-with-box-flex.html
CSS Code with Float layout:
.wrapper {}
.nav {
width:100%;
vertical-align:middle;
box-sizing:border-box;
color: #FFFFFF;
font-size: 1.563em;
font-weight: bold;
font-family: Arial;
background-color: #C7C2C2;
height: 80px;
}
.logo {
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
color: #0E2B5E;
float:left;
width:100px;
padding-top:10px;
}
.header {
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
margin:0 200px 0 100px;
padding-top:25px;
}
.phonenumber {
text-shadow: black 0.1em 0.1em 0.2em;
font-size: 1em;
padding: 5px;
float:right;
width:200px;
padding-top:10px;
}
HTML DIV position changes with Float layout:
<div class="wrapper">
<div class="nav">
<div class="phonenumber">Call us:<br>
909-256-0525</div>
<div class="logo"><em>BLI </em></div>
<div class="header"><em>California's Leader in Workers' Compensation</em></div>
</div>
</div>
CSS3 Code with Box Flex layout:
.wrapper {}
.nav {
display:box;
display:-webkit-box;
display:-ms-flexbox;
display:-moz-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-align:center;
-ms-flex-align:center;
-moz-box-align:center;
width:100%;
vertical-align:middle;
box-sizing:border-box;
color: #FFFFFF;
font-size: 1.563em;
font-weight: bold;
font-family: Arial;
background-color: #C7C2C2;
height: 80px;
}
.logo {
font-family: Georgia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
font-size: 2em;
color: #0E2B5E;
}
.header {
box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-moz-box-flex:1;
display:block;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
}
.phonenumber {
text-shadow: black 0.1em 0.1em 0.2em;
font-size: 1em;
padding: 5px;
}
If required more help, Please most welcome :)