Hi there,
I have a problem with some CSS I'm writing and I was looking for a little
help. I have a nav bar at the top and left side of my page in CSS which work
fine. The remaining space has a div which I'm using for body text. Floated
to the right of this are two image boxes and a broken out quotation from the
page (this box is wider than the images). The layout is working, except that
the text in the main section doesn't seem to wrap properly around the wider
quotation box.
The line on level with the top of the box carries on under the box and the
line below the box wraps to the left-edge. I have been fiddling with the
margins etc for ages and I just can't see why this is. Also for some reason
I can't get the text within that box to change height. Font yes but height
no. I'm using IE 6 on Windows XP.
The relevant code follows, the whole page is at
http://staging.proscenia.co.uk/projectmain.html. NB the stylesheet is still
in the document for development purposes but will ultimately be separated
out.
Any advice would be much appreciated.
Best Regards,
Andrew Coulton
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- snip-->
<style type="text/css">
<!--
/* GENERAL STYLES */
body {
margin: 9px 9px 0 9px;
text-align:justify;
padding:0;
background:#000 033;
color:CCCCFF;
font-family: "Tahoma","Arial ",Sans Serif;
font-size:0.8em;
}
/*snip*/
/* MAIN LAYOUT STYLES */
#leftcol {
position:absolu te;
background-color:transpare nt;
margin-top: 110px;
left:2%;
width:96%;
}
#spacer {
margin-left: 180px;
padding-left:20px;
background-color: transparent;
}
#midcol{
position:relati ve;
width:100%;
margin-right:20px;
}
#mainbody{
position:absolu te;
width:100%;
height:100%;
left:0;
top:0;
background-color:#000066;
}
#maintextsectio n{
position:relati ve;
top:0;
left:0;
margin-right:200px;
background-color:#000066;
}
/*snip*/
..imagebox{
float:right;
clear:right;
position:relati ve;
height:auto;
width:auto;
text-align:center;
padding:10px;
margin-left:15px;
background-color:#336699;
border-left:5px solid #000033;
font-size:.8em;
color:#000033;
}
..quotebox{
float:right;
clear:right;
position:relati ve;
width:auto;
min-width:200px;
height:auto;
background-color:#000033;
margin-left:5px;
font-size:1em;
padding:5px 10% 5px 5px;
}
/*snip*/
..QuoteText {
font-family:"Arial Black",Arial,sa ns-serif;
font-size:20px;
color:#CCCC99;
background-color:#336699;
padding-right:5px;
text-align:right;
}
..QuoteAttribut ion {
font-family:"Tahoma" ,"Arial",san s-serif;
font-size:.8em;
color:#000033;
background-color:#336699;
text-align:right;
padding-right:5px;
}
-->
</style>
</head>
<body>
<!--snip-->
<div id="leftcol">
<div id="spacer">
<div id="midcol">
<div id="mainbody">
<div class="imagebox " style="border-bottom:0;">
<img src="C:/Documents and Settings/Andrew/My
Documents/PROScenia/Project Photos/PP02 Romeo/Smaller/Capulet's Ball.jpg"
width=250px; border="0" >
<P>pic:Keith Brame</P>
</div>
<div class="quotebox ">
<P class="QuoteTex t">"I would trust [PROScenia] to organise anything,
flawlessly"</P>
<P class="QuoteAtt ribution">Georg e Tarbuck, Lighting Designer</P>
</div>
<div class="imagebox ">
<img src="C:/Documents and Settings/Andrew/My
Documents/PROScenia/Project Photos/PP02 Romeo/Smaller/Romeo finds
Juliet.jpg" width=250px; border="0" >
<P>pic:Keith Brame</P>
</div>
<P>The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS
and lots of iterations.
Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled
home page. Months in the making, the final design successfully duplicates
WebRef's layout without the use of tables. Numerous bugs were discovered in
Netscape and Explorer in how they handle CSS, and we found some elegant
workarounds to these and other problems. What follows is a step by step CSS
layout tutorial that shows how we got to the final design.now lets see what
happens when we keep typing all this text where can it go and what will
happen to it as the rest of the objects move? nothing yet, lets hope that
soon there will be a point when I have typed enough to get a wrap nearly
there one or two more lines should answer the question.</P>
<P>Introducti on
In Evolution of a Home Page Andy King threw down the gauntlet, challenging
readers to duplicate WebRef's tabled (and fabled) home page in CSS. Kwon
Ekstrom came up with a solution, that worked in a number of browsers. After
investigating his solution, I found a few problems with his design, and
thought I'd try and improve on it. </P>
Andy, Kwon, and I went back and forth over a number of months tweaking and
improving my design. What follows is a step-by-step account of my attempt to
duplicate WebRef's table-like layout using CSS, while avoiding some of the
bugs and problems found in other implementations .
The ultimate goal is to create a CSS layout that exactly resembles the
WebReference.co m layout made with tables and also behaves well with small
window sizes and large fonts.
</P></div>
</div>
</div>
<!--snip-->
</div>
</body>
</html>
