This problem I'm having has me stumped. What is happening is I have [the makings of] a three column layout for a clan web portal and text in the left/right columns spills out of the side if the line is long enough. I can't figure out why it isn't wrapping inside the box.
The problem happens in Firefox 2, 3, IE 7, and Opera 9.27, so I know it isn't a simple browser quirk.
Here is a picture to help visualize.
HTML:
CSS:
The problem happens in Firefox 2, 3, IE 7, and Opera 9.27, so I know it isn't a simple browser quirk.
Here is a picture to help visualize.
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Home - Constant Mayhem Society</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" /> </head> <body> <div id="container"> <img id="header" src="../img/banner.jpg" alt="" /> <div id="contentContainer"> <div id="leftModules"> <div class="module"> <div class="moduleTop"></div> <div class="moduleMiddle"> <div class="moduleTopMiddle"></div> <div class="moduleContent"> <p> sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> </p> </div> </div> <div class="moduleBottom"></div> </div> </div> <div id="rightModules"> <div class="module"> <div class="moduleTop"></div> <div class="moduleMiddle"> <div class="moduleTopMiddle"></div> <div class="moduleContent"> <p> sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> sdfsdfsdfsdfsdfsdf<br /> </p> </div> </div> <div class="moduleBottom"></div> </div> </div> </div> </div> </body> </html>
Code:
* {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
body {background-image:url('../img/bg.gif'); background-color:#171717; background-repeat:repeat;}
p,ul,li,h1,h2,h3,h4{font-family: arial, "lucida console", sans-serif; color:#fff;}
#container {margin:10px auto 10px auto;width:805px; vertical-align:top;}
#contentContainer {display:block; width:805px;}
#leftModules{float:left; width:132px;}
#rightModules{float:right; width:132px;}
.module {background:#000;width:132px;}
.moduleTop {background-image:url('../img/mod_top.gif'); background-repeat:no-repeat; width:132px;height:10px;}
.moduleTopMiddle{position:absolute;top:0px;background:url('../img/mod_tmid.gif') no-repeat;height:90px; width:132px;}
.moduleMiddle{width:132px;position:relative;}
.moduleContent{background-image:url('../img/mod_mid.gif');display:block;background-repeat:repeat-y;width:132px;}
.module p,ul,li,h1,h2,h3,h4 {text-indent:5px;padding:5px 15px 5px 15px;font-size:12px;line-height:13px;}
.moduleBottom{background:url('../img/mod_bottom.gif') no-repeat; width:132px;height:24px;}
Comment