Problems with 3 divs in 1 div

[Dark Knight]

So, the problems is that in a div that I called "content" has 3 divs. For the first div I want to float it to left; 2nd to be in the center; 3rd to be float to right;

<div id="content"><div id="left">Left links</div><div id="center">The text displayed</div><div id="right">Right links</div></div>

The CSS style is:

#left {	float:left;	width:200px;	border:1px maroon solid;	margin-top:0px;	margin-bottom:0px;}#right {	float:right;	width:200px;	border:1px maroon solid;}#center {	text-align:center;	width:335px;	margin-top:0px;	margin-bottom:0px;	border:1px maroon solid;}

They don't align to left, center and right. Here is a preview

[dsonesuk]

move centre div below left and right float divs.will cause right div be placed at top edge.

They don't align to left, center and right

?? right wont align to the left, because it is floating right to rightmost edge of its container content div, which is set as default to full width (100%) of screen.to bring thes alll together you will have to set the width of content table you require, set width and margins, of center to width of 100% ,margin:0 210px;

<div id="content"><div id="left">Left links</div><div id="right">Right links</div><div id="center">The text displayed</div></div>

#content{width: 960px;}#left {	float:left;	width:200px;	border:1px maroon solid;	margin-top:0px;	margin-bottom:0px;}#right {	float:right;	width:200px;	border:1px maroon solid;}#center {	text-align:center;	margin-top:0px;	margin-bottom:0px;	border:1px maroon solid;	padding:0 210px;}

[Dark Knight]

To move the center div below the left and right divs? If so, the same result.

[Dark Knight]

move centre div below left and right float divs.will cause right div be placed at top edge.?? right wont align to the left, because it is floating right to rightmost edge of its container content div, which is set as default to full width (100%) of screen.to bring thes alll together you will have to set the width of content table you require, set width and margins, of center to width of 100% ,margin:0 210px;

<div id="content"><div id="left">Left links</div><div id="right">Right links</div><div id="center">The text displayed</div></div>

#content{width: 960px;}#left {	float:left;	width:200px;	border:1px maroon solid;	margin-top:0px;	margin-bottom:0px;}#right {	float:right;	width:200px;	border:1px maroon solid;}#center {	text-align:center;	margin-top:0px;	margin-bottom:0px;	border:1px maroon solid;	padding:0 210px;}

YES! Now it works!! Thank you so much!

[dsonesuk]

Not exactly same result,if you want to use your original code, it will only work if your css is simiilar to this

#left {	float:left;	width:200px;	border:1px maroon solid;	margin-top:0px;	margin-bottom:0px;}#right {	float:left;	width:200px;	border:1px maroon solid;}#center {	text-align:center;	margin-top:0px;	margin-bottom:0px;	border:1px maroon solid;	width:335px;float:left;}with original<div id="content"><div id="left">Left links</div><div id="center">The text displayed</div><div id="right">Right links</div></div>

[ShadowMage]

To get rid of that overlapping effect (where the left div seems to be inside the center one) just give overflow: auto; to the center div.