Below here is the code that I wrote. I wanted a page with 3 table cells, where left one will be one table cell with 50% width of the page, and the right cell will be divided into 2 cells each with 50% height. The code below works partially fine.
The issue is the right 2 cells width gets reduced(screenshot attached). Can't figure out how to get the width to work :")
<div style="display: table; width: 100%; height:100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%; border-style: ridge; height: 713px">
<?php
foreach($doctors as $entry)
{
echo '<div style="display: table-row; width=100%;">
<div style="display:table-cell; width:25%;">
<p style="margin-left:10px;">'.$entry["name"].'</p>
</div><div style="display:table-cell; width:20%;">
<p>'.$entry["id"].'</p>
</div><div style="display:table-cell; width:20%;">
<p>'.$entry["designation"].'</p>
</div><div style="display:table-cell;">
<p>'.$entry["salary"].'<button class="btn" name='.$entry["id"].' style="margin-left:100px; width;">Edit salary</button></p>
</div>
</div>';
}
?>
</div>
<div style="display: table-cell; width: 100%;">
<div style="display: table-row;">
<div style="display: table-cell;">
<center>
<form style="border-style: ridge; height: 350px; padding-top: 17px;">
<label class="text" for="id">Enter ID: </label>
<input id="text-box" class="text" type="text" name="id" placeholder="Enter id"><br>
<button id="btn" class="text">Search</button>
</form>
</center>
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">
<center>
<form style="border-style: ridge; height: 350px; padding-top: 17px;">
<label class="text" for="id">Enter ID: </label>
<input id="text-box" class="text" type="text" name="id" placeholder="Enter id"><br>
<button id="btn" class="text">Search</button>
</form>
</center>
</div>
</div>
</div>
</div>
</div>
Related
<div class="limiter">
<div class="container-login100">
<img width="500" height="40" src="../plugins/images/Electronic Document Management System.png">
<div class="wrap-login100">
<form class="login100-form validate-form">
<p style="color: #1A0D44" class="login100-form-title p-b-10">
Login
</p>
</br>
<div class="wrap-input100 validate-input" data-validate="Valid email is: a#b.c">
<input class="input100" type="text" name="email">
<span class="focus-input100" data-placeholder="Email"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div style="margin:auto 0; text-align: center;">
<button type="button" href="">Forgot Password?</button>
</div>
</br>
<div style="margin:auto 0; text-align: center;">
<button type="button" style=" background-color: #1A0D44; color: white; padding: 5px 15px;
border-radius: 60px; border: 1px solid #1A0D44 ;" data-toggle="modal">Login</button>
</div>
</form>
</div>
</div>
</div>
Have you tried giving it a flex display?
https://www.w3schools.com/css/css3_flexbox.asp
We would have to see the rest of your source, but given no other information by setting .container-login100 to text-align: center the image and the contents of the form are centered.
.container-login100 {
text-align: center;
}
<div class="limiter">
<div class="container-login100">
<img class="center" width="500" height="40" src="../plugins/images/Electronic Document Management System.png">
<div class="wrap-login100">
<form class="login100-form validate-form">
<p style="color: #1A0D44" class="login100-form-title p-b-10">
Login
</p>
</br>
<div class="wrap-input100 validate-input" data-validate="Valid email is: a#b.c">
<input class="input100" type="text" name="email">
<span class="focus-input100" data-placeholder="Email"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div style="margin:auto 0; text-align: center;">
<button type="button" href="">Forgot Password?</button>
</div>
</br>
<div style="margin:auto 0; text-align: center;">
<button type="button" style=" background-color: #1A0D44; color: white; padding: 5px 15px;
border-radius: 60px; border: 1px solid #1A0D44 ;" data-toggle="modal">Login</button>
</div>
</form>
</div>
</div>
</div>
Add a class that sets the element to be at the top of its parent(body tag) and center it using know width of element.
You will need to move your image tag to be a child of the body tag.
<style>
.center-top {
width: 500px;
height: 40px;
position: absolute;
top: 0;
left: 50%;
margin-left: -250px;
}
</style>
<body>
<img
src="background1.jpg"
class="center-top"
>
...
I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.
I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.
So far all I have is the fields inside a div:
<div class="container" align="center">
#formContainer{
width:40%;
margin:auto;
}
#formC{
width:100%;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
.theLabels{
width:30%
float:left;
}
.theInputs{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
<div class="column">
<label class="theLabels">
URL:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Code Base:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Email:
</label>
<input class="theInputs" type="email"/>
</div>
</div>
</form>
</div>
</body>
</html>
If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps
Are you using Bootstrap?
Make a main div and place everything inside it.. like
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
See HERE
A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.
Fiddle:
https://jsfiddle.net/7mnxwdgv/14/
<html>
<head>
<style type="text/css">
div.container {
width: 350px;
padding: 15px;
margin: 50px auto 0px auto;
clear: both;
overflow: hidden;
}
div.container span.label-holder {
display: block;
width: calc(25% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder {
display: block;
width: calc(75% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form>
<span class="label-holder"><label for="url">URL</label></span>
<span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>
<span class="label-holder"><label for="code-base">Code Base</label></span>
<span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>
<span class="label-holder"><label for="from">From</label></span>
<span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>
<span class="label-holder"><label for="to">to</label></span>
<span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>
<span class="label-holder"><label for="email">Email</label></span>
<span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>
<span class="label-holder"><label for="app-serv">Application Servers</label></span>
<span class="input-holder">
<select name="app-serv" id="app-serv">
<option value="Incent">Incent</option>
</select>
</span>
</form>
</div>
</body>
</html>
I am using bootstrap 3 in a small div. When I increase the window's width by dragging the window - the fields (username and password input fields) that are supposed to stay in the interior of the div move out to almost the center of the window. Why? CSS and HTML are below
<body>
<div class="login">
<div class="container">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS----
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
JS Fiddle
The elements containing your labels (.col-xs-4) have a width: 33.33333%.
The elements containing your input fields (.col-xs-8) have a width: 66.6666667%.
When the screen is narrow these width values are small and the labels and inputs are close together.
When the screen expands, these width values expand as well, creating a progressively larger gap between label and input.
The answer is to give the container a width constraint.
Add this style to the container class:
.col-md-12 { max-width: 250px; }
I tested it in Chrome and it works. Also, here's a live demo:
http://jsfiddle.net/y0psw5dn/
You seemed to inproperly set .login to height:200px.
.login{
/*height:200px*/
}
Is is what you want?
Try this.
<div class="login">
<div class="row">
<div class="col-md-12">
<form action="https://www.blah/login" />
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username:" required/>
<br>
</div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password:" required/>
<br>
</div>
<input type="checkbox" name="retrieve" value="true" />I forgot my password.
<ul class="no-bullets">
<li>
<input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now">
</li>
<li>
<input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel">
</li>
</ul>
</div>
</div>
</div>
.login {
height: 200px;
width: 330px;
max-width: 330px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
JSfiddle
Just put the .login div under the .container div. Below the code is
<div class="container">
<div class="login">
See the jsfiddle demo.
I changed your structure. There was some wrong. You can check this demo on jsfiddle
I also using Bootstrap 3 here Just Check it out this code.
Your HTML code structure is not organized here. First you need to understand its row and columns architecture what the purpose Behind it.
and Here on many places you open the div but you are not closing your at proper Location Where you need to close it.
I used this HTML Code :
<div class="container">
<div class="col-md-12 login">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="row">
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8">
<input class="rounded white" type="text" name="username" placeholder="Username" required/><br>
</div>
</div>
<div class="row">
<div class="col-xs-4">Password:</div>
<div class="col-xs-8">
<input class="rounded white" type="password" name="password" placeholder="Password" required/><br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="checkbox" name="retrieve" value="true"/> I forgot my password.
</div>
</div>
<div class="row">
<div class="col-md-6">
<input class="bg-default btn-font" type="submit" name="register" value="Submit Now">
</div>
<div class="col-md-6">
<input class="bg-default btn-font" data-dismiss="modal" type="submit" value="Cancel">
</div>
</div>
</div>
and css code is here:
.login { height: 200px; width: 330px; max-width: 330px; padding: 10px 0px 10px 20px; background-color: #242424; border: 1px solid #545454; border-radius: 10px; color: #ddd; } .btn-font{ color: #000; }
and here is my running fiddle Example:
For Demo Click Here
hi please check below code it should be within container...
<div class="container">
<div class="login">
<div class="col-md-12">
<div class="row">
<form action="https://www.blah/login"/>
<h3>Login</h3>
<div class="col-xs-4">UserName:</div>
<div class="col-xs-8"><input class="rounded white" type="text" name="username" placeholder="Username:" required/><br></div>
<div class="col-xs-4">Password:</div>
<div class="col-xs-8"><input class="rounded white" type="password" name="password" placeholder="Password:" required/><br></div>
<input type="checkbox" name="retrieve" value="true"/>I forgot my password.
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
check the demo here
Just change your upper starting structure of your html like this only
<div class="container">
<div class="row-fluid">
<div class="login">
the problem is with your html structure still many wrong things are
present you can make it better just try to improve by understanding the grid system of Bootstrap
it happens because of the improper structure sequence so that
here is the working demo jsfiddle
DEMO check out
here i tried to modify your code my way you can check out
.login {
height:280px;
max-width:250px;
padding: 10px 20px 10px 20px;
background-color: #242424;
border: 1px solid #545454;
border-radius: 5px;
color: #ddd;
}
.temp_div{
float: left;
margin-top: 10px;
}
.forgetPass_check{
padding-right:5px;
vertical-align:bottom;
padding-left: 15px;
}
.forgetPass_label{
padding-left:10px;
}
.no-bullets{
list-style-type: none;
margin: 0;
padding-left: 15px;
}
ul.no-bullets li{
float: left;
padding-right: 20px;
color:black;
}
<div class="container">
<div class="row-fluid">
<div class="login">
<form action="https://www.blah/login"/>
<h3 class="text-center">Login</h3>
<div class="col-xs-8"><label>UserName:</label><input class="rounded white" type="text" name="username" placeholder="Username:" required/></div>
<div class="col-xs-8"><label>Password:</label><input class="rounded white" type="password" name="password" placeholder="Password:" required/></div>
<div class="temp_div">
<div class="forgetPass_check">
<input type="checkbox" name="retrieve" value="true"/><label class="forgetPass_label">I forgot my password.</label>
</div>
<div class="button_wrapper">
<ul class="no-bullets">
<li><input class="color-brown white rounded float-left" type="submit" name="register" value="Submit Now"></li>
<li><input class="rounded margin-left-5px" data-dismiss="modal" type="submit" value="Cancel"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
here is the demo code as well
Please Check Out Modified
even you can check this
Another try
I'm trying to find a way to have a form that displays the fields horizontally rather than vertically....with the exception of the last column. I'd like that to span vertically. Here's the code I have for getting the 2 columns the way I'd like them:
<html>
<head>
<style type="text/css">
.display-label, .editor-label
{
margin: 1em 0 0 0;
display: block;
width: 300px;
}
.display-field, .editor-field
{
margin: 0.5em 0 0 0;
display: block;
width: 300px;
}
.sameline-wrapper
{
float: left;
display: inline;
}
.newline
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="test.html" method="post">
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a field:
</div>
<div class="display-field">
<input type="text" id="t1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a second field:
</div>
<div class="display-field">
<input type="text" id="t2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a third field:
</div>
<div class="display-field">
<input type="text" id="t3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a fourth field:
</div>
<div class="display-field">
<input type="text" id="t4" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a fifth field:
</div>
<div class="display-field">
<input type="text" id="Text1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a sixth field:
</div>
<div class="display-field">
<input type="text" id="Text2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a seventh field:
</div>
<div class="display-field">
<input type="text" id="Text3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a eigth field:
</div>
<div class="display-field">
<input type="text" id="Text4" style="width: 100px;" />
</div>
</div>
</div>
</form>
</body>
</html>
What I'm trying to accomplish now is to have a 3rd column to the left that spans the entire height of the other rows. The idea is to have a textarea control in there and it all look uniform. I've added this image to help see what I'm trying to do:
and here's a fiddle:
3 Column Form
I just don't know how to get that 3rd column to line up to the left of the others and to be the same height (vertically) as the other rows. Any help is greatly appreicated!
Rearrange your html to specify one div for each column like this:
<html>
<head>
<style type="text/css">
.newspaperCol
{
float: left;
width: 33%;
}
.display-label
{
margin: 1em 0 0 0;
display: block;
}
.display-field
{
margin: 0.5em 0 0 0;
display: block;
}
</style>
</head>
<body>
<div class="newspaperCol">
<label class="display-label">Field 1:</label>
<input class="display-field" type="text" id="text1">
<br />
<label class="display-label">Field 3:</label>
<input class="display-field" type="text" id="text3">
<br />
<label class="display-label">Field 5:</label>
<input class="display-field" type="text" id="text5">
<br />
<label class="display-label">Field 7:</label>
<input class="display-field" type="text" id="text7">
</div>
<div class="newspaperCol">
<label class="display-label">Field 2:</label>
<input class="display-field" type="text" id="text2">
<br />
<label class="display-label">Field 4:</label>
<input class="display-field" type="text" id="text4">
<br />
<label class="display-label">Field 6:</label>
<input class="display-field" type="text" id="text6">
<br />
<label class="display-label">Field 8:</label>
<input class="display-field" type="text" id="text8">
</div>
<div class="newspaperCol">
<label class="display-label">Notes:</label>
<textarea rows="17" cols="30" id="notestext"></textarea>
</div>
</body>
</html>
EDIT:
I re-read your question and updated my answer using more of your original code. I think you're missing some HTML for the notes elements. Try adding the colLeft and colRight css classes and the associated "div" elements shown below.
<html>
<head>
<style type="text/css">
.colLeft
{
float: left;
width: 66%;
}
.colRight
{
float: left;
width: 33%;
}
.display-label, .editor-label
{
margin: 1em 0 0 0;
display: block;
width: 300px;
}
.display-field, .editor-field
{
margin: 0.5em 0 0 0;
display: block;
width: 300px;
}
.sameline-wrapper
{
float: left;
display: inline;
}
.newline
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="test.html" method="post">
<div class="colLeft">
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a field:
</div>
<div class="display-field">
<input type="text" id="t1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a second field:
</div>
<div class="display-field">
<input type="text" id="t2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a third field:
</div>
<div class="display-field">
<input type="text" id="t3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a fourth field:
</div>
<div class="display-field">
<input type="text" id="t4" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a fifth field:
</div>
<div class="display-field">
<input type="text" id="Text1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a sixth field:
</div>
<div class="display-field">
<input type="text" id="Text2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a seventh field:
</div>
<div class="display-field">
<input type="text" id="Text3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a eigth field:
</div>
<div class="display-field">
<input type="text" id="Text4" style="width: 100px;" />
</div>
</div>
</div>
</div>
<div class="colRight">
<label>Notes:</label>
<textarea rows="15" cols="30" id="notestext"></textarea>
</div>
</form>
</body>
</html>
I am trying to design the layout in the below screenshot
I tried to implement the same in fiddle
http://jsfiddle.net/NNLct/1/
<div id="CorpDealerSearch" >
<div class="left"> DealerName </div>
<div class="left"> Region </div>
<div class="left"> DealerCode </div>
<div class="left"> Area </div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
<div class="left">
<input type="text"/>
</div>
</div>
Please help in suggesting proper css to get the design
Have a look at this FIDDLE
HTML
<div class='table'>
<div class='row'>
<div class='cell'>DealerName
<input type='text' />DealerCode
<input type='text' />
</div>
<div class='cell'>Region
<input type='text' />Area
<input type='text' />
</div>
</div>
</div>
CSS
body{
width:100%;
padding:0;
margin:0;
box-sizing:border-box;
}
.table {
display:table;
width:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding-right:20px;
}
input {
display:block;
width:100%;
}
Try something else:
http://jsfiddle.net/Ta6Qk/
HTML
<div class="main">
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
<div>
<label>Data</label>
<input type="text" value="">
</div>
</div>
and CSS
.main {
width: 400px;
position: relative;
}
.main div {
border: none;
display: inline-block;
width: 44%;
margin-right: 3%;
}
input {
width: 100%;
}
label {
display:block
}
You have to include label and input in the same div:
http://jsfiddle.net/NNLct/5/
Don't forget you can also use label tags to associate the text to the related input.
<div id="CorpDealerSearch" >
<div class="left">
DealerName <input type="text"/>
</div>
<div class="left">
Region <input type="text"/>
</div>
<div class="left">
DealerCode <input type="text"/>
</div>
<div class="left">
Area <input type="text"/>
</div>
</div>
CSS:
.left
{
float:left;
}
Going by your existing markup, here is a : DEMO
Float the elements and after every 2 element, clear the floats, as simple as that!! :)
CSS
.left {
float:left
}
.clr{clear:both}
HTML
<div id="CorpDealerSearch">
<div class="left">DealerName
<br />
<input type="text" />
</div>
<div class="left">Region
<br />
<input type="text" />
</div>
<div class="clr"></div>
<div class="left">DealerCode
<br />
<input type="text" />
</div>
<div class="left">DealerCode
<br />
<input type="text" />
</div>
</div>
See this fiddle:
http://jsfiddle.net/NNLct/16/
Using display:table; display:table-row; display:cell;
Here's the fiddle:Check this
Here's the HTML Code:
<div id="container">
<div id="left" class="left">
<div id="top-left" class="innerdiv">
<div id="lbl-tl">
Dealer Name:
</div>
<div id="txt-tl">
<input type="text" style="width: 90%;" />
</div>
</div>
<div id="bottom-left" class="innerdiv">
<div id="lbl-bl">
Dealer Code:
</div>
<div id="txt-bl">
<input type="text" style="width: 90%;" />
</div>
</div>
</div>
<div id="right" class="right" >
<div id="top-right" class="innerdiv">
<div id="lbl-tr">
Region:
</div>
<div id="txt-tr">
<input type="text" style="width: 90%;" />
</div>
</div>
<div id="bottom-right" class="innerdiv">
<div id="lbl-br">
Area:
</div>
<div id="txt-br">
<input type="text" style="width: 90%;" />
</div>
</div>
</div>
</div>
And here's the CSS:
*
{
margin: 0px;
padding: 0px;
}
#container
{
width: 700px;
min-height: 150px;
}
.left
{
width: 49%;
min-height: 150px;
float: left;
}
.right
{
min-height: 150px;
width: 49%;
float: right;
}
.innerdiv
{
height: 75px;
}
First I would change the html to:
HTML
<div id="CorpDealerSearch" >
<div>
<label for="dealerName">DealerName</label>
<input type="text" id="dealerName" name="dealerName">
<label for="Region">Region</label>
<input type="text" id="Region" name="Region">
</div>
<div>
<label for="DealerCode">DealerCode</label>
<input type="text" id="DealerCode" name="DealerCode">
<label for="Area">Area</label>
<input type="text" id="Area" name="Area">
</div>
</div>
And the css would be:
CSS
#CorpDealerSearch label, input{
float:left;
clear:both;
}
#CorpDealerSearch div{
display:block;
float:left;
width:200px;
}
hope this will help.