Click here to Skip to main content
15,921,959 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
i want to make same like facebook signup page, check out that section area, and check this image:http://imgur.com/itYcrKw

HTML
<div id="DivSection">

			<div id="DivContent">
				<div id="DivSlogan">
					<label id="slogan">Facebook help you to connecct and share
						with the<br> people in your life.
					</label>
				</div>

				<div id="DivHomeImage">
					<img alt="homeImage" src="img\fbhome.png">
				</div>

			</div>

			<div id="DivSignUp">



				<table>

					<tr>
						<td colspan="2"><label style="font-size: xx-large;"
							class="lblbold">Create an account</label></td>
						<td></td>
					</tr>

					<tr>
						<td colspan="2"><label class="lblbold">it's free and
								always will be.</label></td>
						<td></td>
					</tr>


					<tr>
						<td><input id="inputFS" type="text" class="inputSup"
							name="fname" placeholder="First Name"></td>
						<td><input id="inputFS" type="text" class="inputSup"
							name="sname" placeholder="Surname"></td>
					</tr>

					<tr>
						<td colspan="2"><input type="text" class="inputSup"
							name="mobeml" placeholder="Mobile number or email address">
						</td>

					</tr>

					<tr>
						<td colspan="2"><input type="text" class="inputSup"
							name="rmobeml"
							placeholder="Re-Enter mobile number or email address"></td>

					</tr>

					<tr>
						<td colspan="2"><input type="text" class="inputSup"
							name="npsw" placeholder="New password"></td>

					</tr>

					<tr>
						<td><label class="lblbold">Birthday</label></td>
					</tr>

					<tr>
						<td><select name="day" class="seldob">
								<option value="0" selected>Day</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
								<option value="13">13</option>
								<option value="14">14</option>
								<option value="15">15</option>
								<option value="16">16</option>
								<option value="17">17</option>
								<option value="18">18</option>
								<option value="19">19</option>
								<option value="20">20</option>
								<option value="21">21</option>
								<option value="22">22</option>
								<option value="23">23</option>
								<option value="24">24</option>
								<option value="25">25</option>
								<option value="26">26</option>
								<option value="27">27</option>
								<option value="28">28</option>
								<option value="29">29</option>
								<option value="30">30</option>
								<option value="31">31</option>

						</select> <select name="month" class="seldob">
								<option value="0">Month</option>
								<option value="1">Jan</option>
								<option value="2">Feb</option>
								<option value="3">Mar</option>
								<option value="4">Apr</option>
								<option value="5">May</option>
								<option value="6">Jun</option>
								<option value="7">Jul</option>
								<option value="8">Aug</option>
								<option value="9">Sep</option>
								<option value="10">Oct</option>
								<option value="11">Nov</option>
								<option value="12">Dec</option>
						</select> <select name="year" class="seldob">
								<option value="0">Year</option>
								<option value="1">2010</option>
								<option value="2">2011</option>
								<option value="3">2012r</option>
								<option value="4">2013</option>
								<option value="5">2014</option>
								<option value="6">2015</option>
								<option value="7">2016</option>
						</select></td>
						<td><label class="lblnote"><a href="">Why do i
									need to provide my<br> date of birth?
							</a></label></td>
					</tr>

					<tr>
						<td colspan="2"><input type="radio" name="gender"
							value="female"><label>Female</label> <input type="radio"
							name="gender" value="male" checked><label>Male</label></td>
					</tr>

					<tr>
						<td colspan="2"><label class="lblnote">By clicking
								Create an account, you agree to our <a href="">Terms</a> and<br>
								that you have read our <a href="">Data Policy</a> , including
								our <a href="">Cookie Use</a>.
						</label></td>
					</tr>

					<tr>
						<td id="tdCreAcc" colspan="2"><input id="btnCA" type="submit"
							name="signup" value="Create an account"></td>
					</tr>

					<tr>
						<td colspan="2"><label> <a href="">Create a Page</a>
								for a celebrity, band or business.
						</label></td>
					</tr>

				</table>

			</div>


		</div>



CSS code

CSS
body
{
	margin: 0 auto;
	height:100%;
	font-family: Calibri;
	overflow: scroll;
}



#DivBody
{
	margin: auto;
	width:1024px;
}

#DivHeader
{	
	margin:auto;
	width:100%;
	color: white;
	background-color: #3b5998;
	display: inline-block;
}



#DivSection
{
	height: 83%;
    position: absolute;
    width: 1024px;   
    border: 1px solid gray;
    padding-top: 23px;
}

#DivContent
{
	width: 50%;
}

#DivSlogan
{
	float:left;
    color: #0e385f;
    font-size: 20px;
    font-weight: bold;
}

#DivHomeImage
{ 
	float:left;
	margin-top:  5%;
	position: absolute;
}

#DivSignUp 
{
	float: right;
	border-radius: 5px;
	    position:absolute;
    right: 171px;
}





#DivFooter
{
	
	width:1024px ;
	display: inline-block;
    bottom: 0;
    
}


What I have tried:

i have tried to give "float:left" to the child left side divs, and give float:right to child right side div but not get proper display.
Posted
Updated 13-Apr-16 21:05pm
v2
Comments
Sergey Alexandrovich Kryukov 13-Apr-16 16:28pm    
Why not telling us what you have tried, just mentioning? Only some code sample would make sense here.
Please use "Improve question".

Now, the width of the page is different and can be changed at any time. How would you want to distribute it between columns?

Anyway, columns design is shown in many places.

—SA
Karmesh_Madhavi 13-Apr-16 17:11pm    
i give link of image in question, check it, my expectation.
Mircea Diaconescu 13-Apr-16 17:43pm    
Trying to understand the problem:

1) you have a parent div, divA.
2) you have a child div of divA, namely divB.
3) you have a child div of divA, namely divC.
4) you want divB aligned left and divC aligned right.

Is that what you ask ?

In the picture you show there are multiple div elements and also in your code and CSS,
so your question is far from being clear.

1 solution

Float: left to divContent and you should be all set. Remove floats from Slogan and HomeImage. You have to float parent containers.

Anyhow, better design would be to put everything in 2-column layout or even use modern columned div (assuming you don't have to support older browsers).

You could use
HTML
<aside>
tag (html 5) for your login part.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900