Div text going outside of parent containter

I have some divs containing text and the text in the innermost div is extending out past the boundary of where the parent div is. How do I fix this?


<div id="main">
<div id="main-content">
		<div class="ColContainer">
			<div class="ContContainerHeader">text
			</div>
			<div class="ContContainer">text
			</div>
		</div>
		<div class="ColContainer">
			<div class="ContContainerHeader">text
			</div>
			<div class="ContContainer">text
			</div>
		</div>
		<div class="ColContainer">
			<div class="ContContainerHeader">text
			</div>
			<div class="ContContainer">text
			</div>
		</div>
	</div>
</div>

What does the CSS look like that goes with this?

Or even better - do you have the page online?

BTW - that’s HTML, not PHP.

Yes, as Thelma said, this will be a CSS issue, so post your style sheet if you can.

Well I’m not sure if I can post URLs in here but I will post my stylesheet and then the URL just for reference.

If the doc can use improvement, dont be afraid to yell at me. Going to own up and admit I’m a noob at using CSS. :slight_smile:


BODY
{
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	PADDING-TOP: 0px
	MARGIN: 0px;
}
#container
{
	MARGIN-LEFT: 7.5%;
	MARGIN-RIGHT: 7.5%;
}
#header
{
	BACKGROUND: #0f0;
	WIDTH: 100%;
	HEIGHT: 12.5%;
	FLOAT: right;
	margin: 0px 0px 10px 0px;
}
#header-content
{
	padding: 10px 10px 10px 10px;
}
#menu
{
	BACKGROUND: #2175bc;
	FLOAT: right;
	WIDTH: 100%;
	margin: 0px 0px 10px 0px;
}
#leftcol
{

	BACKGROUND: #f00;
	FLOAT: left;
	WIDTH: 10%;
	HEIGHT: 1000px
}
#column
{
	float: left;
}
#main
{
	BACKGROUND: #cccccc;
	FLOAT: right;
	WIDTH: 100%;
	HEIGHT: 72.5%;
	margin: 0px 0px 10px 0px;
}
#main-content
{
	BACKGROUND: #cccccc;
	padding: 10px 10px 10px 10px;
}
#personal
{
	BACKGROUND: #333;
	WIDTH: 100%;
}
#personal-content
{
}
#bio
{
	BACKGROUND: #333;
	WIDTH: 100%;
}
#bio-content
{
}
#footer
{
	CLEAR: both;
	BACKGROUND: #0f0;
	WIDTH: 100%;
	HEIGHT:2.5%;
	margin: 10px 0px 10px 0px;
}
#footer-content
{
	padding: 10px 10px 10px 10px;
}
#navigation
{
	background-color: #2175bc;
	color: #333;
}
#navigation ul
{
	margin-left: 0;
	padding-left: 0;
	float:left;
	display: inline;
}
#navigation ul li
{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
	display: inline;
}
#navigation ul li.first
{
	margin-left: 0;
	border-left: 0;
	list-style: none;
	display: inline;
}
#navigation li a
{
	display: inline;
	padding: 15px 10px 15px 10px;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
}
#navigation li a:hover
{
	background-color: #2586d7;
	color: #fff;
}
#screenshot
{
	width: 400px;
	height: 200px;
	border: 1px solid #000;
	float: right;
}
h2.trigger
{
	border: 1px solid #000;
}
h2.trigger a
{
	color: #000000;
	text-decoration: none;
	display: inline;
}
h2.trigger a:hover
{
	color: #3366ff;
}
h2.active
{
	background-position: left bottom;
}
#contactInfo
{
	text-align:center;
}
#ColLeft
{
	width:50%;
	float:left;
}
#ColRight
{	
	width:50%;	
	float:right;
}
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 100%;
}
#container1
{
	width:100%;
	float:left;
}
#ColContainer
{
	width:100%;
	float:left;
}
.scoreLinks
{
	MARGIN-LEFT: 2.5%;
	MARGIN-RIGHT: 2.5%;
}
.ContainerBlock
{
	float:right;
	width:100%;
}
.ColumnLeft
{
	width:50%;
	float:left;
}
.ColumnRight
{	
	width:50%;	
	float:right;
}
.ColsContainer
{
	width:100%;
	float:left;
}
.ContContainer
{
	width: 100%;
	float: left;
	padding-left: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.ContContainerHeader
{
	width: 100%;
	float: left;
	font-weight: bold;
}
/* FEEDBACK */

.feedback
{
	width:100%;
	float:left;
	margin: 10px 0px 10px 0px;
	border: 1px solid #000;
}
.feedback-name
{
	
	background-color: #ffffff;
}
.feedback-admin
{
	width:25%;
	float:right;
	text-align: right;
	background-color: #ffffff;
}
.feedback-email
{
	width:75%;
	float:right;
	background-color: #ffffff;
}
.feedback-date
{
	width:25%;
	float:left;
	background-color: #ffffff;
}
.feedback-subject
{
	width:25%;
	float:left;
	background-color: #ffffff;
}
.feedback-content
{
	width:100%;
	float:left;
	background-color: #ebebeb;
	border-top: 1px solid #000;
}
.feedback-index
{
	width:100%;
	float:left;
	background-color: #ffffff;
	border-bottom: 1px solid #000;
}
/* END FEEDBACK */
.div1
{
	width: 100%;
	border: 1px solid #000;
}
.div2
{
	width:15%;
	height: 100%;
	border: 1px solid #000;
}
.div3
{
	width: 85%;
	border: 1px solid #000;
}
.div4
{
	height: 50%;
	border: 1px solid #000;
}
.div5
{
	width: 50%;
	border: 1px solid #000;
}




/* Begin Scorecard table CSS   */
table.scoreCard
{

}
table.scoreCard td.col1
{
	width:20px;
}
table.scoreCard td.col2
{
	width:90px;
}
table.scoreCard td.col3
{
	width:90px;
}
table.scoreCard td.col4
{
	width:90px;
}
table.scoreCard td.col5
{
	width:90px;
}
table.scoreCard td.col6
{
	width:90px;
}
table.scoreCard td.col7
{
	width:90px;
}
table.scoreCard td.col8
{
	width:90px;
}
table.scoreCard td.col9
{
	width:90px;
}
table.scoreCard td.col10
{
	width:90px;
}
table.scoreCard td.col11
{
	width:90px;
}
table.scoreCard td.col12
{
	width:25px;
}
/*   End Scorecard table CSS   */

.centerDiv {
	MARGIN-LEFT: 5%;
	MARGIN-RIGHT: 5%;
}

.centerMonthDiv {
	MARGIN-LEFT: 8%;
	MARGIN-RIGHT: 8%;
}

/* Header */
.rightHeader
{
	width:35%;
	float: right;
}
.leftHeader
{
	width:65%;
	float: left;
}
/* End header */

URL is of the site I am trying to design.
http://toiletgolf.stevus.com

I don’t see any problem there. What is causing trouble, and what browser are you viewing the page with?

Sorry, this is the page I am trying to figure out.

http://toiletgolf.stevus.com/about.php

Some of the text is going out of the grey area. Should be staying in the grey area with a little between it and the edge. I dont understand since its been wrapped by a div.

Using Chrome on MAC OSX.

The problem is caused here:


#main
{
	BACKGROUND: #cccccc;
	FLOAT: right;
	WIDTH: 100%;
	[COLOR="Red"]HEIGHT: 72.5%;[/COLOR]
	[COLOR="Blue"]margin: 0px 0px 10px 0px;[/COLOR]
}

The red code is causing the text to hang out the bottom, and the blue code is causing the text to hang out to the right.

When you set width: 100% on #main, any extra padding is added to that 100% width. total width of an element is the width setting PLUS and left/right margin, padding and borders. So you’ll have to reduce the width if you want to keep some padding.

So if I wanted to see the same kind of look on the page, width, height etc, do you have any ideas for a change?

Edit: If I wanted to set width: auto; ?

Actually, I made a mistake. The margin on #main is only a bottom margin, so that affects nothing here.

Anyhow, remove the height setting altogether on #main to start with.

For the left and right padding, perhaps do something like this:

#main {
width: 98%;
padding: 0 1%;
}

Thirdly, you have far too many divs in there. All those .concontainers and main-content should be removed. If you want the paragraphs indented, write a rule like #main p {padding-left: 20px;}

See if that helps.

EDIT: o, by the way, yo’d be better off not floating those inner divs. Floating is only useful if the divs are not the full width of the wrapper.

Ok, i will remove the height setting. It looks like it will help with a lot of things actually, I was trying to at-minimum keep everything in one window. That way no scrolling is necessary.

As for the content bleeding, I just removed the width setting. That makes sense that it would have be width + padding + margin.

I’ll have to work on getting rid of my ton of divs. Like I said, noob here. I think I learned the div design idea and guess it got a little out of control.

I’ve been working with CSS for at least four years, and I still have litters of unwanted divs running around my designs and scratching at my leg. It’s a learning curve, and takes time.