SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1st CSS Layout - Float Issue

    Hello i am having a problem with float positionning, i have floated divs in which i can not include any block elements (UL, HR, LI, P etc...) becquse when i do, they all stand out of their respective container (bottom og them atualy) I think it is dues to the fact that i am using float to positionne all the blocks...

    here is the code i have bolded the piece where you can see the bug in action... By the way if i inlude text or inline elements it works fine but block elements gets out of the block and locate at the bottom of it!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>The New SoulJoint.com</title>
    <meta http-equiv="Content-Type" content="text/html; charset=diso-8859-1" />
    <style type="text/css">
    
    body {
    margin: 0;
    padding: 0;
    background-color: #516363;
    color: black;
    font-size: 10px;
    font-family: Verdana, Helvetica, serif;
    }
    
    #global { /* largeur général du document */
    width: 750px;
    background-color: #FFFFFF;
    margin: 0 auto;
    }
    
    p {
    margin: 0;
    padding 0;
    }
    
    h2,h3,h4,h5,h6 {
    font-size: 11px;
    }
    
    
    #header {
    height: 50px;
    background-color: #99A1A3;
    color: white;
    margin: 0;
    }
    
    #header img {
    float: left;
    }
    
    #advertisement {
    background-color: #DA5D09;
    color: white;
    margin: 0;
    }
    
    #mainmenu {
    background-color: #73971B;
    color: white;
    margin: 0;
    }
    
    #leftcol {
    float: left;
    width: 130px;
    margin: 5px 10px 0px 10px;
    }
    
    
    .leftcoltitle {
    color: #FFFFFF;
    background-color: #73971B;
    border: 1px solid #73971B;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .leftcolcontent {
    border: 1px solid #73971B;
    padding: 5px;
    margin: 0;
    }
    
    #maincol {
    margin-left: 150px;
    background-color: #FFFFFF;
    }
    
    
    #editorialblocks {
    float: left;
    width: 460px;
    }
    
    .editorial {
    float: left;
    width: 143px;
    margin: 5px 10px 0px 0px;
    }
    
    #bottomedit {
    clear: both;
    }
    
    .edititle {
    color: #FFFFFF;
    background-color: #308395;
    border: 1px solid   #308395;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .editcontent {
    border: 1px solid   #308395;
    padding: 5px;
    margin: 0;
    }
    
    #newsfeed {
    float: right;
    width: 130px;
    margin: 5px 10px 0px 0px;
    }
    
    .newsfeedtitle {
    color: #FFFFFF;
    background-color: #73971B;
    border: 1px solid #73971B;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .newsfeedcontent {
    border: 1px solid #73971B;
    padding: 5px;
    margin: 0;
    }
    
    #communityblocks {
    clear: right;
    }
    
    .community {
    float: left;
    width: 190px;
    margin: 5px 10px 0px 0px;
    }
    
    .cmntytitle {
    color: #FFFFFF;
    background-color: #DA5D09;
    border: 1px solid #DA5D09;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .cmntycontent {
    border: 1px solid #DA5D09;
    padding: 5px;
    margin: 0;
    }
    
    #storelounge {
    clear: both;
    width: 750px;
    background-color: #308395;
    }
    
    #storeloungeleft {
    float: left;
    width: 360px;
    margin: 5px 10px 0 10px;
    }
    
    #storeloungeright {
    float: left;
    width: 360px;
    margin: 5px 10px 0 0;
    }
    
    .loungetitle {
    color: #FFFFFF;
    background-color: #308395;
    border: 1px solid #308395;
    padding: 5px 5px 5px 5px;
    margin: 0;
    }
    
    .loungecontent {
    border: 1px solid #308395;
    padding: 5px;
    }
    
    .separation            {
    clear: both;
    visibility: hidden;
    }
    .spacer {
    clear: both;
    }
    
    #footer {
    clear: both;
    width: 730px;
    margin: 5px 10px 5px 10px;
    background-color: #99A1A3;
    }
      </style>
    </head>
    
    <body>
    
    <div id="global">
    <div id="header">En tete Logo</div>
    
    <div id="advertisement">Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit.
    Mauris condimentum libero at eros. Fusce justo. Vivamus magna pede,
    laoreet et, mattis bibendum, congue ut, est. Morbi bibendum quam a
    purus. Sed sed mi. Donec quis pede at nisl congue euismod. Vivamus
    egestas cursus pede.</div>
    
    <div id="mainmenu">Lorem ipsum dolor sit amet,
    consectetuer
    adipiscing elit. Mauris condimentum libero at eros. Fusce justo.
    Vivamus magna pede, laoreet et, mattis bibendum, congue ut, est. Morbi
    bibendum quam a purus. Sed sed mi. Donec quis pede at nisl congue
    euismod. Vivamus egestas cursus pede.</div>
    
    <div id="leftcol">
    <h2 class="leftcoltitle">Left Blocks</h2>
    <p class="leftcolcontent">   
    <p> Aenean
    feugiat tincidunt diam. Nullam semper nisi
    vel dolor. Mauris vel dui. Phasellus tellus felis, viverra non, sodales
    sed, ornare a, magna. Etiam scelerisque orci
    sit amet lacus. Nam mattis aliquet augue. Vivamus non est non lectus
    venenatis fermentum. consectetuer
    adipiscing elit</p>       
    
    </p>
    
    </div>
    <div id="maincol">
    <div>
    <div id="editorialblocks">
    <div>
    <div class="editorial"><h2 class="edititle">Mauris vitae arcu.</h2>
    <p class="editcontent"> Aenean
    feugiat tincidunt diam. Nullam semper nisi
    vel dolor. Mauris vel dui. Phasellus tellus felis, viverra non, sodales
    sed, ornare a, magna. Etiam scelerisque orci
    sit amet lacus. Nam mattis aliquet augue. Vivamus non est non lectus
    venenatis fermentum. consectetuer
    adipiscing elit</p></div>
    
    <div class="editorial">Nunc commodo pede sit amet
    nisi. Ut sit amet
    tortor ultrices arcu vulputate porttitor. Donec malesuada sem semper
    mauris. Maecenas imperdiet.Etiam scelerisque orci
    </div>
    
    <div class="editorial"> Donec faucibus, erat vitae
    scelerisque
    tincidunt, arcu arcu pretium orci, nec dignissim libero nunc id pede.
    Nulla facilisi.Etiam scelerisque orci
    sit amet lacus. Nam mattis aliquet augue. Vivamus non est non lectus
    venenatis fermentum.consectetuer
    </div>
    
    </div>
    
    <div id="bottomedit">
    <div class="editorial"><h2 class="edititle">Mauris vitae arcu.</h2>
    <p class="editcontent"> Aenean
    feugiat tincidunt diam. Nullam semper nisi
    vel dolor. Mauris vel dui. Phasellus tellus felis, viverra non, sodales
    sed, ornare a, magna. Etiam scelerisque orci
    sit amet lacus. Nam mattis aliquet augue. Vivamus non est non lectus
    venenatis fermentum. consectetuer
    adipiscing elit</p></div>
    
    <div class="editorial">Nunc commodo pede sit amet
    nisi. Ut sit amet
    tortor ultrices arcu vulputate porttitor. Donec malesuada sem semper
    mauris. Maecenas imperdiet.
    </div>
    
    <div class="editorial"> Donec faucibus, erat vitae
    scelerisque
    tincidunt, arcu arcu pretium orci, nec dignissim libero nunc id pede.
    Nulla facilisi.
    </div>
    
    </div>
    
    </div>
    
    <div id="newsfeed"><h2 class="newsfeedtitle">Newsfeed</h2>
    <p class="newsfeedcontent">Donec
    faucibus, erat vitae scelerisque
    tincidunt, arcu arcu pretium orci, nec dignissim libero nunc id pede.
    Nulla facilisi. Nunc euismod, urna quis iaculis tincidunt, odio mi
    adipiscing lectus.consectetuer
    adipiscing elit. Mauris condimentum libero at eros. Fusce justo.
    Vivamus magna pede, laoreet et, mattis bibendum, congue ut, est. Morbi
    bibendum quam a purus. Sed sed mi. Donec quis pede at nisl congue
    euismod. Vivamus egestas cursus pede.      
    </p>
    </div>
    
    </div>
    
    <div id="communityblocks">
    <div class="community"><h2 class="cmntytitle">Mauris vitae arcu.</h2> <p class="cmntycontent">Aenean feugiat
    tincidunt diam. Nullam semper nisi
    vel dolor. Mauris vel dui. Phasellus tellus felis, viverra non, sodales
    sed, ornare a, magna.
    </p> </div>
    
    <div class="community"> Maecenas imperdiet. Donec faucibus,
    erat vitae scelerisque
    tincidunt, arcu arcu pretium orci, nec dignissim libero nunc id pede.
    Nulla facilisi. Nunc euismod, urna quis iaculis tincidunt, odio mi
    </div>
    
    <div class="community">
    adipiscing lectus, nec interdum dolor ligula in sapien. Aliquam vel mi.
    Vivamus iaculis. Pellentesque habitant morbi tristique senectus et
    netus et malesuada fames ac turpis egestas. Phasellus pharetra eros sed
    massa.
    </div>
    
    </div>
    
    </div>
    
    <div id="storelounge">
    <div id="storeloungeleft"><h2 class="loungetitle">Fusce faucibus</h2>
    <div class="loungecontent">turpis sit amet
    consectetuer gravida, sapien
    lacus
    pretium turpis, ut condimentum ligula sapien eget purus. Curabitur
    suscipit nisi. Nunc quis arcu. In hac habitasse platea dictumst. Nunc
    dictum velit sit amet nisi. Cras dapibus malesuada mauris. Nullam
    ipsum. Nunc sapien.</div>
    </div>
    
    <div id="storeloungeright"> Phasellus vitae neque sit amet
    elit placerat
    gravida. Sed libero. Sed commodo. Nam pharetra urna vel massa. Quisque
    mattis pretium ligula. Quisque volutpat nonummy dui. Cras ligula.
    Phasellus ac diam. Ut sollicitudin, leo non luctus viverra, ante leo
    vestibulum libero, a ornare lorem quam quis est.
    </div>
    
    </div>
    <hr class="separation" />
    <p id="footer">Nunc erat. Phasellus sed odio ut lacus
    sodales pharetra. Ut porttitor porttitor erat. Aenean a nisi in mauris iaculis aliquet.
    Mauris sagittis diam et metus. Nunc est. Sed rutrum, risus sed pharetra
    rhoncus, lorem nunc sodales purus, non vehicula risus elit id mauris.
    Aenean in pede. Nunc porta metus et nisl. Etiam justo nunc, laoreet ut,
    nonummy et, fermentum vel, augue. Duis mi neque, nonummy id, pulvinar
    vitae, pellentesque eget, arcu. Ut hendrerit. Nullam ut justo. Mauris
    euismod velit a orci. Quisque lorem metus, eleifend at, lacinia id,
    pharetra vitae, urna.
    </p>
    <hr class="separation" />
    </div>
    
    </body>
    </html>
    Thanks in advance for your help!
    Mo-Ex
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  2. #2
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure why you are making your leftcolcontent a paragraph....considering it's a border around the text.....

    I just change it to a div element and volia:

    Code:
    <div id="leftcol">
    <h2 class="leftcoltitle">Left Blocks</h2>
    <div class="leftcolcontent">   
    <p> Aenean
    feugiat tincidunt diam. Nullam semper nisi
    vel dolor. Mauris vel dui. Phasellus tellus felis, viverra non, sodales
    sed, ornare a, magna. Etiam scelerisque orci
    sit amet lacus. Nam mattis aliquet augue. Vivamus non est non lectus
    venenatis fermentum. consectetuer
    adipiscing elit</p>    
    </div>
    <div style="clear: both"></div>  
    </div>
    Let me know how it goes.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you it works... But what it is about paragraphs that made it not work?

    i used paragraphs to make sure i was using a logical tag for this but i guess i still need to lean more about standards!

    Thanks again!

    also didn't i nest to many DIvs in my code, it seems i could have had the same results without nexting DIvs like good ol tables?
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  4. #4
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not sure about the paragraphs questions....I've never considered using a paragraph as a border before.

    Not at all for nesting divs inside each other. This is very common among complex sites. You can obviously create the same website with tables, but I found it much easier to read a CSS website than a tables website.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the helps it truly works, by the way my site validate as XHTML 1.0 strict but the layout break down in IE6 becaus of the blox dimensions (model) is that normal?
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  6. #6
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by motion-ex
    thanks for the helps it truly works, by the way my site validate as XHTML 1.0 strict but the layout break down in IE6 becaus of the blox dimensions (model) is that normal?
    IE6 has a lot of problems rendering CSS correctly. You have to use a lot of hacks to make it work properly. You should read Paul's CSS FAQ thread which is found at the top of the CSS board.

    In any case, the general rule is to build your site according to how Firefox renders it (it does the job correctly), and then begin fixing it for IE.

  7. #7
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes that is exactly what i have done FF renders the site the way i am expecting and the source is valid in strict xhtml and despite a correct doctype (without xml prologo to please IE6) IE6 breaks on box dimensions!

    I even applied the rule to not use padding with a box that a specified width (using only margin in that case) and to not specify any width to a box that has padding and lateral border but somehow there few boxes/margin/padding it doesn't get right...

    As to hacks i thought the hacks are only for IE5.5/Win?
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 with a correct doctype uses the same box model as Firefox. IE, however, does have several bugs in relation to displaying floats so it could be those that are causing your problems.

  9. #9
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You both are right, it was actually a floating problem which has been resolved using tips from Paul's CSS FAQ thread which is found at the top of the CSS board.

    Thx Both!

    Are those issue resolved in IE7?
    On a PHP/Java/XML/Javascript/MySQL internship right now!


Bookmarks

Posting Permissions

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