R
Rick Stirling
Guest
Ok folks, I'm building a new site at http://www.tenrapid.com/new-index.php. Its pretty standand, with a banner at the top, followed by a horizontal menu, then a left and right content column.
i'm having bother with a float:left in a div.
Heres the CSS code snippet:
.content-left
{
width:180px;
padding: 10px;
background-image: url(../sitegfx/sidebar.jpg);
float: left;
}
.content-right
{
padding: 10px;
float: left;
}
And the HTML:
<!-- This is the side menu of each page -->
<div class="content-left">
<p>this is some random text that I am typing in here</p>
</div>
<!-- This is the main part of each page -->
<div class="content-right">
<p>this is some random text that I am typing in here</p>
</div>
When I put that code it, the site is working fine - but ONLY on a good sized browser window! On a smaller browser window the right div is nested UNDER the left one when the sentence is too wide for the div.
So, I took a look at other sites, and none of them have the float:left property in the right column div. Aha! So I take out the Div, and lo and behold, the right column is indeed where it should be, and the text is flowing when I resize the browser window (when it gets smaller than the biggest word in the sentence it then wraps. This is fair enough.
Except...the padding is borked. On Mozilla and Opera the padding is 0 pixels in the right-content div. On IE it looks like its about 15 or 20 pixels.
Any thoughts? This is driving me round the bend.
BTW, here is the entire CSS and HTML for the site (very basic at the minute).
body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ffffff;
background-image: url(../sitegfx/bluetrails.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
border: 0px;
}
.sitelogo
{
padding-left: 20px;
}
.menu
{
font-weight: bold;
padding: 0px;
font-size: 14px;
background-color: #6688aa;
color: #6688aa;
width: 100%;
float: left;
min-width:500px;
}
.ie500px
{
width: 500px;
}
.mitem
{
background-color: #6688aa;
color: #ffffff;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid white;
float: left;
}
.actmitem
{
background-color: #ffffff;
color: #6688aa;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid white;
float: left;
}
.content-left
{
width:180px;
padding: 10px;
background-image: url(../sitegfx/sidebar.jpg);
float: left;
}
.content-right
{
padding: 10px;
float: left;
}
.section-title
{
color: #6688aa;
font-size: 14px;
font-weight: bold;
}
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">";?>
<!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>
<title>TEN RAPID</title>
<base="http://www.tenrapid.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<? include "includes/metainfo.txt";?>
<link href="includes/basestyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="sitelogo">
<img src="sitegfx/logo_big_trans.gif" width="346" height="52" alt="TEN RAPID LOGO" />
</div>
<div class="menu">
<div class="ie500px">
<div class="actmitem">Home</div>
<div class="mitem">News</div>
<div class="mitem">Live</div>
<div class="mitem">Music</div>
<div class="mitem">Photos</div>
<div class="mitem">Links</div>
<div class="mitem">Contact</div>
</div> <!-- end the ie fix div -->
</div> <!-- end the menu div -->
<!-- This is the side menu of each page -->
<div class="content-left">
<p>this is some random text that I am typing in here</p>
</div>
<!-- This is the main part of each page -->
<div class="content-right">
<p>this is some random text that I am typing in here</p>
</div>
</body>
</html>
i'm having bother with a float:left in a div.
Heres the CSS code snippet:
.content-left
{
width:180px;
padding: 10px;
background-image: url(../sitegfx/sidebar.jpg);
float: left;
}
.content-right
{
padding: 10px;
float: left;
}
And the HTML:
<!-- This is the side menu of each page -->
<div class="content-left">
<p>this is some random text that I am typing in here</p>
</div>
<!-- This is the main part of each page -->
<div class="content-right">
<p>this is some random text that I am typing in here</p>
</div>
When I put that code it, the site is working fine - but ONLY on a good sized browser window! On a smaller browser window the right div is nested UNDER the left one when the sentence is too wide for the div.
So, I took a look at other sites, and none of them have the float:left property in the right column div. Aha! So I take out the Div, and lo and behold, the right column is indeed where it should be, and the text is flowing when I resize the browser window (when it gets smaller than the biggest word in the sentence it then wraps. This is fair enough.
Except...the padding is borked. On Mozilla and Opera the padding is 0 pixels in the right-content div. On IE it looks like its about 15 or 20 pixels.
Any thoughts? This is driving me round the bend.
BTW, here is the entire CSS and HTML for the site (very basic at the minute).
body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ffffff;
background-image: url(../sitegfx/bluetrails.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
border: 0px;
}
.sitelogo
{
padding-left: 20px;
}
.menu
{
font-weight: bold;
padding: 0px;
font-size: 14px;
background-color: #6688aa;
color: #6688aa;
width: 100%;
float: left;
min-width:500px;
}
.ie500px
{
width: 500px;
}
.mitem
{
background-color: #6688aa;
color: #ffffff;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid white;
float: left;
}
.actmitem
{
background-color: #ffffff;
color: #6688aa;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid white;
float: left;
}
.content-left
{
width:180px;
padding: 10px;
background-image: url(../sitegfx/sidebar.jpg);
float: left;
}
.content-right
{
padding: 10px;
float: left;
}
.section-title
{
color: #6688aa;
font-size: 14px;
font-weight: bold;
}
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">";?>
<!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>
<title>TEN RAPID</title>
<base="http://www.tenrapid.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<? include "includes/metainfo.txt";?>
<link href="includes/basestyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="sitelogo">
<img src="sitegfx/logo_big_trans.gif" width="346" height="52" alt="TEN RAPID LOGO" />
</div>
<div class="menu">
<div class="ie500px">
<div class="actmitem">Home</div>
<div class="mitem">News</div>
<div class="mitem">Live</div>
<div class="mitem">Music</div>
<div class="mitem">Photos</div>
<div class="mitem">Links</div>
<div class="mitem">Contact</div>
</div> <!-- end the ie fix div -->
</div> <!-- end the menu div -->
<!-- This is the side menu of each page -->
<div class="content-left">
<p>this is some random text that I am typing in here</p>
</div>
<!-- This is the main part of each page -->
<div class="content-right">
<p>this is some random text that I am typing in here</p>
</div>
</body>
</html>