Hi,
Just throwing together a html quick and dirty mockup with inline styles.
I have 3 divs welpic, weltxt and subscribe.
These are nested inside another div.
I am trying to get the weltxt and welpic to float left and subscribe to float right.
My eyes are bleeding and I don't know what I have missed.
I've done this 100 times before and I think the red mist is preventing me sorting this out.
Any help appreciated.
Thanks
Here is the code
Quote:
<!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>Untitled Document</title>
<style type="text/css">
body {
background-color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}
.lcstyle h2 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#CCCCCC;
}
.lcstyle ul li {
list-style-type:none;
}
.lcstyle a {
color:#CCCCCC;
outline:none;
}
.lcstyle a:hover {
color:#FFFFFF;
outline:none;
}
#page {
background-color:#999999;
width: 780px;
height:700px;
margin-left:auto;
margin-right:auto;
}
.lcstyle {
font-size:small;
background-color:#333333;
width:200px;
margin:10px;
padding:20px;
float:left;
border:thin;
border-color:#FFFFFF;
}
#partners {
height:98px;
}
#welpic {
font-size:small;
background-color:#333333;
width:460px;
margin:10px;
padding:20px;
float: left;
}
#weltxt {
font-size:small;
background-color:#333333;
width:460px;
margin:10px;
padding:20px;
float: left;
}
#subscribe {
font-size:small;
background-color:#333333;
width:200px;
margin:10px;
padding:20px;
float: right;
}
#low_content {
margin: 0 auto;
/*Now we get rid of the previous IE hack*/
text-align:left;
}
</style>
</head>
<body>
<div id="page">
<div id="mid_content">
<div id="welpic">welpic placeholder</div>
<div id="weltxt">
<h2>Welcome to Website.</h2>
Here you can find out all bout what's happening in the project. Here
you can find out all bout what's happening
in Hatfield's regeneration project
</div>
<div id="subscribe">
<p>Subscribe to our Newsletter</p>
<form id="form1" name="form1" method="post"
action=""> <label>Name <input name="textfield"
type="text" /> </label>
<p> <label>Email address <input name="textfield2"
type="text" /> </label> </p>
<p> <label> <input name="Submit"
value="Submit" type="submit" /> </label> </p>
</form>
</div>
</div>
<div id="low_content">
<div id="downloads" class="lcstyle">
<h2>Downloads</h2>
<ul>
<li><a href="#">Download Image </a></li>
<li><a href="#">File for Download </a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="news" class="lcstyle">
<h2>News</h2>
<ul>
<li><a href="#">10.10.07 - Something</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="partners" class="lcstyle">
<h4>Partners Logos</h4>
<p>Image placeholder </p>
</div>
</div>
<!--end div low_content--></div>
</body>
</html>
|