Solved

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

Posted on 2010-09-16
7
401 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:TrialUser
  • 4
  • 3
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33692265
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
 

Author Comment

by:TrialUser
ID: 33692334
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
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 33692336
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33692444
<<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
 

Author Comment

by:TrialUser
ID: 33692523
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33692547
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
 

Author Comment

by:TrialUser
ID: 33692962
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now