Jump to content


Lights Out

Recommended Posts

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>


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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...