Good day. I'm having trouble figuring out how to position child elements of a flexbox when flex-direction:column is used.
How to position sign up next to sign in
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<!-- <link rel="stylesheet" href="/css/main.css"/>-->
<link rel="stylesheet" th:href="#{/css/main.css}"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="login-container">
<h2 class="active">sign in</h2>
<h2 class="inactive">sign up</h2>
<form method="post">
<input type="text" id="fname" placeholder="Enter first name">
<span>first name</span>
<input type="text" id="lname" placeholder="Enter last name">
<span>last name</span>
<input type="text" id="email" placeholder="Enter your email">
<span>email</span>
<input type="submit" value="Submit" class="submit-btn">
</form>
</div>
</body>
</html>
css
body, .submit-btn {
background-color: #d3d3d3;
font-family: 'Montserrat', sans-serif;
color:#fff;
font-size: 14px;
letter-spacing: 1px;
}
.login-container {
/*position:relative;*/
/*align-items: center;*/
flex-direction: column;
display:flex;
height:560px;
width:405px;
margin:auto;
padding:60px 60px;
box-shadow: 0 30px 60px -5px;
}
h2 {
padding-left: 12px;
font-size: 22px;
text-transform: uppercase;
padding-bottom: 5px;
letter-spacing: 2px;
position: relative;
/*display: inline-block;*/
font-weight: 100;
}
As mentioned in the comments. Removing flex-direction, making form width:100% and making flex-wrap: wrap solves the problem.
`
Related
I found a solution to align the top of textarea with the top of its label.
My question is: the vertical-align property of <label> is still the default value(baseline), so why we can align them on top just by setting the vertical-align property of <textarea> to top?
Thank you very much!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active learning: Implementing our form HTML</title>
<style>
form {
margin: 0 auto;
width: 500px;
padding: 1em;
border: 1px solid #ccc;
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li+li {
margin-top: 1em;
}
label {
width: 90px;
display: inline-block;
text-align: right;
}
input,
textarea {
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #999;
outline: none;
}
input:focus,
textarea:focus {
border-color: #000;
}
img {
vertical-align: top;
width: 150px;
border: 1px solid blue;
}
textarea {
vertical-align: top;
}
</style>
</head>
<body>
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</li>
<li>
<label for="mail">E-mail:</label>
<input type="email" name="user_email" id="mail">
</li>
<li>
<label for="msg">Message:</label>
<textarea name="user_message" id="msg"></textarea>
</li>
<li class="button">
<button type="submit">Send your message</button>
</li>
</ul>
</form>
</body>
</html>
My question is: the vertical-align property of is still the default value(baseline), so why we can align them on top just by setting the vertical-align property of to top?
They are still aligned at the baseline but the visual result is the top.
By adding vertical-align:top to <textarea> this one is no more considered in the baseline alignment so only the label is concerned and since its the only element then it will set the baseline and will logically touch the top.
Here is an illustration to better understand:
div {
border:1px solid red;
margin:4px
}
The label is alone aligned at the baseline
<div>
<label for="msg">Message:</label>
</div>
The baseline and top are the same
<div>
<label for="msg" style="vertical-align:top">Message:</label>
</div>
Adding the textarea with vertical-align:top will not change the baseline. It will simply add the textarea at the top and expand the height
<div>
<label for="msg">Message:</label>
<textarea name="user_message" style="vertical-align:top"></textarea>
</div>
add another element aligned at the baseline and the label will get affected. The textarea is still at the top unaffected by the baseline
<div>
<label for="msg">Message:</label>
<span style="font-size:40px">AA</span>
<textarea name="user_message" style="vertical-align:top"></textarea>
</div>
the default value for label, vertical-align is still baseline, so you need only to add this to your code:
label {
width: 90px;
display: inline-block;
text-align: right;
vertical-align: top;
}
If you wanna know more about it, you can find more information there: w3schools.com/cssref/pr_pos_vertical-align.asp
I've managed to convert my html form to have some fields side-by-side in a form-group to reduce the overall height of the form, but I can't get rid of the excessive white space to the right of the fields. Is the red box below coming from the container, the fieldset or the form-group? I am very new to html/Boostrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 10px;
border-bottom:none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8 )
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg"/>
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search"> <!--for textfields -->
<div class="form-group">
<div class="col-sm-2">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-5">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-4">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div><!--/form-group-->
<div class="form-group">
<div class="col-sm-7">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">© <?php echo date('Y')?>USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
I believe my problem is different than How to remove or reduce the white space in bootstrap? as I tried the no-padding class and made no difference.
Changed col-sm-* classes in the form group elements. Also add ad row and col-sm-7 divs before fieldset div
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link rel="icon" href="https://wonderfest.com/wp-content/uploads/2017/01/favicon.ico" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Search</title>
<style>
#outline {
position: relative;
height: auto;
width: auto;
/*margin: 18px auto 0;*/
margin: 10px 24px 0 24px;
border: 1px groove #ddd !important;
}
.logoimages {
width: auto;
height: auto;
position: absolute;
text-align: center;
top: 30px;
left: 15px;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
#title {
width: auto;
top: 90px;
position: absolute;
visibility: visible;
left: 0px;
}
#title .title-content {
font-family: 'Roboto', sans-serif;
font-weight: bolder;
font-size: 32px;
color: #e6bb57;
}
.line-bottom {
border-bottom: 5px solid #E6BB57;
width: 400px;
margin-left: auto;
margin-right: auto;
}
p {
color: #666;
font-size: 16px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin-top: 5px;
}
h3 {
color: #666;
font-size: 60px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
letter-spacing: -1px;
width: auto;
}
h4 {
font-weight: bold;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
h5 {
font-weight: 500;
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 1.33em 0;
}
a {
color: #666;
font-family: 'Roboto', sans-serif;
text-decoration: underline;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-family: 'Roboto', sans-serif;
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modalLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba( 255, 255, 255, .8)
/*url('http://i.stack.imgur.com/FhHRx.gif') */
url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modalLoading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modalLoading {
display: block;
}
</style>
</head>
<body>
<noscript>
<style>
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
<h4>JavaScript is disabled on your browser. You will not be able to use this application until it is enabled.</h4>
<h5>Please refer to your browser's specific configuration details to change this setting.</h5>
<p align="center">© <?php echo date('Y')?> USA, INC.</p>
<p align="center">Version <?php echo $pageVer?></p>
</div>
</noscript>
<div class="pagecontainer">
<div id="outline">
<div id="bckgrnd" style="text-align: center">
<img src="../common/img/background-1.jpg" />
<div class="logoimages" style="text-align: center">
<img src="../common/img/combined_images.png" class="center-block img-responsive" id="top-img1" width="454" height="61" />
</div>
<div id="title" style="text-align: center">
<h3 class="title-content">Search</h3>
<div class="line-bottom"></div>
</div>
</div>
<div>
<p align="center">
<a href="javascript:window.location.href = '../common/php/logout.php';" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-log-out"></span> Log out
</a>
</p>
</div>
<div class="container" style="padding:10px 10px;">
<div class="row">
<div class="col-sm-7">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Search criteria</legend>
<form id="searchForm" name="searchForm" class="form-horizontal">
<div class="fields-search">
<!--for textfields -->
<div class="form-group">
<div class="col-sm-4">
<label for="barcode" class="sr-only"></label>
<input id="barcode" name="barcode" class="form-control input-group-lg" type="text" placeholder="Barcode" value="">
</div>
<div class="col-sm-8">
<label for="entry-number" class="sr-only"></label>
<input id="entry-number" name="entry-number" class="form-control input-group-lg" type="text" placeholder="Entry # (separate multiple entries with commas)" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="first-name" class="sr-only"></label>
<input id="first-name" name="first-name" class="form-control input-group-lg" type="text" placeholder="First name" value="">
</div>
<div class="col-sm-6">
<label for="last-name" class="sr-only"></label>
<input id="last-name" name="last-name" class="form-control input-group-lg" type="text" placeholder="Last name" value="">
</div>
</div>
<!--/form-group-->
<div class="form-group">
<div class="col-sm-12">
<label for="title-name" class="sr-only"></label>
<input id="title-name" name="title-name" class="form-control input-group-lg" placeholder="Title or name of entry" value="">
</div>
</div>
</div>
</form>
</fieldset>
</div>
</div>
</div>
<br/>
<br/>
<div id="footer">
<p align="center">©
<?php echo date('Y')?>USA, INC.</p>
<p align="center">Version
<?php echo $pageVer?>
</p>
</div>
</div>
</div>
<div class="modalLoading"></div>
</body>
</html>
I have written a simple form to test out the width in CSS. Regardless of the value I put for width, the borders still have the same width. Can somebody please help what am I missing?
<html lang="en-US">
<meta charset="UTF-8">
<head>
<style type="text/css">
label {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
}
</style>
<title>Trying CSS </title>
</head>
<body>
<form action="#">
<fieldset >
<label> Name </label>
<input type="text"/>
<label >Contact</label>
<input type="text" />
<label >Phone</label>
<input type="text" />
<button type="button">Submit </button>
</fieldset>
</form>
</body>
</html>
Use this css
label {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
float:left;
}
input{float:left;}
<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
label {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
float:left;
}
input{float:left;}
</style>
<title>Trying CSS </title>
</head>
<body>
<form action="#">
<fieldset >
<label> Name </label>
<input type="text"/>
<label >Contact</label>
<input type="text" />
<label >Phone</label>
<input type="text" />
<button type="button">Submit </button>
</fieldset>
</form>
</body>
</html>
Basically label is a tag. So what you should try is put a class inside the label tag and then write css for that . and for width try--
width=100%
Use Padding instead of width
label {
padding: 0 55px;
border-color: brown;
border-width: .5em;
border-style: double;
margin-right: .5em;
}
<div class="labelborder">
<label>sample text</label>
</div>
.labelborder {
width: 10em;
border-color: brown;
border-width: .25em;
border-style: double;
margin-right: .5em;
}
If label width accessing according to font-size only,if you want to increase without increasing font size,use above code like that,
just add one more style to label as per your requirement
display: "inline-block"
or
display: "block"
Simply add display:inline-block to the label to give width
I've been looking for this in google and it says that the css code is margin: 0 auto;. I tried it and it doesn't work for me. Please help. Thanks in advance.
login.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Log In</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="formLogin">
<table class="formTable">
<tr>
<td>Username: </td>
<td> <input type="text" id="loginusername" name="loginusername"/> </td>
</tr>
<tr>
<td>Password: </td>
<td> <input type="password" id="loginpassword" name="loginpassword"/> </td>
</tr>
</table>
<div align="center">
<input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
<input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
</div>
</div>
</body>
</html>
stylesheet.css
table.formTable {
margin-left: auto;
margin-right: auto;
}
table.formTable td {
padding: 8px;
}
#formLogin {
width: 360px;
background-color: #eeeeee;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
If you want to center it vertically also try reading this.
Update:
Try this code. Of course you can move CSS out to your css file. Tested in IE9 and FF6:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Log In</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
#wrapper{
background-color: #ccf;
position: relative;
text-align: left;
width: 100%;
height: 100%;
margin: 0px auto;
}
#content{
background-color: transparent;
position: absolute;
top: 40%;
left: 0px;
width: 100%;
margin-top: auto;
text-align: center;
min-width: 900px;
}
table.formTable {
margin-left: auto;
margin-right: auto;
}
table.formTable td {
padding: 8px;
}
#formLogin {
width: 360px;
background-color: #eeeeee;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="formLogin">
<table class="formTable">
<tr>
<td>Username: </td>
<td> <input type="text" id="loginusername" name="loginusername"/> </td>
</tr>
<tr>
<td>Password: </td>
<td> <input type="password" id="loginpassword" name="loginpassword"/> </td>
</tr>
</table>
<div align="center">
<input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
<input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
</div>
</div>
</div>
</div>
</body>
</html>
Like Hachi says try text-align:center; but you could also add this to your CSS:
body {
width:100%;
}
This will give your page a width, so your elements will have a width to use.
Update:
Didn't realise you wanted it vertically centered too. You could put the whole thing in a table cell and use valign="middle" to center it.
I think it's about DOCTYPE. Have try to put DOCTYPE
HTML 5
<!DOCTYPE HTML>
<html>
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
I've got a page that has a background color for the main container, but for some reason, the color ends just below the header div. The page and the CSS validate in the w3 validators, though, and I have no idea why and I've tried several different fixes.
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT -- Raw html source straight from view source in my browser
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? Register here!
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
You are floating #contentwrapper which takes it out of the document flow so #maincontainer no longer contains it.
To contain it, you need to give #maincontainer an overflow attribute (auto should work).
FYI, adding borders to your elements are a good way to debug things like this.
If I understand correctly, this is a well addressed question. See CSS 100% height in ie or http://www.tutwow.com/htmlcss/quick-tip-css-100-height/