I cant seem to get three divs to stay inline. The third always goes to another line. I've tried display inline block, float left on the wrapper, i've tried changing the sizes of the divs and several other things and i cant get it to work. I haven't found another stack overflow question that can solve my problem. Heres the html and css.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin:0;
padding:0;
background-image: url("download.png");
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
float: left;
}
li a:hover {
background-color: #111111;
}
.blue {
position:absolute;
width:100%;
float:right;
background-color:#62ADDB;
height:5px;
}
.body {
background-color: white;
width: 100%;
height: 600px;
position: absolute;
font-family: 'Roboto', sans-serif;
}
.tdes {
font-size: 1.2em;
}
.des {
background-color: #D0DAE0;
width: 100%;
padding: 30px;
width: 100%;
position: absolute;
}
.profilePic {
border-radius: 50%;
width: 30%
}
.p1 {
right: 30%;
float: left;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p2 {
right: 60%;
float: center;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
.p3 {
right: 0%;
float: right;
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
}
a {
text-decoration: none;
}
.des a:link{
color: #000000;
}
.inline {
display:inline;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<ul>
<li>Minds Gaming</li>
<li> MG Channel</li>
<li> 18+</li>
<li>Contact us</li>
</ul>
<div class="blue"></div>
<br />
<br />
<div class="body"><center>
<div class="des">
<br />
<h2>
Welcome to the MindsGaming Community!
</h2>
<p class="tdes">
The #1 Community on Minds, We have the best open groups and members!
<br />Make sure to check out as many groups and fun members you can!
</p>
<br /> <br /> <br />
Our supporters:
<br /><br /><br />
<div class="p1">
<img class="profilePic" src="test.png">
<br />
#channel
<br /> <br />
Description about person
</div>
<div class="p2">
<img class="profilePic" src="test.png">
<br />
#channel
<br /> <br />
Description about person
</div>
<div class="p3">
<img class="profilePic" src="test.png">
<br />
#channel
<br /> <br />
Description about person
</div>
</center>
</div>
</div>
</body>
</html>
There's no float: center in CSS. You need to give this way:
.p2 {
right: 60%;
float: left; /* Change this as well. */
background-color: white;
padding: 10px;
width: 30%;
height: 300px;
margin: 0 5px; /* And add the margin. */
}
Preview:
Related
I am working on a page and I'm trying to make an image of an iphone be directly to the right of the header, paragraph and call to action (searchbar, searchbutton) like so:
But the image keeps getting pushed down into the next module.
What can I do to put the phone image in the right place?
#hero {
background-color: #62CE9C;
display: inline-block;
height: 600px;
margin: 0px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#herotext {
float: left;
}
#hero img {
float: left;
}
p {
color: #FFFFFF;
font-family: Open Sans;
font-size: 18px;
}
#savefoodimage {
float: right;
}
#savefoodtext {
float: right;
height: 300px;
width: 290px;
}
#savemoneyimage {
float: left;
}
#savemoneytext {
float: left;
height: 300px;
width: 330px;
}
#savetimeimage {
float: left;
}
#savetimetext {
float: left;
height: 300px;
width: 330px;
}
#searchbar {
background-color: #FFFFFF;
border: none;
border-radius: 8px;
font-size: 18px;
height: 40px;
padding-left: 10px;
width: 300px;
}
#searchbutton {
background-color: #28C787;
border: none;
border-radius: 8px;
color: #FFFFFF;
font-size: 18px;
height: 40px;
width: 180px;
}
#searchbutton:hover {
background-color: #00BE8B;
}
#tweetone {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetone img {
float: left;
}
#tweetonetext {
float: left;
}
#tweettwo {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
#tweetthree {
background-color: #FFFFFF;
border-radius: 25px;
height: 108px;
margin: auto;
width: 750px;
}
ul {
list-style-type: none;
}
#vocational {
background-color: #62CE9C;
display: inline-block;
height: 900px;
padding-bottom: 100px;
padding-left: 70px;
padding-right: 70px;
padding-top: 100px;
width: 100%;
}
#vocational h1 {
text-align: center;
}
#vocational p {
color: #62CE9C;
display: inline-block;
margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="hero">
<h1>Make the Most of your Food With Pantree</h1>
<p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
<img src="images/phone.png"/>
</div>
<div id="functions">
<img id="savemoneyimage" src="images/savemoney.png"/>
<div id="savemoneytext">
<h2>Save Money</h2>
<p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p>
</div>
<img id="savefoodimage" src="images/savefood.png"/>
<div id="savefoodtext">
<h2>Save Food</h2>
<p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p>
</div>
<img id="savetimeimage" src="images/savetime.png"/>
<div id="savetimetext">
<h2>Save Time</h2>
<p>Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick & easy.</p>
</div>
</div>
<div id="vocational">
<h1>These Folks Could Use Pantree Every Day</h1>
<ul>
<li>
<div id="tweetone">
<img src="images/tweetone.png"/>
<div id="tweetonetext">
<h3>Kat</h3>
<h3>#devicat</h3>
<p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p>
</div>
</div>
</li>
<li>
<div id="tweettwo">
<img src="images/tweettwo.png"/>
<h3>Jack Falahee</h3>
<h3>#RestingPlatypus</h3>
<p>Dear Mom, How do I organize my kitchen? Love, me</p>
</div>
</li>
<li>
<div id="tweetthree">
<img src="images/tweetthree.png"/>
<h3>mason ryan</h3>
<h3>#MasonTheManiac</h3>
<p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p>
</div>
</li>
</ul>
</div>
<div id="calltoaction">
<h1>Manage your Kitchen, Effortlessly</h1>
<p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p>
<form id="form">
<input id="searchbar" type="text" placeholder="yourname#email.com"/>
<input id="searchbutton" type="submit" value="Get Early Access" />
</form>
</div>
</body>
</html>
Try this.
#hero {
float: left;
}
img {
display: block;
float: right;
}
How about using a two column layout?
I've been racking my brains to to figure out where I went wrong. The bottom div stretches all the way right will everything stays center page but the left side won't stretch full. Also when I resize the window smaller all the sub-divs collapse. Ideas???
https://jsfiddle.net/g506gk51/
Thank you in advance!
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
width: 100%;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
position:absolute;
margin-top: 10%;
margin-bottom: 10%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#Header {
float:left;
padding-left: 75px;
}
.circlefooter {
width: 50px;
height: 50px;
float: left;
margin: 25px 25px 0 175px;
}
.circlefooter p {
padding-left: 75px;
width: 150px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
</style>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="Header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I try to understand what you meant, I got this from your code.
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
html{
height: 100%;
}
body {
position: relative;
min-height: 100%;
background-color: white ;
color: #543864 ;
z-index: -10;
clear: both;
}
#topmenu {
float: left;
padding-top: 50px;
position: relative;
}
#topmenu ul {
list-style:none;
}
#topmenu li {
float:left;
padding: 5px 30px 0px 20px;
margin-right: 20px;
border-right: 1px solid #292E37;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #292E37;
}
#name {
margin-bottom: 5px;
color: #543864;
display:inline-block;
}
#topcontainer {
display: block;
height: 60px;
margin-bottom: 15%;
font-family: Lucida Grande;
position: relative;
text-align: center;
padding-bottom: 10%;
}
#topcontainer:after {
content: "";
clear: both;
}
#footer {
background-color:#B9B7C4;
height: 11%;
width: 100%;
z-index: 1;
margin-top: 10%;
margin-bottom: 10%;
display: table;
table-layout: fixed;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
display: block;
float: left;
}
.circlefooter {
display: table-cell;
padding: 15px;
vertical-align: middle;
}
.circlefooter p {
margin: 0;
padding-left: 75px;
font-size: 12px;
}
.circlefooter img {
height: 50px;
float: left;
}
.circlefooter a:hover {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
<div id="topcontainer">
<div id ="header">
<h1 id="name">Johnny</h1>
<br />
Software QA | Software Developer <br />
Six Sigma Black Belt | Veteran <br />
Entrepreneur
</div>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<!--<div id="break"></div>-->
<div id="footer">
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028867_MB__phone_zps8zdslqey.png" />
<p >Cell: <br/> 123-456-7890</p>
</div>
<div class="circlefooter" >
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028672_18_email-128_zps9hghdji6.png"/>
<p>Email: <br/> test#domain.com</p>
</div>
<div class="circlefooter">
<img src="http://i107.photobucket.com/albums/m316/sysofadown3/1430028664_06_linkedin-128_zpsd5onsu1x.png"/>
</div>
</div>
</div>
</body>
</html>
I have three social media images in a div at the bottom of the page. I have them placed center of the div but when i add the link to the image it pushes the other images away and the area around the image is linked as well.
On other sites I have not had this issues so I am not sure what is going on
Thanks
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="assets/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NolanD</title>
</head>
<body>
<div id="nav">
<header>
<div class="logo">NolanD</div>
<div id="logo">
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
</div>
<body>
<div class="rowone">
</div>
<div class="rowtwo">
<p>
</p>
</div>
<div class="rowthree">
</div>
</div>
<div class="rowfour">
</div>
<div class="rowfive">
</div>
<div class="rowsix">
<img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
<img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
</div>
</body>
And the CSS, where I think the issues is coming from.
html, body {
margin:0;
padding:0;
}
* {
margin: 0;
padding:0;
}
#nav {position:absolute;
width:100%;
height: 60px;
background:#F4F2F2 ;
text-align: right; left: 0; top: 0; }
#nav a { font-size:26px; padding: 3px; margin-right: 1rem; font-family: Roboto;
font-weight:100; }
#nav li { display: inline-block; }
#nav h1 { text-align: left; }
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
.logo {
float: left;
color: #1D7090;
font-size: 26px;
font-family: Roboto;
font-weight:100;
line-height: 31px;
display: inline-block;
margin-left: 1rem;
}
body {
background-color:#6A6262;
}
.rowone {
background-color:#7DB3BF;
width: 100%;
height: 600px; }
.rowtwo {
text-align: center;
font-size:72px;
color:#000000;
padding-top: 1rem;
background-color:#F9F2F2;
width: 100%;
height: 540px;
}
.rowthree {
background-color:#B34042;
width: 100%;
height: 500px;
}
.rowfour {
background-color:#FF5700;
width: 100%;
height: 500px;
}
.rowfive {
background-color:#DDD39B;
width: 100%;
height: 500px;
}
.rowsix{
background-color:#3E3E3E;
width: 100%;
height: 175px;
text-align:center;
}
.rowsix img { display: block;
padding-top: 5rem;
text-align:center;
display:inline-block;
margin:5px 15px;
}
#media all and (max-width:600px) {
.logo { display:none; }
#nav {text-align: center; }
}
Try remove padding attribute you added for link at line :
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
Btw : please reformat your code. It's to bad :(
I've done some searching and I just can't seem to find out what's wrong. My main content keeps overlapping the banner. I tried using the position and overflow hidden and auto but I still can't seem to get it right.
Here's the html
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
</div></div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer"></div>
</p>
</body>
Here's the CSS:
body {
background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center}
a {
color: #2b2bf6;}
#header {
float: left;
position: fixed;
Align: left;
clear: both;
width: 0x;
max-width: 100%;
height: 70px;
margin: 0;
padding: 0;
border: 0;
background:
#FFFFFF;
z-index: 2;}
#Navigation {
width: 100%;
height: 70px;
margin: 0;
padding: 0;
background: #000000;
Font-size: 18px;
float: right;
position: fixed;
z-index: 1;
display: incline-block;
}
#Navigation Container {
WIDTH: 100%;
float: right;
background: #282828;
position: fixed;
z-index: 0;}
#Banner {
height: 100%;
width: 100%;
margin: auto;
padding-top: 70px}
#wrapper {
width: 100%;
overflow: hidden; }
#container {
width: 100%;
margin: 0 auto; }
#banner-img {
width: 100%;}
#dropdown {
position: relative;
overflow: hidden; }
#MainContent {
margin-top: -270px;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 100px;
text-align: left;}
#footer {
width: 100%;
height: 120px;
background: #282828;
padding: 0px; }
#navwrap {
width: 160px;
height: 70px;
Float: right;
display: incline-block;
z-index: 4; }
#Searchbar {
float: left;
padding: 20px;
}
ul{
padding: 0;
list-style: none;
height: 70px;
}
ul li{
float: right;
width: 110px;
text-align: center;
line-height: 21px;
}
ul li a{
display: block;
height: px;
padding: 5px 10px;
color: #333;
background: #282828;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #3d3d3d;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block;
}
Please help.
There are a few discrepancies in the HTML posted by you.
I have corrected the same. Can you please reuse the HTML and check.
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>
<div id="Navigation Container"></div>
<div id="header">
<img src="nav bar logo.png">
</div>
<div id='Navigation'>
<ul>
<li><font color="#FFFFFF">Contact</font></li>
<li><font color="#FFFFFF">About</font></li>
</ul>
</div>
<div id="Banner">
<div id="wrapper">
<div id="container">
<img class="banner-img" src="../Banner.png">
</div>
</div>
</div>
<div id="MainContent">
<p>
<font color="#000000">
<h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
<font face="Verdana" size="3">
<p>Just some text...</p>
<p>That keeps overlapping...</p>
</font>
</font>
</p>
</div>
<div id="footer">
</div>
</p>
</body>
</html>
I am new to this so. It is probably the basic stuff...I have problem with IE, it does not render web page as chrome and FF does. Those three boxes, boxleft, boxcenter and boxright odes not appear in line. last one, box out seems like drops down just beneath boxcenter. I try to find the answer but no luck. here is the html and css. any kind of help are very welcome. Thanks.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="header" class="container">
<div id="logo">
<img src="layout/img.png" width="415" height="90" alt="img" />
</div>
<!--END LOGO-->
<div id="mainmenu">
<ul>
<li>item 4</li>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
<ul>
</div>
<!--END MAIN MENU-->
</div>
<!--END HEADER-->
<div id="mainmiddle" class="container"></div>
<!--END MAIN-MIDDLE SECTION-->
<div id="bottomsection" class="container">
<div id="bottomsectionName">
<p>PRODUCTS:</p>
</div>
<!-- END BOTTOM SECTION NAME-->
<div id="boxholder">
<div id="boxLeft">
<div class="label">
<p>
<a href="#">text
<a>
</p>
</div>
<!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div>
<!--END BOX LEFT-->
<div id="boxRight">
<div class="label">
<p>exclusive</p>
</div><!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div><!--END BOX RIGHT-->
<div id="boxCenter">
<div class="label">
<p>frost</p>
</div>
<!--END LABEL-->
<img src="layout/products.jpg" width="312" height="157" alt="" />
</div>
<!--END BOX CENTER-->
</div>
<!--END BOX HOLDER-->
</div>
<!-- END BOTTOM SECTION-->
<div id="info" class="container">
<div id="infoboxLeft" class="infotext"></div>
<!-- END INFO BOX LEFT-->
<div id="infoboxRight" class="infotext">
<p>info:<br />Address: </p>
</div>
<!-- END INFO BOX RIGHT-->
</div>
<!--END INFO SECTION-->
<div id="footer">
<p>Copyright: </p>
</div>
<!--END FOOTER-->
</body>
</html>
CSS
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
}
.container
{
margin: 0 auto;
width: 960px;
}
#header
{
background-color: #ffffff;
height: 180px;
overflow: hidden;
}
#logo
{
height: 100px;
margin: 0px, 0px, 0px, 0px;
}
#logo img
{
padding-top: 10px;
}
#mainmenu
{
height: 24px;
margin-top: 60px;
}
#mainmenu ul
{
list-style: none;
}
#mainmenu ul li
{
display: inline;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-top: -2px;
padding-left: 10px;
text-transform: uppercase;
}
#mainmenu ul li a
{
color: #c93159;
text-decoration: none;
}
#mainmenu ul li a:hover
{
text-decoration: none;
}
#mainmiddle
{
background: url(layout/norway.jpg) no-repeat;
height: 400px;
}
#bottomsection
{
height: 185px;
margin-top: 0px;
padding-top: 0px;
}
#bottomsectionName
{
height: 28px;
overflow: hidden;
}
#bottomsectionName p
{
color: 000000;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-top: 3px;
}
#boxholder
{
height: 157px;
}
.label
{
background-color: #c93159;
height: 24px;
margin-left: 104px;
margin-top: 109px;
position: absolute;
width: 208px;
z-index: 10;
}
.label p
{
color: #ffffff;
float: right;
font-family: Verdana;
font-size: 1.125em;
margin-right: 7px;
margin-top: 0px;
}
.label p a
{
color: #ffffff;
text-decoration: none;
text-transform: lowercase;
}
#boxLeft
{
float: left;
height: 157px;
width: 312px;
}
#boxCenter
{
height: 157px;
margin-left: 324px;
width: 312px;
}
#boxRight
{
float: right;
height: 157px;
width: 312px;
}
.infotext
{
font-family: Verdana;
font-size: 0.667em;
}
#info
{
height: 150px;
margin: 0px, 0px,0px,0px;
overflow: hidden;
}
#infoboxLeft
{
float: left;
height: 150px;
width: 480px;
}
#infoboxRight
{
float: right;
height: 150px;
width: 480px;
}
#infoboxRight p
{
float: right;
margin-right: 5px;
margin-top: 110px;
text-align: right;
}
#footer
{
overflow: hidden;
padding: 0px 0px 10px 0px;
}
#footer p
{
font-family: Verdana;
font-size: 0.667em;
text-align: center;
}
Your going to have to write IE specific CSS. My suggestion would be to do it using conditional comments like this:
<!--[if IE]>
.container
{
margin: 0 auto;
width: 960px;
}
#header
{
background-color: #ffffff;
height: 180px;
overflow: hidden;
}
<![endif]-->
<!--[if IE 6]>
My page's CSS goes here
<![endif]-->
<!--[if gte IE 8]>
My page's CSS goes here
<![endif]-->
<!--[if lt IE 9]>
My page's CSS goes here
<![endif]-->
You can use these types of if statements to set your CSS for specific versions of IE. You'll have to adjust the values in each one and test in IE to get it to look how you want it. This will not affect how it appears in other browsers. Also you don't have to put all of your page's CSS inside these comments, just what isn't displaying correctly in IE.