asked on

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

Gurvinder Pal Singh

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

TrialUser

ASKER

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.

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gurvinder Pal Singh

<<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.

TrialUser

ASKER

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.

Gurvinder Pal Singh

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

TrialUser

ASKER

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;
}