468,483 Members | 2,646 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,483 developers. It's quick & easy.

Wrapped text doesn't properly flow round floated div in IE6

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:#000033;
color:CCCCFF;
font-family: "Tahoma","Arial",Sans Serif;
font-size:0.8em;
}

/*snip*/

/* MAIN LAYOUT STYLES */

#leftcol {
position:absolute;
background-color:transparent;
margin-top: 110px;
left:2%;
width:96%;
}

#spacer {
margin-left: 180px;
padding-left:20px;
background-color: transparent;
}

#midcol{
position:relative;
width:100%;
margin-right:20px;
}

#mainbody{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color:#000066;
}

#maintextsection{
position:relative;
top:0;
left:0;
margin-right:200px;
background-color:#000066;
}

/*snip*/

..imagebox{
float:right;
clear:right;
position:relative;
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:relative;
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,sans-serif;
font-size:20px;
color:#CCCC99;
background-color:#336699;
padding-right:5px;
text-align:right;
}
..QuoteAttribution {
font-family:"Tahoma","Arial",sans-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="QuoteText">"I would trust [PROScenia] to organise anything,
flawlessly"</P>
<P class="QuoteAttribution">George 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>Introduction
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.com layout made with tables and also behaves well with small
window sizes and large fonts.
</P></div>
</div>
</div>
<!--snip-->
</div>
</body>
</html>
Sep 24 '05 #1
4 2653
sweep wrote:

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.
You have a number of validation errors. Correct those to see if the
problem goes away.
<http://validator.w3.org/check?verbose=1&uri=http%3A//staging.proscenia.co.uk/projectmain.html>
And a couple of CSS errors.
Why are you using HTML 4.01 Transitional? Transitional is for *legacy*
pages too crufty to update. Use Strict.
I suggest developing your page(s) in a modern browser like Firefox or
Opera before working around the defects in IE. Saves time.
The relevant code follows, the whole page is at
http://staging.proscenia.co.uk/projectmain.html. NB the stylesheet is still

All that code was a waste of bandwidth. It's the URL that's useful here.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 25 '05 #2
Thanks for that, I have changed over to 4.01 strict (an oversight on my
part) and fixed the validation errors but I am still having the same
problem.

Interestingly it occurs in Opera, Navigator and IE so it seems to be more
than just an IE problem.

Sorry for posting the code, I wasn't sure about etiquette here, some other
programming newsgroups I've been on prefer code snippets, others prefer it
to be a URL. I'll know for next time.

Best
Andrew
"Jim Moe" <jm***************@sohnen-moe.com> wrote in message
news:Ud********************@giganews.com...
sweep wrote:

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.

You have a number of validation errors. Correct those to see if the
problem goes away.
<http://validator.w3.org/check?verbose=1&uri=http%3A//staging.proscenia.co.uk/projectmain.html>
And a couple of CSS errors.
Why are you using HTML 4.01 Transitional? Transitional is for *legacy*
pages too crufty to update. Use Strict.
I suggest developing your page(s) in a modern browser like Firefox or
Opera before working around the defects in IE. Saves time.
The relevant code follows, the whole page is at
http://staging.proscenia.co.uk/projectmain.html. NB the stylesheet is
still

All that code was a waste of bandwidth. It's the URL that's useful here.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Sep 25 '05 #3
On Sat, 24 Sep 2005 21:54:00 +0100, sweep wrote:
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.


You may think that but in my Firefox I get nothing at the top except the
word "PROScenia" and in Opera I get a box that scrolls way out to the
right, and unless I get the mouse pointer pixel perfect on the line beneath
the text nothing happens.

In IE I get broken picture links to pictures that I didn't even suspect
were there in FF and Opera as well as the box that scrolls way out to the
right. But apart from the top box is probably close to what you want it to
look like.
Sep 25 '05 #4
sweep wrote:
Thanks for that, I have changed over to 4.01 strict (an oversight on my
part) and fixed the validation errors but I am still having the same
problem.

I've looked at your code. The ID names are confusing and misleading. I
am not going to spend the large amount of time it would take to unravel
your page.
Visit these sites for well described and debugged 3 column layouts.
<http://www.positioniseverything.net/>
<http://css-discuss.incutio.com/?page=ThreeColumnLayouts>
"A List Apart" is especially interesting for menu options.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 26 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Vincent | last post: by
reply views Thread by Sue Thackston | last post: by
1 post views Thread by Aaron | last post: by
11 posts views Thread by Robert Bowen | last post: by
3 posts views Thread by David Golightly | last post: by
2 posts views Thread by Jason Carlton | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.