Left Center and Right align

[ebm]

I am working on a web page where I am trying to have text aligned left, center, and right within a container div (think 3 titles in newspaper columns for a visual). The closest I have gotten aligns everything correctly, but on separate lines. The CSS of my test file is:


<style type="text/css">
.container {
height:20px;
width:800px;
text-align:center;
}
.left {
float:left;
}
.center {
margin-left:auto;
margin-right:auto;
}
.right{
float: right;
}
</style>


And the HTML is:


<div class='container'>
<div class='center'>Center</div>
<div class='left'>Left</div>
<div class='right'>Right</div>
</div>

If I put a float:left in the Center div, that puts everything on the same line, but the text is no longer centered. Thanks for taking a look.

[felgall]

Each of the divs needs a width in order for the floats and margins to actually do what you want. At the moment your left div is floated left but has a 100% width so nothing can fit next to it, your center div has a 100% width and therefore no room for margins etc.

[ebm]

Thanks for the quick reply! I just tried setting the divs to a few arbitrary width values, but I am still experiencing the same issue.

[AhmedYB]

How to make div table(?) flow from right and not left side?