child div stretching further then parent div

Heres the website im working on
http://simpleswagg.com/profile/view/4

Im not very good at css.. So im just guessing and checking but i dont understand why the SecondBody and leftControl are stretching past the bodyContent and messageBody.
Not sure why.. Maybe some pointers or maybe a simple mistake.. Please let me know. Thanks

Heres my CSS
/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Edited with EditCSS */
/**** LINK-tag style sheet style.css ****/

/* Don't forget to set a foreground and background color
on the 'html' or 'body' element! */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}

a:link, a:visited, a:focus {
color:#000;
text-decoration:none;
}

a:hover{
color: #900;
text-decoration: none;
}

a:active{
color: #00f;
text-decoration: none;
}


body, html {
height:100%;
}


body{
background-color:#37536d;
color:#000;
margin:0;
padding:0;
width:100%;
height:100%;
font-family: helvetica, arial, times;
}



#radial{
position:fixed;
left:50%;
top:50%;
margin: -750px 0 0 -750px;
height:1500px;
width:1500px;
background: -moz-radial-gradient(50% 50%, farthest-side, #6497c7, #37536d, #37536d);
background: radial-gradient(50% 50%, farthest-side, #6497c7, #37536d, #37536d);
opacity:.5;
}

#fullContain {
position: relative;
width: 950px;
height:100%;
margin: auto;
}

#logo {
width: 510px;
height:125px;
margin: auto;
background-image: url('/images/logo.png');
background-repeat: no-repeat;
}

#container{
padding-top:25px;
height: 200px;
margin: auto;
}

#lForm > form {
width:520px;
margin:auto;
}

#submit, #create {
float:left;
}

input[type=text], input[type=password]{
float:left;
width:200px;
height:25px;
padding:5px;
margin: 5px;
color: black;
border: 1px solid #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}

input[type=text]:hover, input[type=password]:hover{
color: #3a3a3a;
background-color: #f7f7f7;
}

input[type=text]:focus, input[type=password]:focus{
color: #000;
background-color:#eaebeb;
border:1px solid #b09b38;
}

.buttons {
padding:8px;
color:#fff;
font-size:12px;
border:1px solid black;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
text-decoration:none;
# /* BACKGROUND GRADIENTS */
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e));
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#bLogin {
height:37px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
margin: 5px;
float:left;
text-shadow: 1px 1px 2px black;
padding-top:5px;
}

#bCreate{
color:#FFF;
position: fixed;
top: 0%;
right:0%;
width:50px;
text-align:center;
margin-top:15px;
margin-right: 15px;
opacity: .85;
text-shadow: 1px 1px 2px black;
}

#bLogin:hover, input[type=submit]:hover {
cursor:pointer;
opacity:1;
background-color:#662e2e;
}

.buttons:hover {
color:#FFF;
cursor:pointer;
opacity:1;
background-color:#662e2e;
background: -moz-linear-gradient(top, #662e2e, #5e2a2a 50%, #532323 51%, #451b1b);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #662e2e), color-stop(.5, #5e2a2a), color-stop(.5, #532323), to(#451b1b));
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#662e2e, endColorstr=#451b1b);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#662e2e, endColorstr=#451b1b)";

}

.input_names{
font-size:14px;
padding:1px;
}

#username {
width:445px;
height:50px;
}

#password {
width:445px;
height:50px;;
}

#createAccount {
padding-left:5px;
padding-top:5px;
text-align:left;
height:40px;
width:445px;
}

#goBack {
color:#FFF;
margin:auto;
text-align:center;
width:70px;
text-shadow: 1px 1px 2px black;
}

#subCreate {
padding-top:5px;
text-shadow: 1px 1px 2px black;
}

fieldset {
margin:auto;
padding:10px;
width:450px;
border:2px solid rgba(0, 0, 0, .6);
-moz-box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
-webkit-box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
box-shadow: 4px 10px 10px rgba(0, 0, 0, .6);
margin-bottom:25px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}

fieldset > legend {
color:#FFF;
font-size:17px;
text-shadow: 1px 1px 2px black;
}

#aboveContain {
width:450px;
margin:auto;
padding:5px;
}

