Strange CSS Border Issue in Chrome - css

I have written an application from which you can write checks and I have the following markup on one of the pages to view and edit some of the fields of the check.
#CheckInformation {
border: 1px solid #aaa;
padding: 10px;
background-color: #E2F0F9;
margin-top: 15px;
}
#CheckInformation #PropertyAddress {
font-size: .87em;
width: 200px;
float: left;
text-align: center;
}
#CheckInformation .label-column {
width: 100px;
}
#CheckInformation .payto-col {
width: 570px;
}
#CheckInformation .line {
border-bottom: 1px solid #aaa;
}
#CheckInformation #PayTo {
width: 540px;
}
#CheckInformation #Address {
width: 200px;
height: 45px;
}
#CheckInformation #Memo {
width: 400px;
}
#CheckInformation #NumberWords {
margin: 3px;
font-style: italic;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet" />
<div id="CheckInformation">
<table>
<tr>
<td class="top" colspan="2" rowspan="2">
<div id="PropertyAddress">
1234 Main St
<br />Some city, State 50000
</div>
</td>
<td class="text-right label-column">Date</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td class="text-right">Check Number</td>
<td>
<input type="text"></input>
</td>
</tr>
<tr>
<td>Pay to</td>
<td class="payto-col line">
Some person
</td>
<td class="text-right">Amount</td>
<td class="text-right line">
70.00
</td>
</tr>
<tr>
<td></td>
<td class="line" colspan="3">
<div id="NumberWords">Zero Dollars & Zero Cents</div>
</td>
</tr>
<tr>
<td class="top">Address</td>
<td colspan="3">
<div id="Address">
1234 Main St
<br />Some city, State 50000
</div>
</td>
</tr>
<tr>
<td>Memo</td>
<td colspan="3">
<input type="text"></input>
</td>
</tr>
</table>
</div>
It is supposed to have a bottom border on the tds that displays who the check was written to and the amount but not on the labels for those cells. It actually sees to appear correctly in IE and FireFox but in Chrome, I get a bottom border under the Amount label as well.
Running IE 9, FireFox 6.0.2, and Chrome 16.0.912.63
Anyone else see the issue?

Adding table{border-collapse:separate} seems to fix it but I don't know why. I'll update the answer if I figure out more.

Related

cannot change hover color for link inside a div

I try to add a custom color to a link inside a div but its not working, the color does not change. Why is that?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.navigation-div a {
display: block;
font-size: 18px;
color: #14133b !important;
line-height: 1;
margin-bottom: 26px;
}
.navigation-div a:hover {
color: #CEA941 !important;
}
.navigation-div a:visited {
color: #14133b !important;
}
.navigation-div a:link {
color: #14133b !important;
}
.navigation-div a:visited {
color: #14133b !important;
}
</style>
</head>
<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody><tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td valign="top"></td>
<td><div class="navigation-div">
Motor </div>
</td>
<td><div class="navigation-div">
12345 </div>
</td>
</tr>
</tbody></table>
</body>
</html>
So since you're using a table you have to go through each element like this :
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
/* a{
color: black;
}
a:hover{
color: reds;
} */
table> tbody > tr>td>.navigation-div >a:hover{
color: red;
}
</style>
</head>
<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody>
<tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td valign="top"></td>
<td><div class="navigation-div">
Motor </div>
</td>
<td><div class="navigation-div">
12345 </div>
</td>
</tr>
</tbody></table>
</body>
</html>
Remove the important keyword from your style in .navigation-div a, a: link and a:visited (you dont need the important keyword anywhere):
.navigation-div a {
display: block;
font-size: 18px;
color: #14133b;
line-height: 1;
margin-bottom: 26px;
}
You're overwriting your hover styles with the :link selector a couple of lines later. In general, try and avoid overusing !important - there's no need for it in this situation. Try this:
.navigation-div a {
display: block;
font-size: 18px;
color: #14133b;
line-height: 1;
margin-bottom: 26px;
}
.navigation-div a:hover {
color: #CEA941;
}
.navigation-div a:visited {
color: #14133b;
}
<table class="table" style="border-bottom: 0px solid black;">
<tbody>
<tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td valign="top"></td>
<td>
<div class="navigation-div">
Motor </div>
</td>
<td>
<div class="navigation-div">
12345 </div>
</td>
</tr>
</tbody>
</table>
If you really need to keep the !important rules, you can just move your :hover style underneath the :link
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.navigation-div a {
display: block;
font-size: 18px;
color: #14133b !important;
line-height: 1;
margin-bottom: 26px;
}
td .navigation-div a:hover {
color: #CEA941 !important;
}
.navigation-div a:visited {
color: #14133b !important;
}
.navigation-div a:link {
color: #14133b !important;
}
.navigation-div a:visited {
color: #14133b !important;
}
</style>
</head>
<body>
<table class="table" style="border-bottom: 0px solid black;">
<tbody><tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td valign="top"></td>
<td><div class="navigation-div">
Motor </div>
</td>
<td><div class="navigation-div">
12345 </div>
</td>
</tr>
</tbody></table>
</body>
</html>
use this code . it's work .
All those !important "collide" with each other; simply maintaining the one assigned to the navigation-div a:hover should be enough. Try not overuse the !important keyword, usually it's not the best thing to do.
In your code, the color property of navigation-div a:hover was overwritten multiple times by the other selectors. The only one that should prevail on the others, for your intended behavior, is the hover one, in fact you could also omit the other selectors and so the use of !important.
.navigation-div a {
display: block;
font-size: 18px;
color: #14133b;
line-height: 1;
margin-bottom: 26px;
}
.navigation-div a:hover {
color: #cea941;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table class="table" style="border-bottom: 0px solid black">
<tbody>
<tr>
<td valign="top"></td>
<td valign="top">header 1</td>
<td valign="top">header 2</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td valign="top"></td>
<td>
<div class="navigation-div">
Motor
</div>
</td>
<td>
<div class="navigation-div">
12345
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Trying to use table to achieve CSS responsiveness but not working

I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->

Vertically align the text of each cell

I would like to know if there exists a technique to make the text set at the same line or at the same level because what I did is to add a line-height for my two first blocks but if I add a line-height for the others there is still a difference. It creates a weird look because my titles are not the same in each cell.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
All you need is vertical-align:baseline on the table cells. td elements have vertical-align:middle by default.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
vertical-align:baseline;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>

custom table td witdh

The problem :
HTML
<div class="visible-sm visible-xs " id="aatablet" style="padding-left: 0px; padding-bottom:10px; padding-top:10px; text-align: center;">
<table border="1">
<tr>
<td colspan="4" class="item_title">
<div style="padding-top:5px;">
Available at:
</div>
</td>
</tr>
<tr>
<td >
<img src="img/amazon-lrg.gif" alt="amazon" />
</td>
<td>
<img src="img/ebay-lrg.gif" alt="ebay" />
</td>
<td >
<img src="img/tomatomill-lrg.gif" alt="tomatomill" />
</td>
<td ><img src="img/BBG-lrg.gif" alt="BBG" />
</td>
</tr>
<tr>
<td >
</td>
<td>
<img src="img/sears-lrg.gif" alt="sears" />
</td>
<td >
<img src="img/healthcraft-home-logo.gif" alt="Healthcraft" title="Healthcraft" />
</td>
<td >
<img src="img/paradisecozycabins.jpg" alt="paradisecozycabins" title="paradisecozycabins" />
</td>
</tr>
</table>
</div>
CSS
#aatablet > table {
margin:0 auto;
}
Framework:bootstrap 3.4.
I want to make td of tomato logo width 100px not 178px like Helt Craft and td of Paradise(last td) 50px not 150px like BIGGAME.
Can someone help me ?I'm not good at making custom tables.Is it possible to do it whit only CSS?
Ty all.
You can give inline:block for td and give separate widths. Target each td using :nth-of-type
td{
display: inline-block;
}
tr:first-child td:nth-of-type(3){
width: 100px;
}
tr:last-child td:nth-of-type(4){
width: 50px;
}

