Hello,
I found a two column fixed all CSS layout at:
This template works fine as is, but I want to make one seemingly simple change, I want to increase the overall width to 775. However when I do this, the #cont div always appears pushed down i.e. not even with the #l-col div. (It's very clear when viewed in a browser what I am takling about :-0 )I will post my stylesheet and HTML below... what can be done to make this work? THANKS!
STYLESHEET: (styles/2c-hd-ft-fixed-layout.css)
HTML:
I found a two column fixed all CSS layout at:
This template works fine as is, but I want to make one seemingly simple change, I want to increase the overall width to 775. However when I do this, the #cont div always appears pushed down i.e. not even with the #l-col div. (It's very clear when viewed in a browser what I am takling about :-0 )I will post my stylesheet and HTML below... what can be done to make this work? THANKS!
STYLESHEET: (styles/2c-hd-ft-fixed-layout.css)
Code:
/* Layout Stylesheet */
body {
margin:20px;
background:#808080;
color: #333333;
text-align:center;
padding:0;
}
#outer {
text-align:left;
/* border:1px solid #000000; */
width:775px;
/* height:71px; */
margin:auto;
background-color: #e0e0e0;
padding: 0px;
border: 1px solid #ffffff;
}
#hdr {
height:71px;
background:#eeeeee;
color: #333333;
border-width: 0px;
padding: 0px;
}
#bar {
height:25px;
background:#c0c0c0;
color: #333333;
/* border:solid #000000; */
border-width:0px 0 1px 0;
}
#bodyblock {
position:relative;
background: #dcdcdc;
color: #333333;
width:775px;
padding:0;
}
#l-col {
float:left;
background:#dcdcdc;
color: #333333;
width:134px;
}
#cont {
float:right;
width:641px;
background:#ffffff;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>CSS Template - Two Column Fixed Width with Header &
Footer</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" /><!--
Web Site: [URL unfurl="true"]www.ssi-developer.net[/URL]
Comments: Copyright 2003 [URL unfurl="true"]www.ssi-developer.net[/URL]
Licence: Creative Commons - Non-commercial Share-Alike
-->
<link rel="stylesheet" type="text/css"
href="styles/2c-hd-ft-fixed-layout.css" />
<link rel="stylesheet" type="text/css"
href="styles/2c-hd-ft-fixed-presentation.css" />
</head>
<body>
<div id="outer">
<div id="hdr" align="center"><a
href="[URL unfurl="true"]http://www.ssi-developer.net/"[/URL]
title="Go to main page."><img src="logo.gif" alt="" border="0"
width="230" height="50" /></a></div>
<div id="bar"> <span style="padding:5px;font-size:11px;">30 Dec
02</span></div>
<div id="bodyblock" align="right">
<div id="l-col" align="center">
<h4 align="center">Menu</h4>
<a href="#">Link</a><br />
<a href="#">Link</a><br />
<a href="#">Link</a><br />
<a href="#">Link</a><br />
<br />
<a href="[URL unfurl="true"]http://www.ssi-developer.net/main/templates/">View[/URL] more
templates.</a></div>
<div id="cont">
<h3 align="center">Two Column Fixed Width with Header &
Footer</h3>
<div align="center" style="color: red;">Ver 2.3</div>
<p>This template is actually a replica of one of my other
websites which uses tables for the very same layout. I wanted to
see could it be done and it seems to work perfect.</p>
<p>This is basically set up as follows: there is a main outer div
which centers the page and is a fixed width. There are 4 main
div's within this outer div; header (#hdr), bar (#bar), body
(#body) and footer (#ftr). The body div holds 2 more divs, the
left div which is for navigation and the right div which is for
our content.</p>
<p>One drawback we see immediatly is getting equal heights for
the left navigation div and right content div. The work around I
use for this is: whichever is likely to be the shortest (in
height) div, probably the left navigation div, set the background
of the #body div the same as this, also the border separating the
two divs - that should be on the right content div.</p>
<p>Another problem discovered recently was that when you use the
float property it can cause the floated divs to "jump out" of
their container block. The workaround I found for this was simply
to specify a height for the container div.</p>
<p>This template has been tested in:</p>
<ul style="margin: 2px 20px; padding: 2px 20px;">
<li>Mozilla 1.5b & Firebird 0.6.1</li>
<li>Internet Explorer 6</li>
<li>Netscape 7.1</li>
<li>Opera 7.11</li>
</ul>
<p>Changes in this version:</p>
<!-- list styles set to fix opera problem -->
<ol style="margin: 2px 20px; padding: 2px 20px;">
<li>removed box hack</li>
<li>added margin:auto; to #outer div for centering.</li>
<li>big problem in moz/ns was the bodyblock div,with both the
left col and content col floated they were "lifted" out of the
bodyblock with then collapsed. IE and Opera were ok. removed
float left from content div, added align="right" to the html of
the bodyblock and then text-align:left; to the content div to
bring the content back. it's ugly but works. using
text-align:right; instead of align="right" will not work in
moz/ns</li>
</ol>
<br />
<p style="font-weight: bold;">Filler Content</p>
<p lang="ga">Dáig alta in mac sin i tig a athar & a mathar
icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi
i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab
rígi in rí, .i. mar atraig fóchetóir césta & cangni in
choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian
de fóchetóir ic fegad na maccaem ic imbirt chless cluchi &
immanae, in trian tanaise dond ló ic imbirt brandub &
fidchell, & in trian dedenach ic tochathim bíd & lenna,
con-dageib cotlud for cách, aes cíuil & airfitid dia thalgud
fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar
Fergus, na fuil in hErind no i n-Albain óclach macsamla
Conchobair.</p>
<p lang="ga">Ocus adfeta don mac sin scéla na maceáem & na
maccraide i n-Emain, & radis in mac bec ria mathair ar co
n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a
meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett
no choimthecht ecin do chaimthechtaib Conchobair, do chor th'
aesma & t'imdegla for in maccraid. Cían lim-sa di sodain a
mathair, ar in mac bec, & ni biu-sa oca idnaide acht
tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a
mathair, airm in-das-fil. Sliab Fúait etrut & Emain. Dobér-sa
ardmes furri amne, ar esium.</p>
<br />
</div>
</div>
<div id="ftr" align="center">Copyright (c) You 2003</div>
</div>
</body>
</html>