.error {
padding:1px;
margin:auto;
font-weight:bold;
font-style: italic;
color:#262626;
font-size:12px;
text-shadow: 1px 1px 6px rgba(250, 0, 0, .1);
}

#urgentMessage {
position:relative;
width:100%;
height:50px;
left:0%;
display:none;
}

#bodyContent {
margin:auto;
width:950px;
height:100%;

}

#topWrap {
width:900px;
height:75px;
margin:auto;

}

#topLogo {
height:100%;
width:300px;
text-align:center;
font-size:48px;
}


#messageBody {
background-image: url(../images/div_bg.png);
background-repeat:repeat-x;
background-color:#36526c;
margin:auto;
min-height:450px;
height:100%;
width:890px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
padding:5px;
border:1px solid rgba(0,0,0, .07);
}

#leftBody {
margin:auto;
width:75%;
float:left;
height:100%;
}

#rightBody {
margin:auto;
float:left;
width:24%;
height:100%;
}

#status {
margin:auto;
width:100%;
padding:10px;
}

.linkOrig {
margin:auto;
width:80px;
float:left;
}

#Links {
margin:auto;
padding:5px;
float:left;
height:100px;
width:475px;
background-color: #FFF;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
-moz-box-shadow: 1px 1px 5px black;
-webkit-box-shadow: 1px 1px 5px black;
box-shadow: 1px 1px 5px black;
}

#theLinks {
margin:auto;
width:450px;
height:20px;

}

#subLinks {
border-top:1px solid #e2dfdf;
margin:auto;
width:450px;
height:20px;

}

.linkSub {
display: none;
}

#yourImage {
margin:auto;
float:left;
height:125px;
width:125px;
}

#underText {
width:105px;
text-align:center;
}

#triangle {
position: absolute;
margin-left:119px;
margin-top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;

border-right:7px solid white;

}

#Friends {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color:#274357;


-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;
}

#Friends > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;


# /* BACKGROUND GRADIENTS */
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e));
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#Friends > p {
font-size:12px;
}

#Stalkers {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color: #274357;

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;
}


#Stalkers > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;

# /* BACKGROUND GRADIENTS */
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e));
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
}

#Stalkers > p {
font-size:12px;
}

#SwaggUp {
color: #d3d3d3;
margin:auto;
width:180px;

height:50px;
background-color: #274357;

-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

border:2px solid rgba(0, 0, 0, .1);

margin-bottom:15px;

}

#SwaggUp > h1 {
text-weight:bold;
padding:5px;
-moz-border-radius-topright:10px;
-moz-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
border-radius-topright:10px;
border-radius-topleft:10px;

height:15px;

