I am trying to finish up my website design but I am having trouble displaying some divs and aligning them.
This is what I am trying to achieve:
This is what I am getting:
index.php
style.css
jsFiddle: http://jsfiddle.net/wMvL5/
content (the central div that contains the 'Latest Projects' and 'Latest News' divs:
<div class="content">
<div class="projects">
<h1>Latest Projects</h1>
<div class="current_projects" align="center">
<div class="projects_gallery" align="center">
<table align="center">
<tr align="center">
<td>
<div class="project_desc_1">Project Description 1</div>
<div class="project_desc_2">Project Description 2</div>
<div class="project_desc_3">Project Description 3</div>
</td>
</tr>
<tr align="center">
<td>
<div class="slide"><img src="./images/blivori.png"/ id="project1"></div>
<div class="slide"><img src="./images/blivori.png"/ id="project2"></div>
<div class="slide"><img src="./images/blivori.png"/ id="project3"></div>
</td>
</tr>
<tr>
<td>
<ol class='project_selector' align="center">
<li></li>
<li></li>
<li></li>
</ol></td>
</tr>
<tr align="center">
<td>
<label id="description1">Description 1</label>
<label id="description2">Description 2</label>
<label id="description3">Description 3</label>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="empty_div_two"></div>
<div class="news">
<h1>Latest News</h1>
<div class="news_post" align="center">
<table align="center">
<tr>
<td style="width: 5%">►</td>
<td style="width: 95%"><label class="newspost1">News 1</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost2">News 1</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost3">News 2</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost4">News 3</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost5">News 4</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost6">News 5</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost7">News 6</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost8">News 7</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost9">News 8</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost10">News 9</label></td>
</tr>
<tr>
<td>►</td>
<td><label class="newspost10">News 10</label></td>
</tr>
</table>
</div>
</div>
Mostly I am having trouble of displaying two divs (empty_div_two) which is found between 'Latest Projects' and 'Latest News' (the seperator) and '.misc' which is being displayed at all. I am also trying to put the 'Latest News' at the top right of the div. Also, the border-radius for the header doesn't seem to work.
For border-radius on your header, Apply it to your .header-container instead of header.
.header-container {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
And to fix other things, do the following: SEE THE DEMO
.empty_div_two {
background: #fff;
}
.projects {
float: left;
width: 60%;
}
.news {
width: 30%;
}
.current_projects // remove width: 49%;
.content // remove width: 1184px;
Related
I am trying to make an HTML page which has a table center aligned.
Now I want to have a border to the entire page but on the center.
table {
min-width: 900px;
}
html,
body {
height: 100%;
min-width: 900px;
margin: 0;
padding: 0;
}
body {
background: white;
border-style: double;
}
<table class="table" align="center">
<tr>
<td colspan="2"> <img src="logo.png" class="logo" /> </td>
<td colspan="2" align="right">
<h3>Heading</h3>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
<tr>
<td> <input type="number" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
</tr>
<tr>
<td>Student ID Number</td>
<td>Last Name</td>
<td>First Name</td>
<td>Middle Name</td>
</tr>
</table>
I am looking for something like this. http://ibb.co/gyqTY6
My content is displayed in the entire page and I like to have a border to the center of the entire page.
The above styling gives me border on the entire page but I want to have a border on the center of the entire page.
It is not quite clear what you want, but perhaps applying a border only to the table is what you meant.
In that case, style the table accordingly.
Edit: especially, avoid applying border to the body, this won't get you the desired result.
Minimal suggestion:
table {
min-width: 900px;
border: 1px solid #000;
}
html,
body {
height: 100%;
min-width: 900px;
margin: 0;
padding: 0;
}
<table class="table" align="center">
<tr>
<td colspan="2"> <img src="logo.png" class="logo" /> </td>
<td colspan="2" align="right">
<h3>Heading</h3>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
<tr>
<td> <input type="number" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
<td> <input type="text" class="input"> </td>
</tr>
<tr>
<td>Student ID Number</td>
<td>Last Name</td>
<td>First Name</td>
<td>Middle Name</td>
</tr>
</table>
Tables should not be used for layout. They cause the rendering of the page to be slowed down and are not semantically correct. They should only be used to render tabular data.
Also, don't use h1, h2, etc. because of the way they make the text look, use them because they are the logical start of a new section of a particular importance. Any text can be styled to look like any other text.
So, the above two points really are talking about "semantics". The HTML tags you use should describe the data they convey, not the look of the data on the page. This allows for the data to be consumed anywhere, by any device and that device should understand what the data is. CSS is meant to make that data look how you'd like it to look. Don't confuse the two.
Now, you can "style" content to be displayed as a table using the CSS display property, which allows you to avoid using the <table> element and the related elements as well. But, your layout looks like simple columns, so you could approach this in a number of ways, but here's one:
html, body {
margin:0;
padding:0;
}
body {
background: white;
border: double;
}
.header h1 {
font-size:1.3em;
}
.wrapper {
border: 1px double black;
margin:25% 5px; /* Adding the same margin to top and bottom creates vertical alignment */
padding:10px;
}
.column {
display:inline-block;
}
<!-- By placing everything in a wrapper element, you can move it and style it easily -->
<div class="wrapper">
<div class="header">
<img src="logo.png" class="logo">
<h1>Heading</h1>
</div>
<div>
<hr>
</div>
<div class="column">
<input type="number" class="input"><br>
<span>Student ID Number</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>Last Name</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>First Name</span>
</div>
<div class="column">
<input type="text" class="input"><br>
<span>Middle Name</span>
</div>
</div>
Are you looking for something like this
.container{
border: 1px solid;
margin: 3%;
padding: 3%;
margin-right: 18%;
margin-left: 18%;
}
table{
margin:0 auto;
}
table th{
min-width:20%;
}
body{
background:red;
}
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
so after the text containing the emergency hotlines were aligned properly, I just cant seen to place the text under the image in order to present the data three in a row (I tried col-4 but json messed it up). My goal is image, then content of the numbers directly below it. I tried: text-align, float, display, media. any help would be appreciated thank you.
heres the current situation:
enter image description here
UPDATE: here is the JSfiddle of the question, placeholders are used to show the positioning. https://jsfiddle.net/ktbmLaq8/
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country"></h4>
<table class="table">
<tr class="remove-border">
<td ng-bind="service.hl1"></td>
<td class="text-left">
<div ng-bind="service.hl1num1"></div>
<div ng-bind="service.hl1num2"></div>
<div ng-bind="service.hl1num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl2"></td>
<td class="text-left">
<div ng-bind="service.hl2num1"></div>
<div ng-bind="service.hl2num2"></div>
<div ng-bind="service.hl2num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl3"></td>
<td class="text-left">
<div ng-bind="service.hl3num1"></div>
<div ng-bind="service.hl3num2"></div>
<div ng-bind="service.hl3num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl4"></td>
<td class="text-left">
<div ng-bind="service.hl4num1"></div>
<div ng-bind="service.hl4num2"></div>
<div ng-bind="service.hl4num3"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_cambodia.png">
<table class="services">
<tr>
<td class="country-title">Cambodia</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td></td>
<td>:023 723 555</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:023 366 841</td>
</tr>
<tr>
<td></td>
<td>:023 720 235</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:119</td>
</tr>
<tr>
<td></td>
<td>:023 724 891</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_indonesia.png">
<table class="services">
<tr>
<td class="country-title">Indonesia</td>
</tr>
<tr>
<td>Police</td>
<td>:110</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
<tr>
<td>Fire</td>
<td>:113</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:118</td>
</tr>
<tr>
<td>Medical Emergencies</td>
<td>:119</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_laos.png">
<table class="services">
<tr>
<td class="country-title">Laos</td>
</tr>
<tr>
<td>Fire</td>
<td>:190</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:195</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_malaysia.png">
<table class="services">
<tr>
<td class="country-title">Malaysia</td>
</tr>
<tr>
<td>Fire and Rescue</td>
<td>:994</td>
</tr>
<tr>
<td></td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance/Police  </td>
<td>:999</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_myanmar.png">
<table class="services">
<tr>
<td class="country-title">Myanmar</td>
</tr>
<tr>
<td>Fire</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:192</td>
</tr>
<tr>
<td>Police</td>
<td>:199</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_philippines.png">
<table class="services">
<tr>
<td class="country-title">Philippines</td>
</tr>
<tr>
<td>Disaster Risk    </td>
<td>:(02) 911-1406</td>
</tr>
<tr>
<td></td>
<td>:(02) 912-1406</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:911</td>
</tr>
<tr>
<td>Fire</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:(02) 729-5166</td>
</tr>
<tr>
<td></td>
<td>:(02) 410-6319</td>
</tr>
<tr>
<td>Red Cross</td>
<td>:(02) 527-0000</td>
</tr>
<tr>
<td></td>
<td>:(02) 527-8385</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_singapore.png">
<table class="services">
<tr>
<td class="country-title">Singapore</td>
</tr>
<tr>
<td>Fire and Ambulance  </td>
<td>:995</td>
</tr>
<tr>
<td>Police</td>
<td>:999</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_thailand.png">
<table class="services">
<tr>
<td class="country-title">Thailand</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td></td>
<td>:1195</td>
</tr>
<tr>
<td>Fire</td>
<td>:199</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:1554</td>
</tr>
<tr>
<td></td>
<td>:1669</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_vietnam.png">
<table class="services">
<tr>
<td class="country-title">Vietnam</td>
</tr>
<tr>
<td>Police</td>
<td>:113</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:115</td>
</tr>
</table>
</div> -->
The problem is that in your HTML structure, you are listing the information for all countries in a single collective table, while displaying the flags for each country outside of the table. It's not very easy to 'break up' this information that's all stored in the table.
The best way to solve this is to handle both the flag and service information for each country at the same time. In order to do this, first we convert all of your table elements to <div>s, add classes to each of the new divs, and slightly change their order:
<div class="country">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="country-info">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<div class="left" ng-bind="service.hl1">Service 1</div>
<div class="right" ng-bind="service.hl1num1">111</div>
<div class="left" ng-bind="service.hl2">Service 2</div>
<div class="right" ng-bind="service.hl1num2">222</div>
<div class="left" ng-bind="service.hl3">Service 2</div>
<div class="right" ng-bind="service.hl1num3">333</div>
</div>
</div>
Then you can target the respective contents much more easily :)
img.flagsize, .country-info {
max-width: 200px
}
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
You'll also need to specify that .country-info should be the same width as img.flagsize, or else the information will get pushed to the right of the page:
img.flagsize, .country-info {
max-width: 200px;
}
I've created a fiddle showcasing this here.
With this structure, you can change just about any aspect of the layout you'd like -- margins, padding, and heights no longer pose an issue ;)
Hope this helps! :)
i am designing a webpage which includes two tables.here is my code
<div>
<table style="width: 50%; height: 377px;">
<tr>
<td rowspan="4"><EMBED style="margin-left:20px" SRC="nesaranodu.mp4" WIDTH="500px" HEIGHT="400px" AUTOPLAY="FALSE" LOOP="false"></EMBED> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table style="width: 50%; height: 377px;display:inline-block;">
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white" >mobile number:</td>
<td><input name="Text1" type="text" /><h3 style="color:red;"><?php echo $mnoerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white">password</td>
<td><input name="Text2" type="password" /><h3 style="color:red;"><?php echo $passerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td ><input name="Submit1" type="submit" value="change address" />
<input onclick="document.location.href='regforswa.php'" name="Submit2" type="button" value="register" /><br/>
forgot password<h3 style="color:red;"><?php echo $success;?></h3></td>
</tr>
</table>
</div>
and i want to display it side by side.i used display:inline-block property but it is not working fine.please suggest me what i have to do.
http://jsfiddle.net/CHC67/
<div class=left>
//First table
</div>
<div class=right>
//Second table
</div>
<style>
.left {
width:50%;
float: left;
}
.right {
width 50%;
float: left;
}
</style>
Should really be doing this with divs rather than tables.
Try using floats on both tables:
<table style="width: 50%; height: 377px; float:left;">
Please make sure to set the width on the EMBED accordingly..
Otherwise it will grow over the 50% depending on the display size..
I have 2 tables beside each other Tested within the element of one bigger table
I have to align the columns elements of these 2 tables to display in a single line . . I havent been able to achieve it with valign or vertical-align . . Please help
<style type="text/css">
.FieldLabel {
padding: 2px;
width: 180px;
}
.Head {
text-align: left;
font-weight: bold;
font-size: 20px;
}
.auto-style1 {
width: 420px;
vertical-align: top;
}
.auto-style2 {
width: 420px;
vertical-align: inherit;
}
</style>
<div id="TXN_SAMPLES_createForm1">
<table>
<tr>
<td colspan="2" class="Head">Request Details
</td>
</tr>
<tr>
<td style="width: 500px">
<table>
<tr>
<td class="FieldLabel">Lead Src Code
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{Lead_Lead_Source_CODE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Request Date
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{REQUEST_DATE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Customer
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{CUST_NAME}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Product
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{PROD_NAME}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">DG/Non-DG
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{DG_NONDG}
</div>
</td>
</tr>
</table>
</td>
<td class="auto-style2">
<table>
<tr>
<td class="FieldLabel">.
</td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">.
</td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Country
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{COUNTRY}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Division
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{DIVISION}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel"></td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
</table>
</td>
<td style="width: auto">
<table style="float: right">
<tr>
<td class="FieldLabel"></td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel"></td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel"></td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Quantity (Kg)
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{QTY}
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="Head">Sample Details
</td>
</tr>
<tr>
<td style="width: 500px">
<table>
<tr>
<td class="FieldLabel">Dispatch Date
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{DISPATCH_DATE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Lot No.
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{LOT_NO}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">AWB No.
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{AWB_NO}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Dispatch Mode
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{DISPATCH_MODE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Freight (THB)
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{FREIGHT}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Additional Cost
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{ADDITIONAL_COST}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Receipt Conformation
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{RECEIPT_CONFORMATION}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Reason for Delay
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{REMARK}
</div>
</td>
</tr>
</table>
</td>
<td class="auto-style1">
<table>
<tr>
<td class="FieldLabel">Shipment Date
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{SHIPMENT_DATE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Packing
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{PACKING}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Process Time (days)
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{Process_Time}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Courier Service
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{COURIER}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Weight Charged
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{WEIGHT_CHARGEDBY_COURIER}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Lead Id
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{Lead_Id}
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
the problem is that your main table width was smaller that the three tables you were putting inside. so the third table with Quantity was getting crammed. i have added border colors to understand the whole thing better.
http://jsfiddle.net/btevfik/Hkcsr/
Avoid using Tables for creating layout. read it here.
Now, if you want to create two columnar layout using divs, containing form elements, see this simple html markup of mine:
create a container CSS class like this:
.table-container
{
margin: 2px;
border: 1px solid #e7e7e7;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
width: auto;
height: auto;
position: relative;
}
.property-row
{
margin: 5px;
overflow: hidden;
}
.property-name
{
width: 150px;
text-align: right;
padding: 5px;
color: #777777;
vertical-align: middle;
float: left;
}
and use it like this:
<div class="table-container float-left mediumPercentWidth">
<div class="property-row">
<div class="property-name">
<label>Lead Src Code</label>
</div>
<div>
<input type="text" class="mediumPercentWidth" />
</div>
</div>
</div>
I have created a sample here.
In this lookout, how, two divs are placed side by side using css property float:left. How at most places only percentage width is defined, to give it a fluid layout. Take notice of the pattern of the markup.
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)