Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Code:
    /* 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

    Code:
    <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>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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


  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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

    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%.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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?
    Teed

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    ??? 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...

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Attached Thumbnails Attached Thumbnails child div stretching further then parent div-swag.jpg  
    Teed

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #9
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View 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

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 08-10-2011 at 11:47 PM.
    Teed

  • #12
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •