BoNfiRe
11-13-2007, 06:37 PM
Hi I hope someone here can help me...
...I'm trying to convert a fixed width design to a fluid design but tis starting to drive me nuts...
I have tried everything from using positioning to max/min-width but to no avail...
Not in FF & IE 5/6 & 7 anyway :confused:
Here is the code...
style.css:
* { margin:0; padding:0;}
body { background:url(images/tall_top.jpg) left top repeat-x #000000; }
html, input, textarea, select {font-family:Arial; font-size:11px; color:#000000; line-height:12px;}
/*in_line*/
input, select { vertical-align:middle; font-weight:normal;}
img {border:0; vertical-align:top; text-align:left;}
ul { list-style:none;}
strong a{ color:#D58905; background:url(images/marker.gif) no-repeat left top; background-position:0 3px; padding-left:17px; text-decoration:underline;}
strong a:hover{ text-decoration:none}
.form { height:30px;}
.form input {width:207px; height:15px; border-color:#DBDBDB; padding:2px 0 0 10px;}
textarea { width:237px; height:166px; border-color:#DBDBDB; overflow:auto; margin-bottom:13px; padding:2px 0 0 10px;}
a:hover{text-decoration:none;}
a {color:#73AC01;}
.column { float:left;}
.clear { clear:both;}
/*header*/
#header .col_2 .indent { padding:36px 0 0 17px;}
/*footer*/
#footer { background:url(images/footer_bgd.gif) left top repeat-x #CECDBB;}
#footer .indent { padding:28px 19px 0 0; float:right;}
/*content*/
#content { background:#DAD9CF;}
#content .col_1 { background:#C7C5B0;}
#content .col_1 .img_indent { margin:0 10px 0 0;}
#content .col_1 .img_indent1 { margin:0 8px 0 0;}
#content .col_2 .row_1 {background:#000000;}
#content .col_2 .row_2 { background:#E8E7E1;}
#content .col_2 .row_2 .title_block { background:url(images/tittle_2.gif) left top repeat-x #979476; height:29px;}
#content .col_2 .row_3 { background:#DAD9CF;}
.input { width:167px; height:17px; border-color:#DBDBDB; font-size:11px; color:#000000; margin-top:2px;}
.title_block { background:url(images/title_bgd.gif) left bottom repeat-x #979476; height:28px; color:#FFFFFF; font-size:13px; font-weight:bold;}
.title_block .indent { padding:8px 10px 0 11px;}
.title_block a { color:#FFFFFF;}
.title_block1 { background:#000000; height:22px; color:#BCB993; font-size:13px; font-weight:bold;}
.title_block1 .indent { padding:6px 10px 0 22px;}
.fleft { float:left;}
.fright { float:right;}
.txt1 { color:#FF9000;}
.txt2 { color:#648F00;}
.txt3 { color:#767676;}
.txt4 { color:#DA621F;}
.txt5 { color:#DA311F;}
.txt6 { color:#73AC01;}
.block_left { background:url(images/line_hor.gif) left bottom repeat-x #C7C5B0;}
.block_left .indent { padding:11px 0 11px 9px;}
.block_left .indent1 { padding:14px 0 16px 10px;}
.arrow_indent { margin-bottom:7px;}
#page1 #content .col_2 .row_2 .indent { padding:9px 17px 15px 22px;}
#page1 #content .col_2 .row_3 .indent { padding:15px 0 29px 22px;}
layout.css:
#main {margin:0 auto; width:780px; float:left;}
#header{height:98px}
.col_1, .col_2, .col_3{ float:left;}
#page1 #content .col_1 {width:243px;}
#page1 #content .col_2 {width:537px;}
#footer{height:67px}
index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body id="page1">
<div id="main">
<!-- header -->
<div id="header">
<div style="position:absolute;">
<!--Valid flash version 8.0-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="780" height="360">
<param name="movie" value="flash/header10_v8.swf?button=1" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
<!--[if !IE]> <-->
<object data="flash/header10_v8.swf?button=1"
width="780" height="360" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<param name="wmode" value="transparent" />
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
</div>
</div>
<!-- content -->
<div id="content">
<div class="col_1">
<img alt="" src="images/spacer.gif" width="1" height="133" /><br />
<div class="title_block">
<div class="indent">
<div class="fleft">5 Latest News</div>
<div class="fright"><a href="#">All News</a></div>
</div>
</div>
<div class="block_left">
<div class="indent" style="padding-bottom:14px;">
<a href="#"><img class="img_indent" alt="" src="images/1_p1.jpg" style="float:left;"/> </a>
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit...
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p2.jpg" style="float:left;"/></a>
tetuer adipiscing elit. Praesent vestibulum molestie lacus...
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p3.jpg" style="float:left;"/></a>
tetuer adipiscing elit. Praesent vestibulum...
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p4.jpg" style="float:left;"/></a>
Lorem ipsum dolor sit amet, consec tetuer adipiscing...
<div class="clear"></div>
</div>
</div>
<div class="block_left" style="background:#C7C5B0;">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p5.jpg" style="float:left;"/></a>
tetuer adipiscing elit. Praesent vestibulum molestie lacus enean...
<div class="clear"></div>
</div>
</div>
<div class="title_block">
<div class="indent">Related Videos</div>
</div>
<div class="block_left">
<div class="indent1">
<a href="#"><img class="img_indent1" alt="" src="images/1_p6.jpg" style="float:left;"/></a>
<strong>Simpsons The Game</strong><br />
Praesent vestibulum molestie lacus. Aenean nonummy<br />
<br />
<a href="#"><strong>watch official trailer</strong></a>
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent1">
<a href="#"><img class="img_indent1" alt="" src="images/1_p7.jpg" style="float:left;"/></a>
<strong>Grand Theft Auto IV</strong><br />
Praesent vestibulum molestie lacus. Aenean nonummy<br />
<br />
<a href="#"><strong>watch official trailer</strong></a>
<div class="clear"></div>
</div>
</div>
<div class="block_left" style="background:#C7C5B0;">
<div class="indent1">
<a href="#"><img class="img_indent1" alt="" src="images/1_p8.jpg" style="float:left;"/></a>
<strong>The Last Remnant</strong><br />
Praesent vestibulum molestie lacus. Aenean nonummy<br />
<br />
<a href="#"><strong>watch official trailer</strong></a>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col_2">
<div class="row_1">
<div><img alt="" src="images/spacer.gif" width="1" height="262" /></div>
</div>
<div class="row_2">
<div class="title_block">
<div style="padding:8px 10px 0 22px;">Newest Reviews</div>
</div>
<div class="indent">
<div class="fleft" style="width:158px;">
<a href="#"><img alt="" src="images/1_p9.jpg" /></a><br />
<br style="line-height:7px;"/>
<strong>Grand Theft Auto IV</strong><br />
<br />
Praesent vestibulum molestie lacus. Aenean nonummy hen drerit mauris...<br />
<br />
Score: <strong class="txt1">8.5</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="10" height="1" /></div>
<div class="fleft" style="width:158px;">
<a href="#"><img alt="" src="images/1_p10.jpg" /></a><br />
<br style="line-height:7px;"/>
<strong>Tiger Woods PGA Tour 08</strong><br />
<br />
Praesent vestibulum molestie lacus. Aenean nonummy hen drerit mauris...<br />
<br />
Score: <strong class="txt2">6.8</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="14" height="1" /></div>
<div class="fleft" style="width:158px;">
<a href="#"><img alt="" src="images/1_p11.jpg" /></a><br />
<br style="line-height:7px;"/>
<strong>Clive Barker's Jericho</strong><br />
<br />
Praesent vestibulum molestie lacus. Aenean nonummy hen drerit mauris...<br />
<br />
Score: <strong class="txt3">5.6</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row_3">
<div class="title_block">
<div style="padding:8px 10px 0 22px;">Xmaster Recommends</div>
</div>
<div class="indent">
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p12.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Forza Mastersport 2</strong><br />
<br style="line-height:5px;"/>
Score: <strong class="txt4">9.7</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="23" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p13.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Darkness</strong><br />
<br style="line-height:18px;"/>
Score: <strong class="txt4">9.5</strong><br />
<br style="line-height:8px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="24" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p14.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Guitar Hero II</strong><br />
<br style="line-height:18px;"/>
Score: <strong class="txt4">9.3</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="23" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p15.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>EA Sports Nascar 08</strong><br />
<br style="line-height:5px;"/>
Score: <strong class="txt5">10.0</strong><br />
<br style="line-height:8px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="24" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p16.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Transformers The Game</strong><br />
<br style="line-height:5px;"/>
Score: <strong class="txt1">8.9</strong><br />
<br style="line-height:10px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- footer -->
<div id="footer">
<div class="indent"><strong>Xmaster &copy 2007 |</strong> <a href="index-6.html"><strong>Privacy Policy</strong></a></div>
</div>
</div>
</body>
</html>
EDIT:
This is the best I can get but I need the left col fixed because of the style
#main {margin:0 5% 0 5%;min-width:780px !important;}
#header{height:98px}
.col_1, .col_2, .col_3{float:left;}
/*======= index.html =======*/
#page1 #content .col_1 {width:25%;max-width:243px !important;}
#page1 #content .col_2 {width:75% !important;}
#footer{height:67px}
#slowly .going .insane
I hope someone can help me, it would be greatly appreciated.
OK this works ok in FF but not in ie :confused:
#main {margin:0 5% 0 5%;min-width:780px !important;}
#header{height:98px}
.col_1, .col_2, .col_3{float:left;}
/*======= index.html =======*/
#page1 #content .col_1 {width:243px;position:absolute;}
#page1 #content .col_2 {width:75%;margin:0 0 0 243px;}
#footer{height:67px}
TIA
BoN
...I'm trying to convert a fixed width design to a fluid design but tis starting to drive me nuts...
I have tried everything from using positioning to max/min-width but to no avail...
Not in FF & IE 5/6 & 7 anyway :confused:
Here is the code...
style.css:
* { margin:0; padding:0;}
body { background:url(images/tall_top.jpg) left top repeat-x #000000; }
html, input, textarea, select {font-family:Arial; font-size:11px; color:#000000; line-height:12px;}
/*in_line*/
input, select { vertical-align:middle; font-weight:normal;}
img {border:0; vertical-align:top; text-align:left;}
ul { list-style:none;}
strong a{ color:#D58905; background:url(images/marker.gif) no-repeat left top; background-position:0 3px; padding-left:17px; text-decoration:underline;}
strong a:hover{ text-decoration:none}
.form { height:30px;}
.form input {width:207px; height:15px; border-color:#DBDBDB; padding:2px 0 0 10px;}
textarea { width:237px; height:166px; border-color:#DBDBDB; overflow:auto; margin-bottom:13px; padding:2px 0 0 10px;}
a:hover{text-decoration:none;}
a {color:#73AC01;}
.column { float:left;}
.clear { clear:both;}
/*header*/
#header .col_2 .indent { padding:36px 0 0 17px;}
/*footer*/
#footer { background:url(images/footer_bgd.gif) left top repeat-x #CECDBB;}
#footer .indent { padding:28px 19px 0 0; float:right;}
/*content*/
#content { background:#DAD9CF;}
#content .col_1 { background:#C7C5B0;}
#content .col_1 .img_indent { margin:0 10px 0 0;}
#content .col_1 .img_indent1 { margin:0 8px 0 0;}
#content .col_2 .row_1 {background:#000000;}
#content .col_2 .row_2 { background:#E8E7E1;}
#content .col_2 .row_2 .title_block { background:url(images/tittle_2.gif) left top repeat-x #979476; height:29px;}
#content .col_2 .row_3 { background:#DAD9CF;}
.input { width:167px; height:17px; border-color:#DBDBDB; font-size:11px; color:#000000; margin-top:2px;}
.title_block { background:url(images/title_bgd.gif) left bottom repeat-x #979476; height:28px; color:#FFFFFF; font-size:13px; font-weight:bold;}
.title_block .indent { padding:8px 10px 0 11px;}
.title_block a { color:#FFFFFF;}
.title_block1 { background:#000000; height:22px; color:#BCB993; font-size:13px; font-weight:bold;}
.title_block1 .indent { padding:6px 10px 0 22px;}
.fleft { float:left;}
.fright { float:right;}
.txt1 { color:#FF9000;}
.txt2 { color:#648F00;}
.txt3 { color:#767676;}
.txt4 { color:#DA621F;}
.txt5 { color:#DA311F;}
.txt6 { color:#73AC01;}
.block_left { background:url(images/line_hor.gif) left bottom repeat-x #C7C5B0;}
.block_left .indent { padding:11px 0 11px 9px;}
.block_left .indent1 { padding:14px 0 16px 10px;}
.arrow_indent { margin-bottom:7px;}
#page1 #content .col_2 .row_2 .indent { padding:9px 17px 15px 22px;}
#page1 #content .col_2 .row_3 .indent { padding:15px 0 29px 22px;}
layout.css:
#main {margin:0 auto; width:780px; float:left;}
#header{height:98px}
.col_1, .col_2, .col_3{ float:left;}
#page1 #content .col_1 {width:243px;}
#page1 #content .col_2 {width:537px;}
#footer{height:67px}
index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body id="page1">
<div id="main">
<!-- header -->
<div id="header">
<div style="position:absolute;">
<!--Valid flash version 8.0-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="780" height="360">
<param name="movie" value="flash/header10_v8.swf?button=1" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="wmode" value="transparent" />
<!--[if !IE]> <-->
<object data="flash/header10_v8.swf?button=1"
width="780" height="360" type="application/x-shockwave-flash">
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<param name="wmode" value="transparent" />
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
</div>
</div>
<!-- content -->
<div id="content">
<div class="col_1">
<img alt="" src="images/spacer.gif" width="1" height="133" /><br />
<div class="title_block">
<div class="indent">
<div class="fleft">5 Latest News</div>
<div class="fright"><a href="#">All News</a></div>
</div>
</div>
<div class="block_left">
<div class="indent" style="padding-bottom:14px;">
<a href="#"><img class="img_indent" alt="" src="images/1_p1.jpg" style="float:left;"/> </a>
Lorem ipsum dolor sit amet, consec tetuer adipiscing elit...
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p2.jpg" style="float:left;"/></a>
tetuer adipiscing elit. Praesent vestibulum molestie lacus...
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p3.jpg" style="float:left;"/></a>
tetuer adipiscing elit. Praesent vestibulum...
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p4.jpg" style="float:left;"/></a>
Lorem ipsum dolor sit amet, consec tetuer adipiscing...
<div class="clear"></div>
</div>
</div>
<div class="block_left" style="background:#C7C5B0;">
<div class="indent">
<a href="#"><img class="img_indent" alt="" src="images/1_p5.jpg" style="float:left;"/></a>
tetuer adipiscing elit. Praesent vestibulum molestie lacus enean...
<div class="clear"></div>
</div>
</div>
<div class="title_block">
<div class="indent">Related Videos</div>
</div>
<div class="block_left">
<div class="indent1">
<a href="#"><img class="img_indent1" alt="" src="images/1_p6.jpg" style="float:left;"/></a>
<strong>Simpsons The Game</strong><br />
Praesent vestibulum molestie lacus. Aenean nonummy<br />
<br />
<a href="#"><strong>watch official trailer</strong></a>
<div class="clear"></div>
</div>
</div>
<div class="block_left">
<div class="indent1">
<a href="#"><img class="img_indent1" alt="" src="images/1_p7.jpg" style="float:left;"/></a>
<strong>Grand Theft Auto IV</strong><br />
Praesent vestibulum molestie lacus. Aenean nonummy<br />
<br />
<a href="#"><strong>watch official trailer</strong></a>
<div class="clear"></div>
</div>
</div>
<div class="block_left" style="background:#C7C5B0;">
<div class="indent1">
<a href="#"><img class="img_indent1" alt="" src="images/1_p8.jpg" style="float:left;"/></a>
<strong>The Last Remnant</strong><br />
Praesent vestibulum molestie lacus. Aenean nonummy<br />
<br />
<a href="#"><strong>watch official trailer</strong></a>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col_2">
<div class="row_1">
<div><img alt="" src="images/spacer.gif" width="1" height="262" /></div>
</div>
<div class="row_2">
<div class="title_block">
<div style="padding:8px 10px 0 22px;">Newest Reviews</div>
</div>
<div class="indent">
<div class="fleft" style="width:158px;">
<a href="#"><img alt="" src="images/1_p9.jpg" /></a><br />
<br style="line-height:7px;"/>
<strong>Grand Theft Auto IV</strong><br />
<br />
Praesent vestibulum molestie lacus. Aenean nonummy hen drerit mauris...<br />
<br />
Score: <strong class="txt1">8.5</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="10" height="1" /></div>
<div class="fleft" style="width:158px;">
<a href="#"><img alt="" src="images/1_p10.jpg" /></a><br />
<br style="line-height:7px;"/>
<strong>Tiger Woods PGA Tour 08</strong><br />
<br />
Praesent vestibulum molestie lacus. Aenean nonummy hen drerit mauris...<br />
<br />
Score: <strong class="txt2">6.8</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="14" height="1" /></div>
<div class="fleft" style="width:158px;">
<a href="#"><img alt="" src="images/1_p11.jpg" /></a><br />
<br style="line-height:7px;"/>
<strong>Clive Barker's Jericho</strong><br />
<br />
Praesent vestibulum molestie lacus. Aenean nonummy hen drerit mauris...<br />
<br />
Score: <strong class="txt3">5.6</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="row_3">
<div class="title_block">
<div style="padding:8px 10px 0 22px;">Xmaster Recommends</div>
</div>
<div class="indent">
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p12.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Forza Mastersport 2</strong><br />
<br style="line-height:5px;"/>
Score: <strong class="txt4">9.7</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="23" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p13.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Darkness</strong><br />
<br style="line-height:18px;"/>
Score: <strong class="txt4">9.5</strong><br />
<br style="line-height:8px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="24" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p14.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Guitar Hero II</strong><br />
<br style="line-height:18px;"/>
Score: <strong class="txt4">9.3</strong><br />
<br style="line-height:7px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="23" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p15.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>EA Sports Nascar 08</strong><br />
<br style="line-height:5px;"/>
Score: <strong class="txt5">10.0</strong><br />
<br style="line-height:8px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="fleft"><img alt="" src="images/spacer.gif" width="24" height="1" /></div>
<div class="fleft" style="width:80px;">
<a href="#"><img alt="" src="images/1_p16.jpg" /></a><br />
<br style="line-height:5px;"/>
<strong>Transformers The Game</strong><br />
<br style="line-height:5px;"/>
Score: <strong class="txt1">8.9</strong><br />
<br style="line-height:10px;"/>
<a href="#"><img alt="" src="images/read_but.gif" /></a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- footer -->
<div id="footer">
<div class="indent"><strong>Xmaster &copy 2007 |</strong> <a href="index-6.html"><strong>Privacy Policy</strong></a></div>
</div>
</div>
</body>
</html>
EDIT:
This is the best I can get but I need the left col fixed because of the style
#main {margin:0 5% 0 5%;min-width:780px !important;}
#header{height:98px}
.col_1, .col_2, .col_3{float:left;}
/*======= index.html =======*/
#page1 #content .col_1 {width:25%;max-width:243px !important;}
#page1 #content .col_2 {width:75% !important;}
#footer{height:67px}
#slowly .going .insane
I hope someone can help me, it would be greatly appreciated.
OK this works ok in FF but not in ie :confused:
#main {margin:0 5% 0 5%;min-width:780px !important;}
#header{height:98px}
.col_1, .col_2, .col_3{float:left;}
/*======= index.html =======*/
#page1 #content .col_1 {width:243px;position:absolute;}
#page1 #content .col_2 {width:75%;margin:0 0 0 243px;}
#footer{height:67px}
TIA
BoN