Solved

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

Posted on 2010-09-16
7
400 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
<<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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 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

11 Experts available now in Live!

Get 1:1 Help Now