SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)

    Help with a layout problem in IE and Webkit

    Firefox has this right, and I have no idea what I can do to fix IE 9 and webkit without breaking Firefox

    Code html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<style type="text/css">
    		.masterContentFrame {
    			margin: 6em 1%;
    			padding-left: 240px;
    		}	
     
    		.masterContentFrame .centerColumn {
    			position: relative;
    			float: left;
    			background: #0f0;
    			height: 500px;
    			width: 100%;	
    		}
     
    		.masterContentFrame .leftColumn {
    			position: relative;
    			float: left;
    			background: #f00;
    			height: 1000px;
    			width: 240px;
    			right: 240px;
    			margin-left: -100%;
    		}
     
    		.masterContentFrame .rightColumn {
    			position: relative;
    			float: left;
     
    			color: #fff;
    			background: #00f;
    			height: 400px;
    			width: 100%;
    			/*	right: 240px;
    			margin-left: 1px;*/
    		}
     
    		.footer { clear: both; }
    	</style>
    </head>
    <body>
    	<div class="header"></div>
    		<div class="masterContentFrame">
    			<div class="centerColumn">Lorem ipsum</div>
    			<div class="leftColumn">Lorem ipsum</div>
    			<div class="rightColumn">Lorem ipsum</div>
    		</div>
    	<div class="footer"></div>
    </body>
    </html>

    I cannot change the DOM. I have 2 working layouts against it using media queries.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I don't really like either of these, but food for thought, anyhow:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<style type="text/css">
    		.masterContentFrame {
    			margin: 6em 1%;
    			padding-left: 240px;
    		}	
     
    		.masterContentFrame .centerColumn {
    			position: relative;
    			/* float: left; */
    			background: #0f0;
    			height: 500px;
    			width: 100%;	
    		}
     
    		.masterContentFrame .leftColumn {
    			position: relative;
    			float: left;
    			background: #f00;
    			height: 1000px;
    			width: 240px;
    			/* right: 240px; */
    			margin-left: -240px;
    			margin-top: -500px;
    		}
     
    		.masterContentFrame .rightColumn {
    			position: relative;
    			float: left;
    			color: #fff;
    			background: #00f;
    			height: 400px;
    			width: 100%;
    			/*	right: 240px;
    			margin-left: 1px;*/
    		}
     
    		.footer { clear: both; width: 100%; height: 80px; background: orange;}
    	</style>
    </head>
    <body>
    	<div class="header"></div>
    		<div class="masterContentFrame">
    			<div class="centerColumn">Lorem ipsum</div>
    			<div class="leftColumn">Lorem ipsum</div>
    			<div class="rightColumn">Lorem ipsum</div>
    		</div>
    	<div class="footer"></div>
    </body>
    </html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<style type="text/css">
    		.masterContentFrame {
    			margin: 6em 1% 6em 240px;
    			position: relative;
    		}	
     
    		.masterContentFrame .centerColumn {
    			background: #0f0;
    			height: 500px;
    			width: 100%;	
    		}
     
    		.masterContentFrame .leftColumn {
    			position: absolute;
    			float: left;
    			background: #f00;
    			height: 1000px;
    			width: 240px;
    			left: -240px;
    			top: 0;
    		}
     
    		.masterContentFrame .rightColumn {
    			color: #fff;
    			background: #00f;
    			height: 400px;
    			width: 100%;
    		}
     
    		.footer { clear: both; width: 100%; height: 80px; background: orange;}
    	</style>
    </head>
    <body>
    	<div class="header"></div>
    		<div class="masterContentFrame">
    			<div class="centerColumn">Lorem ipsum</div>
    			<div class="leftColumn">Lorem ipsum</div>
    			<div class="rightColumn">Lorem ipsum</div>
    		</div>
    	<div class="footer"></div>
    </body>
    </html>

  3. #3
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)
    Well, the first solution is dependent on the height of the left column being fixed, which it will not be. The second solution is dependent on the center two columns being taller than the left, which is also not guaranteed. But thanks for trying. (Note - the heights given in the original example are for testing. In production height should be set to 'auto.'

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,615
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Maybe this then?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<style type="text/css">
    		.masterContentFrame {
    			margin: 6em 1%;
    			position: relative;
    		}	
     
    		.centerColumn {
    			background: #0f0;	
    		}
     
    		.leftColumn {
    			position: absolute;
    			background: #f00;
    			width: 240px;
    			top: 0;
    		}
     
    		.rightColumn {
    			color: #fff;
    			background: #00f;
    		}
    		
    		.centerColumn, .rightColumn {margin-left: 240px;}
     
    		.footer { clear: both; width: 100%; height: 80px; background: orange;}
    	</style>
    </head>
    <body>
    	<div class="header"></div>
    	<div class="masterContentFrame">
    		<div class="centerColumn">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
    		<div class="leftColumn">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
    		<div class="rightColumn">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div>
    	</div>
    	<div class="footer"></div>
    </body>
    </html>

  5. #5
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,011
    Mentioned
    57 Post(s)
    Tagged
    0 Thread(s)
    Thanks for looking into this. I finally fixed it through a different route primarily because I was asked to change how the layout behaves on a smaller resolution set. I ended up with the left two columns being fixed with the rightmost alone being flex, which is much, much easier to work with.


Bookmarks

Posting Permissions

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