Bootstrap 2 span6 - css

I have got a simple question. And I think the answer will be that easy for you too.
I am using Bootstrap for a website. All files are downloaded and connected in my php File.
I have got a container div with class container. In it all the website foo, such as header, ..., will happen.
Now I code two span6 divs in the header. I would like to have them next to each other. Like it is thought.
But they the second div is displayed under the first div.
What am I making wrong?
Here are my files:
index.php
<!doctype html>
<!-- Developer: Raphael Klein - http://austrianmultimedia.at/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="<?php echo $sitePath; ?>">
<meta name="author" content="<?php echo $author; ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">
<script src="js/jquery-1.10.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- my CSS -->
<link rel="stylesheet" href="css/doktorhaiden.css">
</head>
<body>
<div id="container" class="row, container">
<header>
<?php include("header.php"); ?>
</header>
<div class="row">
<div id="left" class="span4">
<div class="element" id="navLeft">
<ul>
<li><h1>Home</h1></li>
<li><h1>Über uns</h1></li>
<li><h1>Kontakt</h1></li>
</ul>
</div> <!-- element -->
</div> <!-- left -->
<div id="right" class="span8">
<div id="home" class="element">
<h1><hr width="100px">Willkommen<hr width="200px"></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<img class="thumbnail" src="graphics/placeholder.png">
</div> <!-- home -->
<div id="ueberuns" class="element">
<h1><hr width="100px">Über uns<hr width="300px"></h1>
<div class="span4">
<h2>Dr. (med) Katharina Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
<div class="span4">
<h2>Dr. (med) Elmar Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
</div> <!-- ueber uns -->
</div> <!-- right -->
</div>
</div> <!-- container -->
</body>
</html>
my header.php
<div class="row">
<div id="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
and finally my css-File
/* Developer: Raphael Klein - http://austrianmultimedia.at/ */
/* #group undo defaults margins and paddings */
/* INIT */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------- #end INIT */
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 0px;
}
.row {
margin-left: 0px;
*zoom: 1;
}
#container {
}
body {
background-color: #fff;
font-family: 'Raleway', sans-serif;
line-height: 21px;
}
header {
height: 100px;
}
#left {
background-color: #3F3F3F;
text-align: right;
}
#right {
margin-left: 10px;
}
#left h1 {
color:#5AD1E5;
font-size: 2em;
line-height: 0.7em;
}
#right h1 {
font-size: 2em;
}
#right h2 {
font-size: 1em;
color: #CC9E44;
}
#right h1 hr {
display: inline-block;
top: 12px;
left: 10px;
position: relative;
border: 0;
border-top: 2px solid #5AD1E5;
margin-right: 20px;
}
.element {
padding:10px 10px 10px 10px;
}
#navLeft {
margin:0px 10px 20px 0px;
}
/* Seitenbereiche */
#home {
/*background-color: #FFCE00;*/
}
/* Images */
.thumbnail, .thumbnailHoch {
border: 1px solid #5AD1E5;
padding: 10px 10px 10px 10px;
}
.thumbnail {
width: 350px;
}
.thumbnailHoch {
height: 200px;
}
hr {
/*height: 24px;
background: url('flourish.png')
no-repeat 50% 50%;
margin: 3em 0;
border: 0;*/
}
I would be very happy, when you can help me!
Yours, Raphael


Isn't it supposed to be class="span6"? Try the following:
<div class="row">
<div id="span6" class="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" class="span6" style="background-color:blue">
salkjdhsa
</div>
</div>


Use class instead of id.
<div class="span6">

Related

image keeps going inbetween two floats, can't clear it

ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>

Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}

div appearing before | element

In this fiddle : http://jsfiddle.net/thbuf/110/
The div "test" is appearing before the | element. This is occurring despite that the "test" is added after | . Is there an issue with css ?
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='container'>
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right;">|</div>
<div style="display: inline; float:right">test</div>
</div>
</div>

That is because of the float: right on both the elements. This makes them act as though they are stacked from the right side of the screen and so the first element in the document order becomes the first from the right followed by the second element.
To reverse them, you just need to reverse the order.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right">test</div>
<div style="display: inline; float:right">test</div>
</div>

Just add new div to contain the sub divs like so:
<div style="float:right">
Hind the working fiddle: here

Responsive header menu with background image

I'm trying to create a responsive header with a background image. When I add the off-canvass menu hamburger icon, I get a band of body background displayed at the top of the viewport.
What am I doing wrong?
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="float:left; margin:0 0 0 0; max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>

I think problem is solved, have a look
html,
body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
background: red;
font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif
}
.toggle {
position: absolute;
right: 0.15em;
cursor: pointer;
color: white
}
.wrapper {
max-width: 78.75em;
margin: auto;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0)
}
.container {
background: yellow;
min-height: 100%;
padding: 0;
margin: 0
}
#header label {
padding: 0 0.125em;
font: 2.875em/1.4375em Arial
}
#header label:hover,
#menu label:hover {
color: grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
</head>
<body>
<!-- red -->
<div class="wrapper">
<div id="menu">
</div>
<!-- closing "#menu" -->
<div class="container">
<!-- yellow -->
<div id="header">
<img src="http://www.dragsdownunder.info/ralph/forums/greenbox.jpg" style="max-width:100%; height:auto; border:0" alt="green box" title="green box">
<label for="main-nav-check" class="toggle" onclick="" title="Menu">≡</label>
</div>
<!-- closing "#header" -->
<h1>Test header 4</strong></h1>
<p>Lorem ipsum dolor sit amet, no pro mundi graeco pertinacia, et lorem conceptam complectitur sea. Eam no persecuti scriptorem. Ius an sadipscing consectetuer. Purto nostrum mel in. Ne sea congue homero.</p>
</div>
<!-- closing ".container" -->
</div>
<!-- closing ".wrapper" -->
</body>
</html>

Sticky Footer not working with mobile responsive Off-Canvas Menu

I am using Bootstrap with a sticky footer and off-canvas menu. Sticky footer works fine on desktop view, but footer begins to overlap content on mobile view. I think it is due to the .row-offcanvas position being set to relative on mobile media query. If I remove the offcanvas menu the sticky footer works as expected on mobile devices. The other issue is when you scroll down in mobile view white space appears under the footer.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/master-simple.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<header>
<div class="container">
<div class="row">
<div class="col-xs-4 headerLinks">
Coverage Details
<div id="drawerNavigationID" data-toggle="offcanvas" class="hidden-sm">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4 text-right headerLinks">
<!-- Click to call on Mobile Device -->
Contact Us
</div>
</div>
</div>
</header>
<!-- Off Canvas Menu -->
<div class="container">
<div class="row">
<div class="col-sm-6 sidebar-offcanvas visible-xs">
<ul>
<li>Coverage Details</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container mainWrapper">
<div class="row">
<div class="col-md-10 col-centered" id="confirmationWrapper">
<h2 class="noBorderBottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet tempor nisl, ut rutrum lacus vulputate vel.</h2>
<h3>CLAIM NUMBER: 12345678954</h3>
<p class="claimNumberText">Nulla libero enim, consequat at pulvinar eu, ultrices a risus.</p>
<p>Nulla libero enim, consequat at pulvinar eu, ultrices a risus. Mauris bibendum enim non magna maximus, non tempor lacus lacinia. Fusce vestibulum tincidunt vulputate. Suspendisse eu erat et neque facilisis consequat id in quam. Cras convallis massa at ornare hendrerit.</p>
<div class="row text-center">
Shop
</div>
</div>
</div>
</div><!-- End Page Content -->
<footer>
<div class="container">
<ul>
<li>Terms of Use | </li>
<li>Privacy Policy</li>
</ul>
<p>© 2015 ANulla libero enim</p>
</div>
</footer>
</div><!-- End Container-fluid Row -->
</div><!-- End Container-fluid -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/offcanvas.js"></script>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 196px;
}
* {
font-weight: normal!important;
margin: 0;
padding: 0;
outline: 0;
outline-style: none;
}
header {
font-family: 'aig_futura_medregular', aig_futura_medregular, Arial, Helvetica, sans-serif;
position: absolute;
top:0;
z-index: 100;
height: 92px;
width: 100%;
padding-top: 15px;
color: #fff;
background-color: rgba(0,164,228,0.9);
}
header a {
font-family: "aig_futuraregular", Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
color: #fff!important;
}
header a:hover {
border-bottom: 1px solid #fff;
}
header .headerLogo {
width: 116px;
height: 63px;
cursor: pointer;
background: url(../img/aigLogo.png) no-repeat center bottom;
}
.headerLinks {
margin-top: 20px;
}
footer {
font-size: 14px;
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 186px;
padding: 40px 20px 20px;
color: #fff;
background-color: #252525;
}
footer ul {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer ul li {
display: inline;
}
footer li a {
color:#fff;
}
.mainWrapper {
margin-top: 92px;
}
#media screen and (max-width:768px){
#drawerNavigationID{
padding-left: 10px;
}
#drawerNavigationID span {
display: block;
width: 25px;
height: 3px;
background: #fff;
margin-bottom: 7px;
}
.row-offcanvas {
position: relative;
bottom: 0;
min-height: 100vh;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -85%;
padding: 0 0 0 20px;
background-color: #54565b;
}
.row-offcanvas-left .sidebar-offcanvas ul li {
font-size: 18px;
padding: 15px;
text-transform: uppercase;
border-bottom: 1px solid #696b6f;
}
.row-offcanvas-left .sidebar-offcanvas a {
text-decoration: none;
color: #ffffff;
}
.row-offcanvas-left.active {
left: 85%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
bottom:0;
width: 85%;
}
}

Getting label to line up with top of div

