Forum Moderators: not2easy
I have been working on a layout and the following is my atttempt (not very good!) to replace a section of table
<div id="footer">
<div class="td2 bl">red</div>
<div class="td2 r">blue</div>
<div class="td3 br">3 brown</div>
<div class="td3 y">3 yellow</div>
<div class="td3 g">3 green</div>
</div>
The 1st section should show 2 columns of a table, the 2nd section should show 3 columns of a table. This works fine in Firefox and Netcape but not in IE6 where the 1st 2 sections take 2 rows to display. I have set 'td2' to width=50%.
The following is the complete web page:-
Start:
<!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>Page Title</title>
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body {margin: 0; padding: 0; height: 100%;
min-width: 775px;
}
#bgcontain {
width: 775px;
margin: 0 auto;
}
#container {
padding: 00;
float: left;
width: 100%;
clear: both;
min-height: 250px;
}
/*\ IE/Win min height hack */
* html #container {height: 250px;}
/* */
#leftwrap {
float: left;
width: 655px;
}
#rightbar {
float: left;
width: 120px;
background: #ffffcc;
}
#leftbar {
float: left;
width: 100px;
background: #993333;
}
#content {
float: right;
width: 555px;
min-height: 100%;
background: yellow;
}
#footer, #header {width: 775px; margin: 0 auto; background: #efefef; clear: both;}
/* general */
p {margin: 0; padding: 0px;}
.td2 {
width: 50%;
border: 0;
float: left;
}
.td3 {
width: 33%;
border: 0;
float: left;
}
.r {background-color:red;}
.bl {background-color:blue;}
.br {background-color:brown;}
.y {background-color:yellow;}
.g {background-color:green;}
-->
</style>
</head>
<body>
<div id="bgcontain">
<div id="header">
<table width="775" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="brown" width="160">
<a href="/"><img src="image.gif" width="169" height="50" alt="#" border="0" align="left" /></a></td>
<td class="brown" width="615" valign="middle">
<a href="/"><img src="logo.gif" width="531" height="50" alt="#" border="0" align="right" /></a>
</td>
</tr>
</table>
<div id="container">
<div id="leftwrap">
<div id="content">
<p>main content in here</p>
</div>
<div id="leftbar">
<p>Left hand side menu</p>
</div>
</div>
<div id="rightbar">
<p>advert section</p>
</div>
</div>
<div id="footer">
<div class="td2 bl">red</div>
<div class="td2 r">blue</div>
<div class="td3 br">3 brown</div>
<div class="td3 y">3 yellow</div>
<div class="td3 g">3 green</div>
</div>
</div>
</div>
</body>
</html>
Can anyone give me any pointers as to what I am doing wrong? I have spent the last 3 days searching on Google and on this forum without any luck.
You can see this online at <No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
Thanks in advance.
Regards,
Robin
[edited by: SuzyUK at 12:02 pm (utc) on Mar. 6, 2005]
[edit reason] examplified [/edit]
You're not doing anything wrong it's IE's float model problem,
namely the 3px float jog, you're coming up against.
.td2 {
width: 50%;
border: 0;
float: left;
}.td3 {
width: 33%;
border: 0;
float: left;
}
The two cells (td2) add up to 100% but then IE wants to put 3px after them so the are too big for the one line.
The three cells (td3) are lining up properly because they don't total 100% and the 3px has room beside the last float
Solutions: make one or both of the TD2 columns 49%
or give the last float in each "row" a negative 3px margin
.r {background-color:red; margin-right: -3px;}
.bl {background-color:blue;}
.br {background-color:brown;}
.y {background-color:yellow;}
.g {background-color:green; width: 34%; margin-right: -3px;}
(I changed the row of three too to show it working for both rows)
Suzy
I appreciate your answer and I will be able to understand a bit more which is going on.
It may be easier to set the width of the 'div' on the web page and not using the style sheet to set the width i.e.
NOT
<div class="td3 br">3 brown</div>
<div class="td3 y">3 yellow</div>
<div class="td3 g">3 green</div>
BUT
<div class="td3 br width="33%">3 brown</div>
<div class="td3 y width="33%">3 yellow</div>
<div class="td3 g width="34%">3 green</div>
OR would this be the way to do it:-
<div class="td3 br width:33%;">3 brown</div>
<div class="td3 y width:33%;">3 yellow</div>
<div class="td3 g width:34%;">3 green</div>
Can you guide me?
Thanks in advance.
Regards,
Robin
To change the widths directly on the HTML you need to add a "style" attribute and the the css. So, <div class="td3 br" style="width: 33%;">3 brown</div>.
Now, if Suzy returns to this message or someone else does, is there ANY other way to keep them on the same line? Suppose I DON'T want to float the divisions but want them on the same line. I've tried Floating and using "display: inline;" only to find that using this diplay dosn't let me supply my 100% width.
Can you help me?
HTML:
<!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>Page Title</title>
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body {margin: 0; padding: 0; height: 100%;
min-width: 775px;
}
#bgcontain {
width: 775px;
margin: 0 auto;
}
#container {
padding: 00;
float: left;
width: 100%;
clear: both;
min-height: 250px;
}
/*\ IE/Win min height hack */
* html #container {height: 250px;}
/* */
#leftwrap {
float: left;
width: 655px;
}
#rightbar {
float: left;
width: 120px;
background: #ffffcc;
}
#leftbar {
float: left;
width: 100px;
background: #993333;
}
#content {
float: right;
width: 555px;
min-height: 100%;
background: yellow;
}
#footer, #header {width: 775px; margin: 0 auto; background: #efefef; clear: both;}
/* general */
p {margin: 0; padding: 0px;}
.td2 {
width: 50%;
border: 0;
float: left;
}
.td3 {
width: 33%;
border: 0;
float: left;
}
.r {background-color:red;}
.bl {background-color:blue;}
.br {background-color:brown;}
.y {background-color:yellow;}
.g {background-color:green;}
-->
</style>
</head>
<body>
<div id="bgcontain">
<div id="header">
<table width="775" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="brown" width="160">
<a href="/"><img src="image.gif" width="169" height="50" alt="#" border="0" align="left" /></a></td>
<td class="brown" width="615" valign="middle">
<a href="/"><img src="logo.gif" width="531" height="50" alt="#" border="0" align="right" /></a>
</td>
</tr>
</table>
<div id="container">
<div id="leftwrap">
<div id="content">
<p>main content in here</p>
</div>
<div id="leftbar">
<p>Left hand side menu</p>
</div>
</div>
<div id="rightbar">
<p>advert section</p>
</div>
</div>
<div id="footer">
<div class="td2 bl">red</div>
<div class="td2 r">blue</div>
<div class="td3 br">3 brown</div>
<div class="td3 y">3 yellow</div>
<div class="td3 g">3 green</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.title
{
background-color: black;
color: #ffffff;
padding: 5px;
margin: 10px;
}
.menu
{
background-color: black;
color: #ffffff;
padding: 5px;
margin: 10px;
float: left;
}
.content
{
background-color: black;
color: #ffffff;
padding: 5px;
margin: 10px;
float: right;
}
Inother words I'm wondering if Text Two and Three can be on the same line (which they are) but have editable widths and are right next to each other instead of floated like they are.Is there maybe a way to put them in an invisable division so that a 50% width will then be relative to that? Ah I don't know...
I have found that you can select whatever width you want using the following code. In IE all I had to do was to put in a negative margin of 1px. Here is the code which works in IE, Opera, Firefox and Netscape.
<!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>Garden Sheds</title>
<meta name="description" content=" Most of our timber garden sheds" />
<meta name="keywords" content="shed, storage shed" />
<base href="localhost/" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
body {margin: 0; padding: 0; height: 100%;
min-width: 775px;
background-color: #efefef;
}
#bgcontain {width: 775px; margin: 0 auto; border: solid #993333 1px; color: #000000; background-color:#ffffff; position: relative; top: 20px;}
body, table, tr, td, p {
font-family:Arial, Verdana, Helvetica, serif;
font-size: 9pt;
color: #000000;
font-weight:normal;
}
/*\ IE/Win min height hack */
* html div.container {height: 0px;}
/* */
/* general */
p {margin: 0; padding: 0px;}
.tr{background: none #ffffcc; border: solid #000000 1px; color: #000000; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; padding: 0; text-align: center; width: 775px; background-color:#ffffff;}
.td{border: none; float: left; margin: 0; padding: 0; background-color:#ffffff;}
.r {background-color:red;}
.bl {background-color:blue;}
.br {background-color:brown;}
.y {background-color:yellow;}
.g{background-color:green;}
.b {font-weight:bold;}
.c {text-align:center;}
.j {text-align:justify;}
.l {text-align:left;}
.mid {vertical-align:middle;}
-->
</style>
</head>
<body>
<div class="bgcontain">
<div class="tr">
<div class="y">yellow</div>
<div class="td r">red</div>
<div class="td br">3 brown</div>
<div class="td y">3 yellow</div>
<div class="td r">3 green</div>
<div class="td" style="width: 100%; margin-right: -3px">width 50</div><br><br>
<div class="td br" style="width: 30%;">brown 30%</div>
<div class="td r" style="width: 50%;">red 50%</div>
<div class="td g" style="width: 20%; margin-right: -1px">green 20% (- 1px)</div>
<br />
<div class="td br" style="width: 22%;">brown 22%</div>
<div class="td r" style="width: 44%;">red 44%</div>
<div class="td g" style="width: 34%; margin-right: -1px">green 34% (- 1px)</div>
</div> <!-- end 'tr' -->
</div>
