Solved

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

Posted on 2010-09-16
7
409 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html using "Or" in condition 3 27
Table doesn't show the lines! 3 24
ASP.NET Built-In Report Creator / Viewer 5 25
bootstrap css color change 10 23
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

733 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