All,
I've been trying to set up a CSS layout and all seems well in Firefox
but in Safari it just seems to be plain weird! I hope someone can help
tell me whether this is a problem with my code or a Safari oddity
(which if it is, any top-tips to fix it would be most welcome!).
Objective:
I want to have the meat of the viewport divided into 3 columns (a fixed
margin (say 140px) and 2 scalable panes on the right each of which
consume 50% of the remaining space). I want each of the right hand
panes to present scroll bars when the content (an image) is wider than
the space available thus keeping the left margin (menu) on screen.
Issue:
This works like a charm in Firefox 1.5. The 2 panes are alongside each
other in the riight place on the screen and when I resize the browser
window smaller scroll bars appear below each of the right hand panes.
When I open the same file in Safari 2.0.1, the righthand most pane
appears at only 25% of the space available leaving an odd gap of 25%.
I've tried altering the overflow and float properties but I just can't
get the effect I'm after in Safari.
Code:
Here is the entire page including style info
<html>
<head>
<title>Layout test</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
margin:0 0 0 0;
height:100%;
width:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
..masthead {
background-color: #FFFF00;
border:0 0 0 0;
text-align: right;
font-weight: normal;
font-size: 10px;
height:20px;
top:0;
padding-right: 10px;
padding-left: 10px;
}
/* the main content layer which contains the left and right blocks */
#main {
position: inherit;
background:#fff;
margin-left: 140px;
border:1px solid #000;
margin-bottom: 10px;
height:auto;
z-index:1;
bottom:0;
float:none;
}
/* left block */
#areaA {
width: 49.9%;
overflow: auto;
float:left;
}
/* right block */
#areaB {
left:50%;
width: 49.9%;
overflow:auto;
float:left;
}
#footer {
background-color: #FFFF00;
text-align: center;
font-weight: normal;
font-size: 10px;
height:3em;
position:auto;
width:100%;
float:left;
}
/* Formatting stuff */
#dilTitle {
font-size: 12px;
font-weight: bold;
}
#dilDesc {
font-size: 10px;
}
#dilImage {
text-align: center;
}
-->
</style>
</head>
<body>
<div class="masthead">Usu maiorum</div>
<!-- Main content layer -->
<div id="main">
<p id="dilTitle">Iuvaret consulatu et cum? Te dictas disputationi
cum</p>
<p id="dilDesc">Ex nihil expetenda percipitur sit, eos in wisi consul,
qualisque persecuti duo ea. Cum at primis regione, epicurei officiis
percipitur no usu, te pro mazim rationibus neglegentur. Ex mandamus
imperdiet sed, est ex soleat quodsi legimus. No est error constituam,
vim ad consul liberavisse, ex sed aperiam feugiat. </p>
<!--- left block --->
<div id="areaA">
<p id="dilTitle">Lorem Ipsum </p>
<p id="dilImage"><img src="blackbike.jpg" width="380" height="320"></p>
<p id="dilDesc">In alterum forensibus accommodare quo, has ut nonumy
quodsi mediocrem, quis utroque intellegebat ne quo. Ius debitis
invenire te, has maiorum partiendo voluptatum te? Mel aliquid veritus
id.</p>
</div>
<!--- right block --->
<div id="areaB">
<p id="dilTitle">Dolor sit</p>
<p id="dilImage"><img src="redbike.jpg" width="380" height="320"></p>
<p id="dilDesc">In alterum forensibus accommodare quo, has ut nonumy
quodsi mediocrem, quis utroque intellegebat ne quo. Ius debitis
invenire te, has maiorum partiendo voluptatum te? Mel aliquid veritus
id.</p>
</div>
<div id="footer">In alterum forensibus accommodare quo, has ut nonumy
quodsi mediocrem, quis utroque intellegebat ne quo. Ius debitis
invenire te, has maiorum partiendo voluptatum te? Mel aliquid veritus
id.</div>
</div>
</body>
</html>
This content is also posted here:
http://63.151.40.186/csstest/test01.htm
Any help would be greatly appreciated.
Thanks,
James