HTML + CSS, i cant seem to get two horizontally alligned divs to line up

I have two div inside a third, I want the borders to line up but whilst they are next to eachother one is inexplicably slightly lower than the other ...
<div class="application">
<div class="contactMeForm">
Contact Us
Please provide as much information as possible about your query</br>
If you are requesting a quote this will help us to better estimate the costs involved.
<form name="contactform" method="post" action="send_form_email.php">
<table width="450px">
<tr>
<td valign="top"><label for="first_name">First Name *</label></td>
<td valign="top"><input type="text" name="first_name" maxlength="50" size="30"></td>
</tr>
<tr>
<td valign="top""><label for="last_name">Last Name *</label></td>
<td valign="top"><input type="text" name="last_name" maxlength="50" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="email">Email Address *</label></td>
<td valign="top"><input type="text" name="email" maxlength="80" size="30"></td>
</tr>
<tr>
<td valign="top"><label for="telephone">Telephone Number</label></td>
<td valign="top"><input type="text" name="telephone" maxlength="30" size="30"></td>
</tr>
<tr>
<td valign="top"></td>
<td valign="top"><input type="radio" name="enquiry" value="Website Solution Quote">Website Solution Quote</td>
</tr>
<tr>
<td valign="top"><label for="comments">Enquiry Nature *</label></td>
<td valign="top"><input type="radio" name="enquiry" value="Mobile Solution Quote">Mobile Solution Quote</td>
</tr>
<tr>
<td valign="top"></td>
<td valign="top"><input type="radio" name="enquiry" value="Other">Other</td>
</tr>
<tr>
<td valign="top"> <label for="comments">Comments *</label></td>
<td valign="top"><textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align:center"><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<div class="contactMeHelp">
Extra details on how to fill in the form
</div>
</div>
And this is the CSS for the three divs
.application {
width: 97%;
margin: 20px 2% 0px 2%;
text-align: center;
display: block;
border: 2px #000000 solid;
}
.contactMeForm {
display: inline-block;
border: 5px #9E9FA1 solid;
border-right: 0px;
width: 49%;
color: #48494B;
text-align: left;
}
.contactMeHelp {
display: inline-block;
border: 5px #9E9FA1 solid;
border-left: 0px;
width: 49%;
color: #48494B;
text-align: right;
}
This is how it currently looks
http://masterzangetsu.eu/ContactMe/
Any help would be great
add
vertical-align: top;
To your two divs
Just add a "float: right;" to the .contactMeHelp element. That should do the trick.
Two problems:
1.) You do not have your float parameters set for each of your containing divs. Setting them to left and right depending on where they should be will fix it.
2.) Doing the above will still leave some weird block alignment in the .application div. This is because its height of the right-most div is not stretched to its parent div, you can do this by setting the height:100%.
Here is a fiddle showing you the results: http://jsfiddle.net/5T3NC/

Resources