By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

not wrapping

P: n/a
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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>&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
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
In article <36**************************@posting.google.com >,
cl***@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

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.