Forum Moderators: not2easy
I can't seem to get this float thing to work...
Currently the right hand box "floats" on the right but it doesn't really float because it is affected by the left hand box.
I would like it so that the right hand box is independant of the left hand box (in the CSS, this is under the "two column" thing) and the left hand box to leave some room for the right hand box (margin-right: 25% for example).
Here is the index page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/general.css" />
<title>Student Storage :Welcome</title>
</head>
<body>
<div id="container">
<div id="head"><div id="title">Website</div></div>
<div id="navigation">
<div id="navbox">
<ul>
<li class="current"><a href="index.php">Home</a></li>
<li><a href="order.php">Order</a></li>
<li><a href="update.php">Update</a></li>
<li><a href="about.php">About</a></li>
<li><a href="faq.php">FAQ</a></li>
<li><a href="help.php">Help</a></li>
</ul>
</div>
</div>
<div id="wrap">
<!-- left column -->
<div id="leftcolumn">
<p class="header">Welcome to Student Storage!</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>
<!-- right column -->
<div id="rightcolumn">
<!-- login box -->
<div id="loginbox">
<fieldset>
<legend>Login</legend>
<form method="post" action="login.php">
<div class="rightcolumnform">
<label for="email_address">Email:</label>
<input type="text" name="email_address" id="email_address" size="10" />
<br />
<br />
<label for="password">Pass:</label>
<input type="password" name="password" id="password" size="10" />
<br />
<br />
<input type="submit" value="Login" />
</div>
</form>
</fieldset>
</div>
<br />
<!-- contact form -->
<div id="contactform">
<fieldset>
<legend>Enquire</legend>
<form method="post" action="sendmail.php">
<div class="rightcolumnform">
<p class="explanation">Please fill in all the fields</p>
<label for="first_name"> First name </label>
<input type="text" name="first_name" id="first_name" size="10" value="" />
<br />
<br />
<label for="last_name"> Last name </label>
<input type="text" name="last_name" id="last_name" size="10" value="" />
<br />
<br />
<label for="email"> Email </label>
<input type="text" name="email" id="email" size="10" value="" />
<br />
<br />
<textarea name="enquiry" id="enquiry" onclick="this.value='';" onfocus="this.value='';" rows="10" cols="20" style="overflow: auto;">You're enquiry...</textarea>
<br />
<br />
<input type="submit" value="Send" />
</div>
</form>
</fieldset>
</div>
</div>
</div>
</div><div id="footer">© 2006 Website ¦ Website by me</div>
<div><a href="destroy_session.php">Destroy Session</a></div>
</body></html>
And here is some of the CSS:
body {
background-color: #F3F3F3;
margin: 0 8em 0 8em;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}div{
margin: 0;
padding: 0;
}img {border: 0;}
#container {
background-color: #fff;
border-left: 2px solid #eee;
border-right: 2px solid #eee;
background: #fff url('../images/template/top_of_container.gif') repeat-x top;
width: 100%;
}/* head */
#head{
margin: 0 2em 0 2em;
}#title{
font-size: large;
padding: .5em 0em .5em 0em;
}/* navigation */
#navigation {
margin: 0 2em 0 2em;
font-size: small;
width: 100%;
}#navbox {
cursor: default;
background: #fff url('../images/navigation/blue_background.jpg') repeat-x top;
}#navbox a{
color: #fff;
text-decoration: none;
}#navbox a:hover{text-decoration: underline;}
#navbox .current{background: #fff
url('../images/navigation/red_background.jpg') repeat-x top;}#navbox ul{
margin: 0;
padding: 1em 0 1em 0;
}#navbox li{
display: inline;
padding: 1em .5em 1em 1em;
}/* single column */
#content{
font-size: small;
margin: 0 2em 0 2em;
width:100%
}/* two column */
#wrap{
width:100%;
font-size: small;
margin: 0 2em 0 2em;
}#leftcolumn{
float:left;
width:75%;
background:#fff;
margin-right:22%;
}#rightcolumn{
float: right;
width: 20%;
}.rightcolumnform{
text-align: left;
padding: 5px;
}.rightcolumnform label{
float: left;
width:6em;
}#rightcolumn fieldset{
border: 1px dashed #7AA6FF;
}#rightcolumn legend{
background-color: #fff;
border: 1px dashed #7AA6FF;
padding: 3px;
}/* footer */
#footer{
font-size: x-small;
text-align: center;
clear: both;
}
/* begin typography *//* messages */
.error{
border: 1px solid red;
background-color: #FFECEC;
padding: 5px;
}.confirm{
border: 1px solid green;
background-color: #E6FFE6;
padding: 5px;
}.budgein{
margin-left: 3em;
}.example {
padding: 1px;
border-left: 2px outset #808080;
border-top: 2px outset #808080;
border-bottom: 1px solid #D4D0C8;
border-right: 1px solid #D4D0C8;
cursor: default;
}.explanation{
border: 1px solid #ccc;
background-color: #F3F3F3;
padding: 3px;
}/* text */
.header {font-size: large;}
/* form */
.form{
width: 400px;
text-align: left;
}.form label{
float: left;
width:100px;
}.itemoptions a{
font-size: small;
color: blue;
}
I would think a little more... absolutely?
Maybe try, for example, absolutely positioning your left-hand column, absolutely positioning your right-hand column, and leave the width of your left-hand column as a left margin on the right-hand column so it doesn't encroach on the space?
That's probably the way I'd think of it.