# /* BACKGROUND GRADIENTS */
background-color:#703636;
background: -moz-linear-gradient(top, #703636, #672f2f 50%, #5b2929 51%, #4b1e1e);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #703636), color-stop(.5, #672f2f), color-stop(.5, #5b2929), to(#4b1e1e));
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);
/* For Internet Explorer 8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#703636, endColorstr=#4b1e1e);

}

#secondBody {
position:relative;
margin:auto;
width:100%;
height:100%;
margin-top:120px;
}

#leftControl {
float:left;
height:100%;
width:20%;
font-size:12px;
border-right:1px solid black;
}

#rightWall {
height:100%;
width:80%;
}



heres the view file

<div id="topWrap">
<div id="topLogo"><h1>Simple Swag</h1></div>
<div id="topNav">

</div>
</div>
<div id="bodyContent">
<div id="messageBody">
<div id="leftBody">
<div id="status">
<div id="yourImage">
<?php

$haveImage = false;

if($haveImage == true || $haveImage != ''){



}
else{

echo '<img src="'.base_url().'/images/yourImage.png" height="105px" width="105px" />';

}

?>
<div id="underText">
<?=$profile_username;?>
</div>
</div>
<div id="triangle"></div>
<div id="Links">
This is the status of the user. blah blah blah here is some more words..
maybe time to repeat This is the status of the user. blah blah blah here is some more words..
maybe time to repeat
</div>
</div>
<div id="secondBody">
<div id="leftControl">
Send Message <br />
Add as Froemd <br />
Photos <br />
Etc
</div>
<div id="rightWall">
Display wall post here
</div>
</div>
</div>

<div id="rightBody">
<div id="Friends">
<h1>Currently 0 Friends</h1>
</div>

<div id="Stalkers">
<h1>Currently 0 Stalkers</h1>
</div>
</div>

</div>
</div>

can't see the problem, but go ahead an set a <div style="clear: both;"></div> so that your grey border wraps around the content.

Point out the problem your having in the pic

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-72.png

can't see the problem, but go ahead an set a <div style="clear: both;"></div> so that your grey border wraps around the content.

Point out the problem your having in the pic

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-72.png

Sorry since this post i've been messing with it quite a bit.. I want everything to stretch 100% and its not.. i added a min-height which fixed some of it.. If you take the style sheet i posted above and put it in firebug or what ever you are using you will see what i use to have.. But im trying to get all the DIVs to stretch 100%.

i dont understand why the SecondBody and leftControl are stretching past the bodyContent and messageBody.



I want everything to stretch 100% and its not

??? SO which way do you want it? Too stretch to 100% width of its parent? or not?

Specifically which elements are you referring to and what is your desired look?

??? SO which way do you want it? Too stretch to 100% width of its parent? or not?

Specifically which elements are you referring to and what is your desired look?

If you read what i just posted above.. I been messing with the code.. COPY AND PASTE the stylesheet code above and replace it with the style sheet that is in play now and you will clearly understand what i ment by the div stretching past its parent div..

After messing with the code, its not stretching past its parent div.. its not even stretching 100% of the parent div.. You can look and see for yourself at the page now.

So i want all the divs to stretch 100% of the parent div...

If you read what i just posted above.. I been messing with the code.. COPY AND PASTE the stylesheet code above and replace it with the style sheet that is in play now and you will clearly understand what i ment by the div stretching past its parent div..


No really I CANT understand what you mean. Please, either work up a graphical wireframe of what you want, or explain in further detail. Here is your page with me Pasting your css from above in.

No really I CANT understand what you mean. Please, either work up a graphical wireframe of what you want, or explain in further detail. Here is your page with me Pasting your css from above in.

Uhmm.. Exactly.. Scroll down.. the div is stretching past its parent div..
example

<div id='1'>
<div id='2'>
</div>
</div>

Div 1 is the parent div of 2 correct!?!?!?!?

Well on my style sheet if you would see that the DIV 2 IS STRETCHING PAST DIV 1
Reason being? I dono thats the question.

Sorry since this post i've been messing with it quite a bit.. I want everything to stretch 100% and its not.. i added a min-height which fixed some of it.. If you take the style sheet i posted above and put it in firebug or what ever you are using you will see what i use to have.. But im trying to get all the DIVs to stretch 100%.

A divs natural behavior is to expand and shrink based on its content. 100% of nothing is still nothing. What I mean is, setting a height to 100% wont always work. You can set a pixel height, but be aware this will break your box model should the content become too much to be contained.

If you go BACK to the former stylesheet, I think that's much better. Make sure you clear your floats as Sammy suggested. The new stylesheet you posted above with all those height 100% just doesnt seem to work. Go back and then add a height in pixels. If I'm still way off base, sorry...I do work and am trying to help..and as I said, I was confused with your post.

A divs natural behavior is to expand and shrink based on its content. 100% of nothing is still nothing. What I mean is, setting a height to 100% wont always work. You can set a pixel height, but be aware this will break your box model should the content become too much to be contained.

If you go BACK to the former stylesheet, I think that's much better. Make sure you clear your floats as Sammy suggested. The new stylesheet you posted above with all those height 100% just doesnt seem to work. Go back and then add a height in pixels. If I'm still way off base, sorry...I do work and am trying to help..and as I said, I was confused with your post.

I really appreciate your help i been on several forums asking for help and i just been getting frustrated so sorry if i sound bitter..

Can i add the clear:both on my divs already or do I HAVE TO create another div inside it that says clear:both

What is the background image for messageBody? It fails to load, but has a set dimension. Not sure why its not loading, but probably a dile path issue.

Looking back through your code, the reason floats have to be cleared, is if there are other elements lower that need to have normal page flow restored. Thats what floats do, they disrupt the normal flow of a document. You dont have a footer so clearing floats is not an issue I dont think.

http://forum.codecall.net/attachment.php?attachmentid=4081