Sorry if this is such a basic question, but how do I left align two text box elements in different divs with labels that are different lengths? I have a screen shot below. I want to align the textbox for "Dive Profile Id" and "Dive Profile Name". The way I have it now, is the "Dive Profile Id" and "Description" labels and textbox are in one div and the "Dive Profile Name" is in another div. How would I align these two input elements?
Here is my actual HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<LINK href="dive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline">
<label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
the easy way is to transform your label into inline blocks and giving them the same size
with something like this :
<label class="label" for="profileId"...
<label class="label" for="profileName" ...
and the CSS, for example:
.label {
display: inline-box;
width: 100px;
}
so if you want the style in your html :
<div id="topline">
<label for="profileId" style="display:inline-box;width:100px;">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="display:inline-box;width:100px;">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
<LINK href="dive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline">
<label for="profileId" style="vertical-align: top">Dive Profile Id </label><input style="vertical-align: top" type="text" name="profileId" id="profileId">
<br />
<label for="descriptionTxtArea" style="vertical-align: top;padding-left: 20px; ">Description</label><textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea"></textarea>
</div>
<div id="secondline">
<label for="profileName" style="position: relative; vertical-align: top; float: left">Dive Profile Name</label><input style="vertical-align: top" type="text" name="profileName" id="profileName">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
Include bootstrap.css
<html>
<head>
<title></title>
<!--INCLUDE BOOTSTRAP.CSS--->
<!-- <LINK href="dive.css" rel="stylesheet" type="text/css"> -->
<style>
label {
display: inline!important;
}
</style>
</head>
<body>
<div id="main" >
<div id="header">
<form name="header">
<div id="topline" class="span8 control-group">
<label for="profileId" class="control-label">Dive Profile Id </label>
<input type="text" name="profileId" id="profileId" class="controls">
<label for="descriptionTxtArea" class="control-label">Description</label>
<textarea rows="3" cols="50" name="descrptionTxtArea" id="descriptionTxtArea" class="controls"></textarea>
</div>
<div class="clearfix"></div>
<div id="secondline " class="control-group">
<label for="profileName" class="control-label" >Dive Profile Name</label>
<input type="text" name="profileName" id="profileName" class="controls">
</div>
</form>
</div>
<div id="profilePlot">
</div>
<div id="buttonMenu">
</div>
</div>
<div name="diveData">
</div>
<div id="mydiv">
</div>
</body>
</html>
Related
I am struggling with some weird scenario.
I am trying to set up background image of body but i does not want to appear on the page anyhow.
My project structure is correct I think:
I am trying to attach this image to body so it looks like this:
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
<title>Login Page</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Reference Bootstrap files -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-image: url("../images/backimg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div>
<div id="loginbox" style="margin-top: 50px;"
class="mainbox col-md-3 col-md-offset-2 col-sm-6 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<!-- Login Form -->
<form:form
action="${pageContext.request.contextPath}/authenticateTheUser"
method="POST" class="form-horizontal">
<!-- Place for messages: error, alert etc ... -->
<div class="form-group">
<div class="col-xs-15">
<div>
<!-- Check for login error -->
<c:if test="${param.error != null}">
<div class="alert alert-danger col-xs-offset-1 col-xs-10">
Invalid username and password.</div>
</c:if>
<c:if test="${param.logout != null}">
<div class="alert alert-success col-xs-offset-1 col-xs-10">
You have been logged out.</div>
</c:if>
</div>
</div>
</div>
<!-- User name -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-user"></i></span> <input type="text"
name="username" placeholder="username" class="form-control">
</div>
<!-- Password -->
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i
class="glyphicon glyphicon-lock"></i></span> <input type="password"
name="password" placeholder="password" class="form-control">
</div>
<!-- Login/Submit Button -->
<div style="margin-top: 10px" class="form-group">
<div class="col-sm-6 controls">
<button type="submit" class="btn btn-success">Login</button>
</div>
</div>
</form:form>
</div>
</div>
</div>
</div>
</body>
</html>
Such paths won't work:
-background-image: url("../images/backimg.jpg");
-background-image: url("../resources/images/backimg.jpg");
Any ideas? Thanks in advance.
You can try this way
background-image:url("src/main/webapp/resources/images/backimg.jpg")
I have 2 textboxes in an input-group, seperated by an input-group-addon span. My problem is, I want textbox 1 to be wider than textbox 2. Textbox 1 is supposed to be the phone number (larger) and textbox 2 is an extension number (slimmer). I have a fiddle below:
https://jsfiddle.net/Lhhj7f5d/
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension"/>
</div>
</div>
Thanks!
You can set a width to your form
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension" style="width : 20px;"/>
</div>
</div>
or use css
You need to put your input tag inside a div with col-xs-*.
#phoneField .col-xs-3{
padding:0;
}
#phoneField .col-xs-3::after{
content: "-";
position:absolute;
margin:5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-6">
<div id="phoneField" class="input-group">
<div class="col-xs-3">
<input class="form-control" type="text" placeholder="Ext" maxlength="3"/>
</div>
<div class="col-xs-9">
<input class="form-control" type="tel" placeholder="Phone Number" maxlength="10"/>
</div>
</div>
</div>
</body>
</html>
I have the following code and It does not stick to the middle of the page. I have tried many CSS tricks to get it to the center of the page but I cannot. Any suggestion? what should I add To CSS so it appears in middle of m page?
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="buynow.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>CrowdLinker</title>
</head>
<div class="container">
<div class='row '>
<div class="col-md-6 offset-md-3 ">
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'> </label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-md-12'>
<div class='form-control total btn btn-info'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
</div>
</form>
</div>
<div class='col-md-4'></div>
</div>
</div>
You can do this with a CSS rule, but here it is as an inline style:
Change
<div class="container">
to
<div class="container" style="text-align:center">
Result:
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="buynow.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>CrowdLinker</title>
</head>
<div class="container" style="text-align:center">
<div class='row '>
<div class="col-md-6 offset-md-3 ">
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'> </label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-md-12'>
<div class='form-control total btn btn-info'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
</div>
</form>
</div>
<div class='col-md-4'></div>
</div>
</div>
BOOTSTRAP FIX:
Replace col-md-6 offset-md-3 above the form tag with col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-5 col-lg-offset-3
NORMAL MODE :
Add float: none !important; margin: 0 auto;
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="buynow.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>CrowdLinker</title>
</head>
<div class="container" style="text-align:center">
<div class='row '>
<div class="col-md-6 offset-md-3 " style="float: none !important; margin: 0 auto;">
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<div class='form-row'>
<div class='col-xs-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-xs-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' size='4' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='col-xs-4 form-group expiration required'>
<label class='control-label'> </label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='col-md-12'>
<div class='form-control total btn btn-info'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay »</button>
</div>
</div>
<div class='form-row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
</div>
</form>
</div>
<div class='col-md-4'></div>
</div>
</div>
I have this Bootstrap horizontal form but the problem is label text is not aligned . How can I align the label text.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Signup Form</h3><hr/>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-4">
<input type="text" placeholder="Your Username ..." class="form-control"/>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-4">
<input type="email" placeholder="Your Email ..." class="form-control"/>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="bootstrap/js/jquery-1.11.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
I want Email label to be aligned with Username label
It is aligned right by default in Bootstrap stylesheet, you can give your form and id and add something like this to your stylesheet:
#signup-form label {
text-align: left;
}
This will align all the labels in your form to left, you may modify the selector to your needs to limit the scope of this style.
Working sample at JSBin.
.form-horizontal .control-label {
text-align: left;
}
simply use this.
CSS:
.control-label {
text-align:left!important;
}
( I have this in a jsfiddle site that can be seen here. )
Here is what is happening in Internet Explorer:
This is how I want it to look and ironically, IE is doing what I wanted.
When I view this in Chrome or Firefox, this is what is happening:
As you can see, it's not split down the center.
Here is what my razor page looks like:
#using System.Collections
#using SuburbanCustPortal.SuburbanService
#model SuburbanCustPortal.SuburbanService.CustomerData
#{
ViewBag.Title = "Account Screen";
}
<h2>AccountScreen</h2>
<div class="leftdiv">
<fieldset>
<legend>Customer Info</legend>
#Html.Partial("CustomerInfo", Model)
</fieldset>
<fieldset>
<legend>Delivery Address</legend>
#Html.Partial("DeliveryAddress", Model)
</fieldset>
<fieldset>
<legend>Delivery Info</legend>
#Html.Partial("DeliveryInfo", Model)
</fieldset>
</div>
<div class="rightdiv">
<fieldset>
<legend>Balance</legend>
#Html.Partial("AccountBalance", Model)
</fieldset>
<fieldset>
<legend>Account Options</legend>
<br/>
#using (Html.BeginForm("AccountScreenButton", "Customer", FormMethod.Post))
{
<div class="sidebysidebuttons">
<div class="box">
<button name="options" value="payment">Make a Payment</button>
<button name="options" value="activity">Display Activity</button>
</div>
</div>
}
</fieldset>
<fieldset>
<legend>Billing Info</legend>
#Html.Partial("BillingInfo", Model)
</fieldset>
</div>
And this is in my css file that I'm calling:
.leftdiv {
float: left;
width: 49%;
text-align: left;
display: inline;
}
.rightdiv {
float: right;
width: 49%;
text-align: left;
display: inline;
}
.sidebysidebuttons {
float: left;
display: block;
margin-left: 60px;
text-align:center
}
Anyone know how I can get them to look the same, or rather both like how IE is displaying them or see what I'm doing wrong?
===== as requested =====
This is the page source when the page has loaded:
<!DOCTYPE html>
<html>
<head>
<title>Your Company Name Here : Account Screen</title>
<link href="/Content/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/web.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/Views/main.js" type="text/javascript"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script>
$(function () {
$('.focus :input').focus();
});
</script>
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg"></div>
<div id="logindisplay">
Welcome <strong>webtest</strong>!
[ Log Off ]
</div>
<div id="menucontainer">
<ul id="menu">
<li>Home</li>
<li>Account</li>
<li>Make Payment</li>
<li>Order Gas</li>
<li>Contact Us</li>
<li>Update Login</li>
<li>* Sales *</li>
</ul>
</div>
<div id="main">
<h2>AccountScreen</h2>
<div class="leftdiv">
<fieldset>
<legend>Customer Info</legend>
<div class="leftdiv">
<br/>
<label class="sizedCustomerlabel">Account Number:</label>
<label class="sizedCustomerlabel">Name:</label>
<label class="sizedCustomerlabel">Mailing Address:</label>
<label class="sizedCustomerlabel">City:</label>
<label class="sizedCustomerlabel">St/Zip:</label>
<label class="sizedCustomerlabel">Phone Number:</label>
</div>
<div class="rightdiv">
<br/>
<label class="sizedCustomerDataLeftLabel">01 - 02228 </label>
<label class="sizedCustomerDataLeftLabel">PICKERING VALLEY CONTRAC </label>
<label class="sizedCustomerDataLeftLabel">960 POTTSTOWN PIKE </label>
<label class="sizedCustomerDataLeftLabel">CHESTER SPRINGS </label>
<label class="sizedCustomerDataLeftLabel">PA 19425 </label>
<label class="sizedCustomerDataLeftLabel">610 458-7200</label>
</div>
</fieldset>
<fieldset>
<legend>Delivery Address</legend>
<div class="leftdiv">
<br/>
<label class="sizedCustomerlabel">Care of:</label>
<label class="sizedCustomerlabel">Delivery Street:</label>
<label class="sizedCustomerlabel">Delivery City:</label>
</div>
<div class="rightdiv">
<br/>
<label class="sizedCustomerDataLeftLabel"> </label>
<label class="sizedCustomerDataLeftLabel"> </label>
<label class="sizedCustomerDataLeftLabel"> </label>
</div>
</fieldset>
<fieldset>
<legend>Delivery Info</legend>
<div class="leftdiv">
<br/>
<label class="sizedCustomerlabel">Last Delivery Date:</label>
<label class="sizedCustomerlabel">Number of Tanks:</label>
<label class="sizedCustomerlabel">Tank Serial#:</label>
<label class="sizedCustomerlabel">Tank Size:</label>
<label class="sizedCustomerlabel">Tank Type:</label>
<label class="sizedCustomerlabel">Qty Last Delivered:</label>
<label class="sizedCustomerlabel">Year To Date Deliveries:</label>
<label class="sizedCustomerlabel">Year To Date Gas:</label>
<label class="sizedCustomerlabel">Total Used Last Year:</label>
</div>
<div class="rightdiv">
<br/>
<label class="sizedCustomerDataLeftLabel">10/16/2012 </label>
<label class="sizedCustomerDataLeftLabel">1 </label>
<label class="sizedCustomerDataLeftLabel"> </label>
<label class="sizedCustomerDataLeftLabel">30 </label>
<label class="sizedCustomerDataLeftLabel"> </label>
<label class="sizedCustomerDataLeftLabel">15 </label>
<label class="sizedCustomerDataLeftLabel">4 </label>
<label class="sizedCustomerDataLeftLabel">70.4 </label>
<label class="sizedCustomerDataLeftLabel">117.0 </label>
</div>
</fieldset>
</div>
<div class="rightdiv">
<fieldset>
<legend>Balance</legend>
<div>
<div class="leftdiv">
<br/>
<label class="sizedCustomerlabel">Over 30:</label>
<label class="sizedCustomerlabel">Over 60:</label>
<label class="sizedCustomerlabel">Over 90:</label>
<label class="sizedCustomerlabel">Over 120:</label>
<label class="sizedCustomerlabel">Current:</label>
<label class="sizedCustomerlabel">Total:</label>
</div>
<div class="rightdiv">
<br/>
<label class="sizedCustomerDataRightlabel">$7.15 </label>
<label class="sizedCustomerDataRightlabel">$90.48 </label>
<label class="sizedCustomerDataRightlabel">$5.50 </label>
<label class="sizedCustomerDataRightlabel">$37.31 </label>
<label class="sizedCustomerDataRightlabel">$7.34 </label>
<label class="sizedCustomerDataRightLabelRed">$147.78 </label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Account Options</legend>
<br/>
<form action="/Customer/AccountScreenButton" method="post"> <div class="sidebysidebuttons">
<div class="box">
<button name="options" value="payment">Make a Payment</button>
<button name="options" value="activity">Display Activity</button>
</div>
</div>
</form>
</fieldset>
<fieldset>
<legend>Billing Info</legend>
<div>
<div class="leftdiv">
<br/>
<label class="sizedCustomerlabel">Budget Bal:</label>
<label class="sizedCustomerlabel">Budget Rate:</label>
<label class="sizedCustomerlabel">Non-Budget Bal:</label>
<label class="sizedCustomerlabel">LastPayment Date:</label>
<label class="sizedCustomerlabel">Last Payment Amount:</label>
<label class="sizedCustomerlabel">Security Deposit:</label>
<label class="sizedCustomerlabel">Prev Statment Bal:</label>
</div>
<div class="rightdiv">
<br/>
<label class="sizedCustomerDataRightlabel">$0.00 </label>
<label class="sizedCustomerDataRightlabel">$0.00 </label>
<label class="sizedCustomerDataRightlabel">$0.00 </label>
<label class="sizedCustomerDataRightlabel">06/27/2012 </label>
<label class="sizedCustomerDataRightlabel">$59.25 </label>
<label class="sizedCustomerDataRightlabel">$0.00 </label>
<label class="sizedCustomerDataRightlabel">$147.78 </label>
</div>
</div>
</fieldset>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
It looks like the html fragments on the right are contained within an extra div, where the html fragments on the left aren't. For example, compare how Delivery Address and Balance are defined. Balance is wrapped in an extra Div.
So, from where I'm sitting, the non-IE browsers are attempting to display the extra divs that IE is ignoring. Can you define the blocks in the "right-div" section the same as the left? to me, it looks like it's more about how the content of the right-side groups are defined differently from the left-div groups.
What happens if you change the .rightDiv so it works with a margin rather than floating it right?
.rightDiv {
position:relative;
float:left;
width:49%;
margin-left:2%;
text-align:left;
display:inline;
}