Stylesheets - not wrapping

Author

not wrapping

Clint

2004-02-17, 5:29 pm

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>Helloooooooooooo 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> </p>
<p> </p>
<p> </p>
</div>

<div id="mainCenter">
<div class="padV">
<p>heeleloooopkajfdlk 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> </p>
<p> </p>
<p> </p>
</div>
</div>

<div id="mainRight">
<p>riiiggght</p>
<p> </p>
<p> </p>
<p> </p>
</div>

Any thoughts on why this would not work?

Thanks,
Clint

kaeli

2004-02-18, 10:29 am

In article <36d2bb0f.0402171304.5ec529b5@posting.google.com>,
clint@fandangled.com enlightened us with...
> Any thoughts on why this would not work?
>

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