4 div layout.. help needed

**antonyx** · Aug 21, 2007 15:51

hello all.. i have been using the same div layout for over a year.. it was a centred div 750px wide.

i want to move to a more dynamic layout that uses the technology to its fullest and expands when the space is available..

i have attached a picture of what im looking for:

http://www.londonheathrowcars.com/div_layout.jpg

the reason i want to create this is because the layout i was using before was too dependant on pixel size.. etc

you can see my site here..

http://www.londonheathrowcars.com

it is completely different from what i need.. the truth is i dont have as much time as i would like to code this from scratch..

if someone could give me a quickfix layout based on that picture, it would really save me a lot of time.. i am fairly profficient, url examples of those kind of layouts will also be of interest..

thanks.

**markbrown4** · Aug 21, 2007 16:17

it is completely different from what i need.. the truth is i dont have as much time as i would like to code this from scratch..

if someone could give me a quickfix layout based on that picture, it would really save me a lot of time.. i am fairly profficient, url examples of those kind of layouts will also be of interest..

Hmmm, there's a difference between asking a question and asking someone to work for you for free.

But it seems Paul has already done the work

http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
http://www.pmob.co.uk/temp/fixedlayoutexample3.htm
http://www.pmob.co.uk/temp/fixedlayoutexample4.htm

I like Paul's work a lot - but I don't like the layout itself - it's a little too unorthodox..

**antonyx** · Aug 22, 2007 04:02

hello... thank you for the links mark. they are very helpful.

i thought i would at least be honest..

if you look here.. the top bar is white.. (with my logo) and the left bar is black.
http://www.londonheathrowcars.com/thisting.htm

what i would prefer is if the left bar starts from the top..

ive tried to do it myself.. by removing the padding from the top.. and a few other things but nothing seems to work.. i think it is because the actual foundations of the layout are too advanced for me..

if i can get this left bar how i want, i should be able to edit the sizes.. etc to my liking..

here is the page code... your time is very appreciated.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- force quirks mode with the xml prologue -->
<style type="text/css">
/* commented backslash hack v2 \*/ 
html, body{height:100&#37;} 
/* end hack */ 
html,body {margin:0;padding:0;background:#000}
#top-bar {
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	width:100%;
	height:90px;	
}
* html #top-bar {
	position:absolute;
}
#topbar-inner {
	height:90px;
	background:#fff;
	
}
* html #topbar-inner {	margin-right:17px;/* for scrollbar*/}
* html body{
	padding-top:23px;
}
* html, * html body{
	overflow-y: hidden; 
	height:100%;
	margin-top:-23px;
}
#mainouter {
	position:relative;
	z-index:2;
	padding-top:23px;
	padding-bottom:40px;
	margin-left:150px;
	background:pink;
	min-height:100%;
}


* html #mainouter {
	height:100%;
	overflow:auto;
	overflow-y:scroll;
	position:relative;
	z-index:2;
	padding-top:23px;
	padding-bottom:40px;
}

#bottom {
	position:fixed;
	bottom:0;
	left:0;
	z-index:999;
	width:100%;
	height:40px;	
}
* html #bottom {
	position:absolute;
	bottom:-1px;
}
#bottom-inner {
	height:40px;
	background:#666666;
}
* html #bottom-inner {	margin-right:17px;/* for scrollbar*/}


* html #left {
  position:absolute;
  height:100%;
  width: 150px;
  border-right: 1px solid #000;
  left:0;
  top:90px;
  overflow:auto;
  z-index:100;
  margin-bottom:-63px;
  }
html>body #left {
  position: fixed;
  left: 0;
  top: 90px;
  bottom: 40px;
  padding: 0;
  width: 149px;
  border-right: 1px solid #000;
 }



</style>
</head>
<body>
<div id="top-bar"> 
  <div id="topbar-inner"><img style="margin-left:149px;" src="newlogo.gif" /></div>
</div>
<div id="left"> 
  <ul>

    <li>fixed menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>

    <li>menu</li>
    <li>menu</li>
  </ul>

</div>
<div id="mainouter"> 
  <p>Content start</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>

  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content end</p>

</div>
<div id="bottom"> 
  <div id="bottom-inner">Fixed Bottom</div>
</div>
</body>
</html>

**all4nerds** · Aug 22, 2007 04:16

Hello

The models you use are slightly outdated , using quirks mode for IE < 7, I think Paul has a few that use a strict DTD only

**antonyx** · Aug 22, 2007 04:18

ok....

what do you suggest i do? are there any websites that offer the latest models.. and in particular, the layout i am looking for??

**all4nerds** · Aug 22, 2007 04:48

Hello

look under
New versions for standards mode:
http://www.pmob.co.uk/temp/

or this is the most advanced i think , Paul has them also but I can't find them

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100&#37; high element</title>
<style type="text/css">
* {margin:0;padding:0}

body{height:100%;font-size:75%;background:#a2a2a2;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
}

div{font-size:1em;}

html{padding:1em 2em;}

.c,.d,.a,.he,.fo{overflow:auto;}

.wra{background:#d8d8d8;}

head+body .wra{top:11em;bottom:11em;position:absolute;}

.he,.fo{background:#ff8c00;height:10em;position:absolute;}

.wra,.he,.fo{right:2em;left:2em;}

* html .a,* html .b,* html .d{height:100%;}
* html .a,* html .b{float:left;}
* html .a{width:20em;}
* html .a{background:#ccffcc;}
* html .b{width:100%;margin:0 -21em 0 1em;}
* html .c{float:right;background:#ccffff;}
* html .d{margin:0 21em 0 0;background:#ffffcc;}

head+body .a,head+body .b,head+body .c,head+body .d{position:absolute;top:0;bottom:0;}
head+body .a{width:20em;}
head+body .a,head+body .d{left:0;}
head+body .c,head+body .d{right:0;}
head+body .a{background:#ccffcc;}
head+body .b{left:21em;right:0em;}
head+body .d{background:#ffffcc;}

.he{top:1em;}

.fo{bottom:1em;}

p{margin:.2em .5em .3em .5em;}
</style>
<!--[if IE ]>
<style type="text/css">

* html {padding:11em 2em;} 

* html body{padding:11em 2em;padd\ing:0}

* html .wra{height:100%;}

* html .w{width:100%;}

</style>
<![endif]-->
</head>
<body>
<!--  -->
<div class="he w">

<p>start</p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>end</p>
</div>

<div class="wra">

<div class="a">
<p>start a</p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<!-- 
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
 -->
<p>end</p>
</div>

<div class="b">
<div class="d">
<p>start b</p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>end</p>
</div>
</div>

</div>

<div class="fo w">
<p>start</p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>Test Text </p>
<p>end</p>
</div>
</body>
</html>

**antonyx** · Aug 22, 2007 06:45

hello again.. i think i have found a layout i want to settle with

it is here..

http://www.londonheathrowcars.com/thisting.htm

i would still like the footer, header and menu to be unmoving.. and the main content div to have the overflow auto feature.

another issue i had was when i tried changing the background colour of the left div.. but the left and main content div seem to be connected.. and when i changed one colour it changed them both, i would rather they stay separate.

i know it is a lot to ask, but if anyone has the time or the motivation to help me out here, i will certainly owe them something back.

here is the page code.. thanks again for any help if it comes

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>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* mac hide\*/
html, body {height:100&#37;}
/* end hide */
body {
	padding:0;
	margin:0;
	text-align:center;
	min-width:752px;/* for mozilla*/
	background-color: #a3a3a3;
	color: #000000;
}
#outer{
	min-height:100%;
	width:750px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	color: #000000;
	text-align:left;
	margin:auto;
	position:relative;
	background-color:#fff;
}
 
* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
#header{
	min-height:70px;
	background:#FF0000;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	position:relative;
}
* html #header{height:70px}
#left {
	position:relative;/*ie needs this to show float */
	width:156px;
	float:left;
	color:#fff

}
#left p {padding:2px}
#footer {
	width:750px;
	clear:both;
	height:70px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	background-color: #565656;
	color: #000000;
	text-align:center;
	left:0;
	bottom:0;
	position: absolute;
}
* html #footer {/*only ie gets this style*/
	\height:72px;/* for ie5 */
	he\ight:70px;/* for ie6 */
	margin-bottom:-1px;
}
div,p  {margin-top:0}/*clear top margin for mozilla*/
#centrecontent {
	width:594px;
	float:right;
}
#centrecontent p {padding-left:3px}

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
</style>
</head>
<body>
<div id="outer"> 
  <div id="header"> 
<img src="newlogo.gif" />  </div>
  <div id="centrecontent"> 
    
  <table border="0" width="594" id="table2" cellspacing="0" cellpadding="0">
	<tr>
		<td>gsgsagasgsdgasg<p>sgs</p>
		<p>dgas</p>
		<p>dgag</p>
		<p>s</td>
	</tr>
	</table>
	<p> 
    
  </div>
  <div id="left"> 
	<table border="1" width="100%" id="table1" bordercolordark="#565656" cellspacing="0" cellpadding="0" bordercolorlight="#565656">
		<tr>
			<td><font color="#A3A3A3">Our Services</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Our Cars</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Our Prices</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Enquiries</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Book Online</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Faqs</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Travel Guide</font></td>
		</tr>
		<tr>
			<td><font color="#A3A3A3">Contact</font></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><font color="#00FF00">UK Freephone:</font></td>
		</tr>
		<tr>
			<td><font color="#00FF00">0800 505 3231</font></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td><font color="#00FF00">International:</font></td>
		</tr>
		<tr>
			<td><font color="#00FF00">+44 (0) 20 8814 2727</font></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
  </div>
  <div id="clearfooter"></div>
  <!-- ie needs this -->

  <div id="footer">Footer - | |- Footer </div>
</div>
<!-- end outer div -->
</body>
</html>

User Tag List

Thread: 4 div layout.. help needed

Thread Tools

Display

4 div layout.. help needed

Bookmarks

Bookmarks

Posting Permissions