Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

center div between 2 divs

hello
i have 3 divs in a container. i seem to be having trouble getting the middle one (mailcenter) to center between the 2. i have attached my code and would be grateful if someone could tell me where i am going wrong. many thanks
css
==================================
#mailleft	{
	float: left;
	width: 150px;
	margin-top:180px;
	margin-left:17px;

	}
#mailright	{
	
float: right;
width: 150px;
margin-top:180px;

	
	}
.mailcenter	{

float: left;
width: 70%;
margin-top:180px;
 
	}
#container{
margin: 0 auto;   
text-align: left; 
width:97%;
		
		}

html
===============================================

<div id="container">
<div id="mailleft">
	<div id="accordion3">
    	<h2><a href="#">Mail</a></h2>
    	<div>First content</div>
    </div></div>
	<div class="mailcenter">
			<div id="accordion">
    		<h2><a href="#"><?php echo $_SESSION['kt_name_usr']; ?></a></h2>
    	<div>First content</div>
    </div></div>
	<div id="mailright"><div id="accordion2">
    	<h2><a href="#">Utilities</a></h2>
    	<div>First content</div>
    	<h2><a href="#">Tools</a></h2>
    	<div>Second content</div>
	</div></div>
</div>

Open in new window

0
peter_coop
Asked:
peter_coop
  • 2
  • 2
1 Solution
 
OnthraxCommented:
Looks good at first sight.. Is the container's width sufficient for all left/mid/right divs?
Try removing the width from the container and see what happens.

Also give the container a float left.
0
 
peter_coopAuthor Commented:
hi. if i remove the width totally throws the divs off. they seem to stack. also, other areas of the site rely on that container being that width. i have done a screenshot for your reference. thanks
divs.png
0
 
OnthraxCommented:
If the container width is a requirement than please restore it. However your screenshot indicates that without the container width the order is as it should be, correct?
This means the middle container has a too large width to fit in the container so you should experiment with that a little.
0
 
peter_coopAuthor Commented:
thank you
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now