Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Css Newbie Question….

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #31761
    kelvinator44
    Member

    Well I just recently started with CSS and I have to do a project for college and cant seem to figure out the problem with my layout. You can have a look at it here (Its the part marked Problem !! :P):
    Image

    What I want to do is that the part pointed to should act as a container and the parts flowing out of it should ideally not be doing that.
    If anyone is willing to help me out heres my complete code till now :
    Download Link Link Removed by Mods

    Thank you to anyone who helps me out.

    #58537
    TT_Mark
    Member

    Sorry, but we cannot allow people to post links to download files. If you want people to help, please either post the HTML and CSS or link to a live example.

    In any case, I’m guessing you have floated the light-grey and dark grey boxes, meaning the container div doesnt expand to ‘contain’ them. In this instance, try adding the CSS property

    overflow: hidden

    to your container div

    #58543
    kelvinator44
    Member

    Sorry didnt know about that rule. Also I tried the overflow: hidden css style but it just hides the content. Heres the code btw :
    index.php






    Untitled Document



















    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.

    Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.















    style.css

    @charset "utf-8";
    /* CSS Document */
    body {
    font-family: Georgia, serif;
    background-color: #828282;
    color: #1B0C04;
    padding: 0;
    margin: 0 auto;
    }

    #bgGradient {
    position: absolute;
    background-image: url('images/page_sg.jpg');
    background-repeat: repeat-x;
    top: 0;
    width: 100%;
    height: 500px;
    }
    #header {
    margin-top: 0px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 0px;
    position: relative;
    z-index: 0;
    width: 874px;
    height: 225px;

    }
    #headerimg {
    position: relative;
    z-index: -1;
    top: 0;
    left: 0;
    width: 874px;
    height: 225px;
    background-image: url('images/header.jpg');
    background-repeat: no-repeat;
    background-position: center center;

    }
    #headertext {
    display: block;
    position: absolute;
    left: 11px;
    top: 51px;
    width: 853px;
    text-align: center;
    font-variant:small-caps;
    color: #FFF;
    }
    #page {
    margin-top:-16px;
    margin-bottom: 0px;
    width: 874px;
    margin-left:auto;
    margin-right: auto;
    position:relative;
    }
    #mainwrapper {
    position: absolute;
    margin-left: auto;
    margin-right:auto;
    height:auto;
    width: 100%;
    overflow:hidden;
    }
    #blogSheet {
    position:relative;
    width: 900px;
    clear:both;
    height:auto;
    background-color: #CCC;
    margin-top:10px;
    margin-bottom:10px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: 2px solid #333;

    }
    #navbar {
    position: relative;
    height: 42px;
    background-image: url(images/nav.png);
    }
    #navbar ul {
    list-style:none;
    }
    #navbar li {
    display:inline;

    }
    #clear {
    clear: both;
    height: 0px;
    }
    #con-side {
    position:absolute;
    width: 874px;
    margin-top: -10px;
    height:auto;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/sheet_v.png);
    background-repeat: repeat;


    }
    #content {
    position:relative;
    float: left;
    width: 674px;
    clear:left;


    }
    #sidebar {
    position:relative;
    float: right;
    width: 200px;
    clear:right;

    }
    .post-body {
    position:relative;
    font-size: 12px;
    color: #000;
    background-color: #CCC;
    border: 1px dotted #666;
    margin: 3px;
    padding: 5px;

    }
    #58445
    soap
    Participant

    put this

    underneath

    #58387
    chrisburton
    Participant

    @soap, using a div to clear floats is not needed in most cases and is in bad practice as it creates extra markup. You can simply use clear:both; on the next element to clear the float.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.