...

View Full Version : 3 column layout: 2 fixed, 1 fluid. IE problem when window resized.



Graft-Creative
12-12-2005, 01:18 PM
Hi,

I have a basic 3 column layout here http://www.upsibar.co.uk

As you can see the 1st and 2nd columns are fixed widths, with the 3rd column on the right just taking up whatever space is left.

All's working as it should exept in IE. In IE when the window is resized the 3rd column jumps under the second - I can't see why this is, as there is no width specified for the 3rd column - so it's not as if it runs out of room whe the window is made smaller.

I had the same problem in Opera & FF, but using margin-left to position the 3rd column fixed that, but not for IE.

EDIT> The nav also disappears in IE, Opera & FF when the window is a certain size!

Any help really appreciated as always.

Kindest Regards,

Gary

harbingerOTV
12-12-2005, 02:23 PM
Morning Gary,

try this out and see if it works.


* {
margin: 0;
padding: 0;
}

body {
background: url(http://www.upsibar.co.uk/images/bg.gif) repeat-y;
font-family: Trebuchet, "Trebuchet MS", "Lucida Grande", Tahoma, Arial,

Helvetica, sans-serif;
color: white;
}
* html body {
border-left: 820px solid #fff;
float: left;
position: relative;
}
div#container {
background: url(http://www.upsibar.co.uk/images/bg.gif) repeat-y;
min-width: 820px;
}
* html div#container {
margin-left: -820px;
position: relative;
float: left;
}
div#header {
width: 467px;
}

div#up {
height: 768px;
width: 206px;
background: url(http://www.upsibar.co.uk/images/up.jpg) no-repeat left top;
float: left;
}

div#si {
height: 221px;
background: url(http://www.upsibar.co.uk/images/si.jpg) top left no-repeat;
float: left;
width: 261px;
}

ul#nav {
margin-top: 200px;
}



ul#nav li {
text-indent: 3em;
list-style: none;
font: bold 1em Georgia, Palatino, "Times New Roman", Times, serif;
}

ul#nav li a {
display: block;
height: 42px;
width: 261px;
line-height: 2.6em;
color: #3ab2ab;
background: url(http://www.upsibar.co.uk/images/button-bg.gif) no-repeat left

top;
text-decoration: none;
}

ul#nav li a:hover {
background: url(http://www.upsibar.co.uk/images/button-bg.gif) no-repeat right

top;
}

div#content {
margin-left: 460px;
padding: 1.8em;
}


It works for me on IE6 FF 1.0.7(?) and Opera 8 on PC. 820px seemed about what IE needed to make the min-width work.

Graft-Creative
12-12-2005, 05:29 PM
Hey Harbinger, long time no speaky :)

Thanks for taking the time, but it doesn't seem to work here...

Somebody please save me.....there's a little pitchfork wielding devil sat on my left shoulder, whispering "table, table, table" in my ear :D

Thanks again mate, much appreciated,

Gary

harbingerOTV
12-13-2005, 03:26 AM
div#content {
left: 460px;
padding: 1.8em;
position: absolute;
}


that still works for me on my pc based browsers. See if it fixes what you need.

Why did my first attempt not work for you? Is it a OS thing or a browser thing?

maybe I should post the HTML/CSS I used. I think you changed it since I last looked before work:



<!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>Upsi Bar - Accrington's Premier Nitespot - Bar - Function Room</title>
<link href="sitestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="up"></div>
<div id="si">
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">gallery</a></li>

<li><a href="#">booking info </a></li>
<li><a href="#">terms &amp; conditions </a></li>
<li><a href="#">contact us </a></li>
<li><a href="#">useful links </a></li>
</ul>
</div>
</div>
<div id="content">
<p>Website Coming Soon</p>
<ul>

<li>PRIVATE HIRE FOR ALL OCCASIONS</li>
<li>BIRTHDAYS, RE-UNIONS ETC.</li>
<li>GREAT ATMOSPHERE!</li>
<li>TOWN CENTRE LOCATION</li>
</ul>
<p>UpSi Bar<br />
First Floor<br />
Dutton Street<br />

57-59 Blackburn Road
<br />
Accrington<br />
Lancs<br />
(opposite Town Hall)</p>
<p><strong>For all enquiries please call 01254 393555</strong></p>
</div>
</div>
</body>

</html>

</html>



* {
margin: 0;
padding: 0;
}

body {
background: url(http://www.upsibar.co.uk/images/bg.gif) repeat-y;
font-family: Trebuchet, "Trebuchet MS", "Lucida Grande", Tahoma, Arial,

Helvetica, sans-serif;
color: white;
}

div#header {
width: 467px;
float: left;
}

div#up {
height: 768px;
width: 206px;
background: url(http://www.upsibar.co.uk/images/up.jpg) no-repeat left top;
float: left;
}

div#si {
height: 221px;
background: url(http://www.upsibar.co.uk/images/si.jpg) top left no-repeat;
float: left;
width: 261px;
}

ul#nav {
margin-top: 200px;
}

ul#nav li {
text-indent: 3em;
list-style: none;
font: bold 1em Georgia, Palatino, "Times New Roman", Times, serif;
}

ul#nav li a {
display: block;
height: 42px;
width: 261px;
line-height: 2.6em;
color: #3ab2ab;
background: url(http://www.upsibar.co.uk/images/button-bg.gif) no-repeat left

top;
text-decoration: none;
}

ul#nav li a:hover {
background: url(http://www.upsibar.co.uk/images/button-bg.gif) no-repeat right

top;
}

div#content {
left: 460px;
padding: 1.8em;
position: absolute;
}



just in case you changed it again ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum