Lights Out Posted January 19, 2007 Share Posted January 19, 2007 My text is leaking out of my divs. I have a two-column layout going inside of a div, and the content inside my left column is leaking out over top of my column to the right of it. I can't figure out how to wrap the text inside of my div.XHTML <body><div id="container"> <div id="banner"> <h1>Cosby High School</h1> </div> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Events</a></li> <li><a href="#">Officers</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Links</a></li> </ul> </div> <div id="content"> <div id="events"> <h1>January 22</h1> <p>this text is covering up my meetings div...leaking off to the right side</p> </div> <!-- <div id="clearfix"></div> --> <div id="meetings"> <h1>January 19</h1> <p>this text is leaking out of the right hand side of my meetings div..off of the screen</p> </div> </div> </div> CSS body { font:1em verdana, arial, sans-serif; text-align:center;}* { margin:0; padding:0; }div#container { margin:10px auto; width:600px; border:1px solid gray; text-align:left;}div#banner { width:100%; height:100px; background: #000000 repeat; color:#0099FF;}div#nav { width:100%; float:left; border-top:1px solid #069; border-bottom:1px solid #069; font-size:.8em; background-color:#8BC5DD;}div#nav ul { margin:0 0 0 30px;}div#nav li { float:left; list-style-type:none; padding:0 6px;}div#nav a { text-decoration:none; color:#000000;}div#nav a:hover { color:white;}div#content { font-size: .8em; height:100%; border:1px dotted red; margin:10px;}p { margin:10px; padding:5px;}#events,#meetings { width:250px;}#events { background-color:blue; float:left;}#meetings { background-color:orange; margin-left:270px;} Is there something I can do to make the text wrap? Link to comment Share on other sites More sharing options...
jesh Posted January 19, 2007 Share Posted January 19, 2007 I viewed your code in the TryIt editor in both IE6 and Firefox and I wasn't able to see any problems with text extending out of the divs. It looked fine to me.However, typically, when you use float, you'll have to throw in a clear after the floated content to make the containing element expand in size to fit the content. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now