Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    Last edited by Graft-Creative; 12-12-2005 at 01:31 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Morning Gary,

    try this out and see if it works.
    Code:
    * {
    	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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Thanks again mate, much appreciated,

    Gary

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    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:

    Code:
    <!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>
    Code:
    * {
    	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
    Last edited by harbingerOTV; 12-13-2005 at 03:28 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •