split a content div into 2 divs of equal size and spaced right

In my content page (980 px wide), I need to have two divs next to each other.
the two divs need to have like a header and content with some labels and textboxes how can i create the divs in such a way that they are having equal width and margins and spaced right in the centre.
I am trying to achieve this with one big container div and two divs inside of it. Each of these divs have a div for header. Please suggest if this is a good approach.

I have attached my html and stylesheet code here. please help thanks
<div id="divSignInContent" runat="server">
    <div class="divSignIn">
        <div class="divSignInHeader">
            <h1>returned customers</h1>
        </div>
        <p>login stuff</p>
    </div>
    <div class="divSignIn">
        <div class="divSignInHeader">
            <h1>registered customers</h1>
        </div>
        <p>other stuff</p>
    </div>
  </div>

css :
#divSignInContent
{	
	width:100%;
}
.divSignIn
{
	width:40%;
	margin:auto 10px;
	float:left;
	border: 1px solid gray;
	
}
.divSignInHeader
{
	background-color:Blue;
	color:White;
}

Open in new window

TrialUserAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
If you update the divSignIn class with code attached, then it works on IE8 also

.divSignIn
{
	width:40%;
	margin:auto 10px;
	border: 1px solid gray;
	display:-moz-inline-block; 
	display:-moz-inline-box; 
	display:inline-block;	
	display:inline;	
}

Open in new window

0
 
Gurvinder Pal SinghCommented:
I noticed that you are using float.
floating divs do not contribute to the parent element height, might give you issues, see this link
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

try this code also, worked for me on FF2, Safari4, Chrome6

Otherwise, your code looks ok to me.
<html>
<head>
<style>
html, body, div
{
	width:100%;
}
.divSignIn
{
	width:40%;
	margin:auto 10px;
	border: 1px solid gray;
	display:-moz-inline-block; 
	display:-moz-inline-box; 
	display:inline-block;	
}
.divSignInHeader
{
	background-color:Blue;
	color:White;
}
</style>
</head>

<body>
<div id="divSignInContent" runat="server">
    <div class="divSignIn">
        <div class="divSignInHeader">
            <h1>returned customers</h1>
        </div>
        <p>login stuff</p>
    </div>
    <div class="divSignIn">
        <div class="divSignInHeader">
            <h1>registered customers</h1>
        </div>
        <p>other stuff</p>
    </div>
  </div>
</body>
</html>

Open in new window

0
 
TrialUserAuthor Commented:
what  is : display:-moz-inline-box;
      display:inline-block;?

The float helps me to have the div next to each other. the only problem i seem to have with my code is , the margin. both the div are aligned to the left. i need the divs to be centred with proper margin inbetween ech other.

how can i make sure it is spaced in such a way that it displays properly in all browsers.
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Gurvinder Pal SinghCommented:
<<i need the divs to be centred with proper margin inbetween ech other.>>
In that case, if you can just give margin-left in the original code (class divSignIn) to replace the existing margin property value, then it should solve your problem.
0
 
TrialUserAuthor Commented:
When i do the above code, the two divs get place one below the other. what i amtrying to do is have the two divs next to each other. but the problem i have is they do not have the right margin.
0
 
Gurvinder Pal SinghCommented:
which browser did you tested on?
this worked for me on IE8, FF2, Safari4, Chrome6

<style>
#divSignInContent
{	
	width:100%;
}
.divSignIn
{
	width:40%;
	margin-left:5%;
	float:left;
	border: 1px solid gray;
	
}
.divSignInHeader
{
	background-color:Blue;
	color:White;
}
</style>


<div id="divSignInContent" runat="server">
    <div class="divSignIn">
        <div class="divSignInHeader">
            <h1>returned customers</h1>
        </div>
        <p>login stuff</p>
    </div>
    <div class="divSignIn">
        <div class="divSignInHeader">
            <h1>registered customers</h1>
        </div>
        <p>other stuff</p>
    </div>
  </div>

Open in new window

0
 
TrialUserAuthor Commented:
for some reason the above didnt work. the following seemed to work:<div id="divSignInContent" runat="server">
    <div class="divSignInLeft">
        <div class="divSignInHeader">
            <h1>returned customers</h1>
        </div>
        <p>login stuff</p>
    </div>
    <div class="divSignInRight">
        <div class="divSignInHeader">
            <h1>registered customers</h1>
        </div>
        <p>other stuff</p>
    </div>
  </div>

#divSignInContent
{      
      width:100%;
      
}
.divSignInLeft
{
      width:40%;
      margin-left:5%;
      float:left;
      border: 1px solid gray;
      
}
.divSignInRight
{
      width:40%;
      margin-right:5%;
      float:right;
      border: 1px solid gray;
      
}
.divSignInHeader
{
      background-color:Blue;
      color:White;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.