not wrapping

[Clint]

I am using a 3 column layout, but for some reason I can't get the
center column content to wrap in IE6 to the next line.

Here's the code.
//CSS//

#mainLeft {
position: absolute;
left: 0px;
margin-top: 0px;
padding: 0px;
border-right: 1px solid #888;
width: 200px;
height: 100%;
}

#mainCenter {
position: absolute;
height: 100%;
margin-left:201px;
margin-right:151px;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:199px;
margin-right:149px;
}

html>body #mainCenter {
margin-left:199px;
margin-right:149px;
}

#mainRight {
position: absolute;
right: 0px;
padding: 5px;
border-left: 1px solid #888;
width: 150px;
height: 100%;
}


//HTML//
<div id="mainLeft">
<p>Helloooooooo oooo pkajfdlk sdkljf lksdj flksdj fklsdj flksdj flkjsd
flkjsd lfkj sdlkfj sldkfj sdlkjf lsdkj flsdkj flksdj flksdj lfkj
sdlkfj sdlkjf lsdkjf klsdj flksdj fklsdj flkjs dlfkj sldkj flsdkj </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="mainCenter" >
<div class="padV">
<p>heeleloooopk ajfdlk sdkljf lksdj flksdj fklsdj flksdj flkjsd flkjsd
lfkj sdlkfj sldkfj sdlkjf lsdkj flsdkj flksdj flksdj lfkj sdlkfj
sdlkjf lsdkjf klsdj flksdj fklsdj flkjs dlfkj sldkj flsdkj </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>

<div id="mainRight" >
<p>riiiggght</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>


Any thoughts on why this would not work?

Thanks,
Clint

[kaeli]

Re: not wrapping

In article <36d2bb0f.04021 71304.5ec529b5@ posting.google. com>,
clint@fandangle d.com enlightened us with...[color=blue]
> Any thoughts on why this would not work?
>[/color]

Well, when I gave the middle section a width, it followed it. You're
specifying pixels, which is not a Good Idea (people need to resize
fonts, etc), so it's best to use percents, but your margins and
everything are in pixels, so I just stuck a 400px in there to check it
out. That is,
#mainCenter {
position: absolute;
height: 100%;
margin-left:201px;
margin-right:151px;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:199px;
margin-right:149px;
width: 400px;
}


When you give things absolute positioning, they'll overlap if they need
to. Specifying a width that purposefully didn't overlap fixed it, but
only if my screen was maximized. This is why everything should be
percents. If I resize my screen to a small size, everything starts to
overlap again.

Solution: use percents, not pixels. Or, use relative positioning.

--
--
~kaeli~
Punctuation, capitalization, and grammar are your friends,
and will help people think that you aren't such an ignorant
moron, after all.

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace