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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fluid HTML Page with one fixed column width problem

    Hi,

    You can view my code here:
    http://www.missmonkee.com/clive/mel.html

    I have a problem whereby I have a design that has a max-width of 932px.
    Now within this there is a fixed width for the left hand column. There are two extra columns on the right of this, that need to be fluid. So they need to shrink down with the window resizes to 800 x 600, but then only stretch back up to a maximum of 932px.

    I know that max-width is not supported by IE and even if I did have max-width on my outer container (black), it would not then allow me to have a fluid layout
    within this.

    Can anyone help me at all? I'm not even sure if this is possible. Has anyone else attempted this bizarre design!? I DIDNT DESIGN IT! I wish we could change it.

    Thanks, Mel

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    If you're minimum design resolution is 800x600, then I would try to use a container div of 100% (where you have told the body and html to be 100% also), and then fix the contents of the left div at XXXpx. Then make either, the right div fixed with the middle div as a % or make both the divs % widths.

    In my own site with a three column layout headed by a full width div, I made the left and rght divs fixed and the middle a % and it's flexible from 800 x 600 to the one above 1024 (can't remember now). They do look different (perhaps comparitively odd) but if you don't compare them (well what user would?), it looks equally OK in all of them - as OK as it is

    By the way, why has your design a max width of 932px?
    Bazz
    Last edited by bazz; 08-25-2005 at 12:32 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The maximum width was 932px because the client wanted it like that, the rest of their site is 932px, and I am only redesigning the homepage. We did advise them against this and then stupidly told them we could do the content at variable width on the right hand side to allow for shrinking down to 800 x 600, and then to resize up to a max width of 932px.

    I really dont see how this can be done, can you?

    Just had a meeting about it. s
    Ta Bazz!

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    If you wish to post the code or pm me I could try to work somthing out but what I am thinking at the mooment (i know, I'm being dangerous again ), is that you could set a div to fit 100% of the screen at 1024. Within that a centered container div of xx%, which would equate to 932px. Then as you reduce the resolution to 800 x 600, the 932px equivalent would reduce proportionately, to fit in the 800x600 screen.

    What I can't tell yet is, how would it look in the 800 viewport at that size. And I haven't calculated what % 932px is of the 1024 resolution.

    Have you considered how much easier it might be to redesign their site?

    Might be worth considering because if you design the homepage in symantic code, then it might just be a case of copying and pasting to apply that new code to all their pages. just a thought. Also, it would give a better value finished product for the client too. Having said that, my cynicism suggests that if they only want you to design the homepage, maybe they are going to apply the code to their other pages themselves?

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <title>Black Tomato</title>
    <script language="javascript">
    ie5 = false;
    if (navigator.appVersion.indexOf("MSIE")!=-1)
    	ie5 = true;
    function reSize() {
    	var x = document.getElementById('containerFixed').style;
    	var y = document.getElementById('homeMainVariable').style;
    	if(document.body.clientWidth>932||window.innerWidth>932){
    		x.width=932+'px';
    		y.width = 539+'px';
    	}else{
    		x.width=(ie5?document.body.clientWidth-4:window.innerWidth-4)+'px';
    		y.width = (ie5?document.body.clientWidth:window.innerWidth)-392-5+'px';
    	}
    	setTimeout("reSize()",10);
    }
    </script>
    <style type="text/css">
    <!--
    body {
     margin:0 2px 0 2px;
     font-size:71%;
     font-family:verdana,arial,helvetica,sans-serif;
    }
    
    #containerFixed {
    	width:932px;
    	height:200px;
    	background-color:black;
    }
    
    #containerVariable {
    	width:100%;
    	height:170px;
    	background-color:red;
    }
    
    .homeLeftFixed {
     float:left;
     width:393px;
     background-color:pink;
    }
    
    #homeMainVariable {
     float:left;
     width: 539px;
     height:100px;
     background-color:yellow;
    }
    
    .homeMainLeftVariable {
     float:left;
     width:50%;
     height: 100px;
     background-color:green;
    }
    
    .homeMainRightVariable {
     float:right;
     width:49.9%;
     height: 100px;
     background-color:blue;
    }
    -->
    </style>
    </head>
    <body onLoad="reSize()">
    
    <div id="containerFixed">
    
    	<div id="containerVariable">
    	
    		<div class="homeLeftFixed">FIXED left hand side</div>
    
    		<!-- START: THIS WHOLE CONTAINER HAS TO BE SHRUNK -->
    		<div id="homeMainVariable"> 
    			<div class="homeMainLeftVariable">Left side Variable</div>
    			<div class="homeMainRightVariable">Right side Variable</div>
    		</div>
    		<!-- END: THIS WHOLE CONTAINER HAS TO BE SHRUNK -->
    
    	</div>	
    
    </div>
    </body>
    </html>
    it involves javascript ... but i dont see any other way out of it

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Maybe this site will help you. Its the basic concept that you are after. If you remove the right column and the right margin from the content you get your layout. http://bonrouge.com/2+2.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    you got a split personality? starting off as mel and then becoming antizip.

    Anyhoo, can you post the code or a link to the real site plz.

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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