<html>
<head>
<title>Float Issue in IE7</title>
<style type="text/css">
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="right">
<div class="right">Right Text</div>
<br/><br/>
<div class="right">Right Text 2</div>
</div>
<div class="left">Left Text</div>
<br class="clear" />
</body>
</html>
The issue is that "Left Text" shows up after "Right Text 2" instead of being level with "Right Text" in IE7.
I've been searching for over an hour and tried numerous things, but haven't been able to fix it.
Any help would be great.
Thanks.
Try this code, is what you want?
DEMO
<html>
<head>
<title>Float Issue in IE7</title>
<style type="text/css">
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="right">Right Text</div>
<br/>
<div class="left">Left Text</div>
<br class="clear" />
<div class="right">Right Text 2</div>
<br class="clear" />
</body>
</html>
Related
How can I get a Bootstrap 5 grid row to span its entire content vertically? In the example below, if I add a label element the content of the first row flows over the second row.
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
margin: 0px;
position: relative;
}
.ql-snow {
box-sizing: border-box;
border: 1px solid #d1d5db;
}
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 100%;
outline: none;
overflow-y: auto;
padding: 12px 15px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<form class="my-3">
<div class="row py-2">
<div class="col-md-12">
<label for="txtBox" class="form-label">Title</label>
<div id="txtBox" class="ql-container ql-snow">
<div class="ql-editor">
<p>TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE</p>
</div>
</div>
</div>
</div>
<div class="row py-2">
<div class="col-md-12">
next row
</div>
</div>
</form>
</div>
</body>
</html>
Edit 1:
Smaller example
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
height: 100%;
position: relative;
border: 1px solid #d1d5db;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Title
<div id="txtBox" class="ql-container">
<p>
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
next row
</div>
</div>
</div>
</body>
</html>
This overlap is being caused by your style rule:
<style>
.ql-container {
height: 100%;
...
}
</style>
Along with the html structure:
<div class="col"><!-- this is the parent element -->
Title <!-- the height of this text is same as overlap -->
<div id="txtBox" class="ql-container">
<!-- because this element's height is 100% of the parent -->
</div>
</div>
If you must have the style rule, for reasons not made apparent in your question, then the solution is to
Either: Make a whole new .row with .col for the text Title:
<div class="row">
<div class="col">
Title <!-- the height of this text no longer has affect -->
</div>
</div>
<div class="row">
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
Or: Just put Title in its own .col-12 forcing subsequent .col(s) to wrap to the next line.
<div class="row">
<div class="col-12">
Title <!-- the height of this text no longer has affect -->
</div>
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
All the code can be found in the JS fiddle below I thought it would be easier that way. I am trying to display the Flexbox items horizontally, so that the first 8 and 4 columns are beside each other.
I then want to add the 12 on a totally new line, underneath the 8 and 4 and not beside it, extending the pages length horiztonally and having that horrible scroll.
What have I tried?
.container {
display: flex; /* or inline-flex */
}
So the above code just makes it all go side by side, no matter how many columns you do or if it exceeds 12, I want it to work pretty much exactly like bootstraps grid system if that makes sense.
https://jsfiddle.net/d35g2mra/1/
Wrap only the wanted divs in div and dispaly:flex them (in the same way you can wrap the images section if you want to)
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
.wrap{
display:flex;
}
<!DOCTYPE html>
<html lang="en-GB">
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container"><br><br><br>
<div class="wrap">
<div class="col-md-8">
I need to put a pretty picture here.
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<br>
<div class="col-md-12">
Trending Pages
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
</div>
</div>
You can do like this:
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
overflow-x:hidden;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
<html lang="en-GB">
<head>
<title>{{ config('website.name') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" type="text/css">
</head>
<body>
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<div class="container">
<div class="col-md-12">
<span>Trending Pages</span>
<div class="row">
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 6 years ago.
I have a bootstrap grid and I am trying to center an image (200x100 per example provided) inside a cell.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container">
<img class="img" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
I've tried a lot of techniques provided on internet without any luck. (BTW most of them explicitly define a height) As a proof I provide some of them here:
Example1: a trick with padding-top: 100% increases a row which I do not need.
Example2: table/table-cell just not working
Example 3: a trick with inline-block and vertical align is not working
<style>
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
}
</style>
Example 4: absolute position with top, left 50% and translate is working wrong
<style>
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
My favorite vertical alignment hack:
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It uses translateY and top to sandwich an item into a container with unknown height. This requires IE10+.
Try this
Check example at CODEPEN
CSS:
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}
You also need to make sure that parent div of that image has height greater than image height.
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
align-self: center;
}
.row > [class*='col-'] img {
align-self: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6 different-height-1" style="border:1px solid green;">
<img class="img-responsive" src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 different-height-2" style="border:1px solid green;">
<img class="img-responsive" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
You have to go against bootstrap styling but than it works
.img_container {
position: relative;
}
.reset_pos {
position: static !important;
}
.center {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text
<br />some text
<br />some text
<br />some text
<br />
</div>
<div class="col-xs-6">
some text
<br />some text
<br />some text
<br />some text
<br />
</div>
</div>
<div class="row img_container" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container reset_pos">
<img class="img center" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
ie 8 is adding unnecessary padding to a div. I cannot see any unusual styling here. Can somebody help ?
Html
The div highlighed in blue is the one in context.
.block {
clear: both;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content {
padding: 0 18px 0 0;
}
Here is the html code that will reproduce this issue. Sorry about the length. But if you copy this to a html file and open it in ie8, you'll be able to reproduce it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.block {
clear: both;
}
div.block .inline:last-child {
float: none;
overflow: hidden;
}
div.content-root {
padding: 0 0 0 18px;
}
.inline {
float: left;
clear: none;
padding: 0;
}
div.content.input-container {
padding-right: 0;
}
div.content {
padding: 0 18px 0 0;
}
</style>
</head>
<body>
<div id="contentPane" style="background-color: transparent; display: block;">
<form>
<div class="block content-root">
<div class="block">
<div class="block">
<div class="block">
<div class="inline">
<label>
<div class="block">
<div class="inline content input-container">
<input type="checkbox" />
</div>
<div class="inline">
<div class="block">
<div class="block">
<div class="inline" style="float: left;">
<div class="block content">
<p>
<span style="font-family: arial; font-size: 11pt;">C. </span>
</p>
</div>
</div>
<div class="inline">
<div class="inline">
<p><span>Correct</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
The paragraph tag has its own margin by default.
If you write
<p style="margin:0px;">
the 'padding' above and below the word 'Correct' goes.
So here is a simple page I've stripped down to the bare minimum. Looks great in FF, but I can't get it to display the same way in IE. I have tried every configuration possible (I think). Maybe someone could tell me what I'm doing wrong. Could it be the layout? Thx.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>work page</title>
<style type="text/css">
<!--
/* --- --- */
#wrapper {
width:731px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
/* --- --- */
#wholepage {
width: 674px;
display: inline-table;
margin-left: 28px;
}
#prefmatchbox {
width: 600px;
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
}
.titlecenter {
padding-top: 2px;
padding-bottom: 3px;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
text-align: center;
width: 100%;
border: 2px outset #333333;
display: inline-table;
}
.box {
}
.left {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
display: inline-table;
width: 200px;
margin-left: 25px;
}
.center {
text-transform: capitalize;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
display: inline-table;
width: 150px;
}
.right {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
display: inline-table;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="wholepage">
<div id="prefmatchbox">
<div class="titlecenter">food</div>
<div class="box">
<div class="left">peaches<br />
</div>
<div class="center">fruit</div>
<div class="right">plums<br />
</div>
</div>
<div class="box">
<div class="left">lettuce<br />
</div>
<div class="center">vege's</div>
<div class="right">carrots<br />
</div>
</div>
<div class="box">
<div class="left">wheat<br />
</div>
<div class="center">bread</div>
<div class="right">white<br />
</div>
</div>
<div class="box">
<div class="left">gum drops<br />
</div>
<div class="center">candy</div>
<div class="right">chocolate<br />
</div>
</div>
<div class="box">
<div class="left">water<br />
</div>
<div class="center">drink</div>
<div class="right">juice<br />
</div>
</div>
<div class="titlecenter">plants</div>
<div class="box">
<div class="left">weed grass<br />
</div>
<div class="center">weeds</div>
<div class="right">some other weed<br />
</div>
</div>
<div class="box">
<div class="left">maple<br />
</div>
<div class="center">tress</div>
<div class="right">fir<br />
</div>
</div>
<div class="box">
<div class="left">Rose bud<br />
flourance<br />
galaxy bloom<br />
</div>
<div class="center">flowers</div>
<div class="right">blah<br />
Rose<br />
Humperdinkle<br />
greedy lane<br />
</div>
</div>
<div class="titlecenter">cars</div>
<div class="box">
<div class="left">porsche<br />
</div>
<div class="center">fast</div>
<div class="right">lamborghini<br />
</div>
</div>
<div class="box">
<div class="left">explorer<br />
</div>
<div class="center">big</div>
<div class="right">suburban<br />
</div>
</div>
<div class="box">
<div class="left">mercedes<br />
</div>
<div class="center">slow</div>
<div class="right">honda<br />
</div>
</div>
<div class="titlecenter">movies</div>
<div class="box">
<div class="left">iron man 2<br />
</div>
<div class="center">action</div>
<div class="right">kick ass<br />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Edited to add a link to a jsbin.com demo on OP's behalf.
It works fine in IE 8. IE 7 and earlier doesn't support display:inline-table.
u can use float instead of inline-block like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>work page</title>
<style type="text/css">
<!--
/* --- --- */
#wrapper {
width:731px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
/* --- --- */
#wholepage {
width: 674px;
display: inline-table;
margin-left: 28px;
}
#prefmatchbox {
width: 600px;
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
}
.titlecenter {
padding-top: 2px;
padding-bottom: 3px;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
text-align: center;
width: 100%;
border: 2px outset #333333;
display: inline-table;
}
.box {
padding: 0 25px;
}
.left {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
float:left;
}
.center {
text-transform: capitalize;
padding-top: 2px;
float:left;
padding-bottom: 2px;
text-align: center;
width: 150px;
}
.right {
text-align: center;
padding-top: 2px;
float:right;
padding-bottom: 2px;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="wholepage">
<div id="prefmatchbox">
<div class="titlecenter">food</div>
<div class="box">
<div class="left">peaches<br /> </div>
<div class="center">fruit</div>
<div class="right">plums<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">lettuce<br />
</div>
<div class="center">vege's</div>
<div class="right">carrots<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">wheat<br />
</div>
<div class="center">bread</div>
<div class="right">white<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">gum drops<br />
</div>
<div class="center">candy</div>
<div class="right">chocolate<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">water<br />
</div>
<div class="center">drink</div>
<div class="right">juice<br />
</div>
<br clear="all" />
</div>
<div class="titlecenter">plants</div>
<div class="box">
<div class="left">weed grass<br />
</div>
<div class="center">weeds</div>
<div class="right">some other weed<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">maple<br />
</div>
<div class="center">tress</div>
<div class="right">fir<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">Rose bud<br />
flourance<br />
galaxy bloom<br />
</div>
<div class="center">flowers</div>
<div class="right">blah<br />
Rose<br />
Humperdinkle<br />
greedy lane<br />
</div>
<br clear="all" />
</div>
<div class="titlecenter">cars</div>
<div class="box">
<div class="left">porsche<br />
</div>
<div class="center">fast</div>
<div class="right">lamborghini<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">explorer<br />
</div>
<div class="center">big</div>
<div class="right">suburban<br />
</div>
<br clear="all" />
</div>
<div class="box">
<div class="left">mercedes<br />
</div>
<div class="center">slow</div>
<div class="right">honda<br />
</div>
<br clear="all" />
</div>
<div class="titlecenter">movies</div>
<div class="box">
<div class="left">iron man 2<br />
</div>
<div class="center">action</div>
<div class="right">kick ass<br />
</div>
<br clear="all" />
</div>
</div>
</div>
</div>
</body>
</html>