I'm trying to get a label to line up with a div vertically. I think a picture describes what I'm trying to do; the way it's rendered is how it looks. The MS Paint-style corrections in blue are what I'd like it to be. I have included the HTML and CSS below and removed as much extraneous code as I can to get to just the problem.
How can I get that label to go to the top of the type options?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* <![CDATA[ */
/* from reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* from Application.css */
html {
min-height: 100%;
background-color: White;
color: Black;
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.8em;
background-color: transparent;
}
input, textarea, select {
font-family: inherit;
font-size: inherit
}
div#EverythingDiv {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
div.MainContent {
margin: 0px auto 0px auto;
padding: 0;
min-height: 425px;
text-align: left;
clear: both;
}
/* from MyPage.css */
div.MainContent div.BasicInformationField {
}
div.MainContent div.BasicInformationField label {
display: inline-block;
width: 155px;
vertical-align: baseline;
}
div.MainContent div.BasicInformationField label.RadioLabel {
display: block;
font-weight: normal;
width: auto;
}
div.MainContent div.BasicInformationField textarea {
vertical-align: baseline;
font-family: inherit;
font-size: inherit;
}
div.MainContent div.BasicInformationField textarea#AddressTextArea {
height: 3.3em;
width: 250px;
}
div.MainContent div.BasicInformationField div#TypeOptionsDiv {
height: 3.3em;
width: 250px;
vertical-align: baseline;
font-family: inherit;
font-size: inherit;
display: inline-block;
}
div.MainContent div.BasicInformationField input.WebSite {
width: 250px;
}
/* ]]> */
</style>
</head>
<body>
<div id="EverythingDiv">
<h1 id="PageTitleH1">Title</h1>
<div class="MainContent">
<!-- view -->
<form action="MyPage" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<h2>Basic Information</h2>
<div class="BasicInformationField">
<label for="WebSiteTextBox">Web Site:</label> <input type="text" id="WebSiteTextBox" class="WebSite"/>
</div>
<div class="BasicInformationField">
<label for="AddressTextArea">Address:</label> <textarea id="AddressTextArea"></textarea>
</div>
<div class="BasicInformationField">
<label for="PhoneNumberTextBox">Phone Number:</label> <input type="text" id="PhoneNumberTextBox" class="WebSite"/>
</div>
<div class="BasicInformationField">
<label>Type:</label>
<div id="TypeOptionsDiv">
<label class="RadioLabel"><input type="radio" name="Type"/>Type 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 2 - Curabitur non odio hendrerit, hendrerit ante quis, rhoncus neque. Nam ac nisi non lorem accumsan dictum. </label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 3 - Morbi volutpat at eros ut dictum. Nam non arcu ornare, sodales eros nec, semper ante. Nunc tempor augue a est eleifend suscipit. Nam vel ornare leo.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 4 - Nam vel ornare leo.</label>
</div>
</div></form>
<!-- weiv -->
<div class="Clear"></div>
</div>
</div>
</body>
</html>

You can change this:
div.MainContent div.BasicInformationField label {
vertical-align: baseline;
}
To this:
div.MainContent div.BasicInformationField label {
vertical-align: top;
}

So I ended up doing this by floating everything left, having the labels clear both, and adjusting the margins so the baselines matched. Thanks for the conversation and the links.
jsfiddle.net/6Zjqh/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* <![CDATA[ */
/* from reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* from Application.css */
html {
min-height: 100%;
background-color: White;
color: Black;
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.8em;
background-color: transparent;
}
input, textarea, select {
font-family: inherit;
font-size: inherit
}
div#EverythingDiv {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
div.MainContent {
margin: 0px auto 0px auto;
padding: 0;
min-height: 425px;
text-align: left;
clear: both;
}
/* from MyPage.css */
fieldset > label {
float: left;
display: block;
width: 150px;
clear: both;
margin-top: 5px;
}
fieldset > input[type=text] {
float: left;
margin-top: 1px;
}
fieldset > textarea {
float: left;
}
fieldset > div.Group {
float: left;
width: 300px;
padding-top: 5px;
}
fieldset > div.Group input[type=radio] {
/*margin: 0;
vertical-align: top;
padding: 0;*/
margin-top: -3px;
vertical-align: middle;
}
fieldset > div.Group > label {
display: block;
margin-bottom: 3px;
line-height: 1.2em;
}
/* ]]> */
</style>
</head>
<body>
<div id="EverythingDiv">
<h1 id="PageTitleH1">Title</h1>
<div class="MainContent">
<!-- view -->
<form action="MyPage" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<fieldset>
<legend>Basic Information</legend>
<label for="WebSiteTextBox">Web Site:</label>
<input type="text" id="WebSiteTextBox" value="http://www.google.com/" />
<label for="AddressTextArea">Address:</label>
<textarea id="AddressTextArea" style="float: left; width: 350px; height: 4.4em;">Sample Address</textarea>
<label>Type</label>
<div class="Group">
<label class="RadioLabel"><input type="radio" name="Type"/>Type 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 2 - Curabitur non odio hendrerit, hendrerit ante quis, rhoncus neque. Nam ac nisi non lorem accumsan dictum. </label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 3 - Morbi volutpat at eros ut dictum. Nam non arcu ornare, sodales eros nec, semper ante. Nunc tempor augue a est eleifend suscipit. Nam vel ornare leo.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 4 - Nam vel ornare leo.</label>
</div>
</fieldset>
</form>
<!-- weiv -->
<div class="Clear"></div>
</div>
</div>
</body>
</html>

Resources