Forums

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

Home Forums CSS Help with 4 column template

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #31582
    dejota
    Member

    Hi there!, First i wanted to congratulate you for this great Forum, second i want to present myself, my name is Juan, and i have this issue.

    I want to make a template with div and CSS, but im failing in something and i don’t know how to solve it. I Post the Pic of what i want and the Php and CssĀ“s Code.

    I Hope someone could please help me. Thank you so much!.

    Image

    Php









































    #Wrapper {
    height:auto !important;
    width:1264px;
    /*this works hand in hand with the #FooterWrapper min-height: settings */
    min-height:90%;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
    }

    /* Heading Color and Height control*/
    #Header {
    background-image:url(../images/brb.png);
    background-repeat: repeat-x;
    }

    /*Menu Wrapper to cover the width if needed*/
    #MenuWrapper{
    background-color:#333;
    width:100%;
    height:25px;
    white-space:nowrap;
    /*need for FF div not working right*/
    margin:0 auto;
    padding-top:5px;
    }

    /* Main Body Padding */
    #MainBody{padding:0px;
    }

    #ColumnLeft{
    float:left;
    width:1000px;
    }

    #ContentLeft {
    float:left;
    }

    #Left{
    float:left;
    width:200px;
    }

    #MainContent {
    float:left;
    width:800px;
    }

    #Book {
    float:left;
    }

    #News {
    float:left;
    width:500px;
    }

    #publi300 {
    float:right;
    width:300px;
    }

    #SecondContent {
    float:right;
    width:800px;
    padding:0px;
    }

    #user2 {
    float:left;
    }

    #user6 {
    float:left;
    width:200px;
    }

    #user7 {
    float:left;
    width:200px;
    }

    #user8 {
    float:left;
    width:200px;
    }

    #Right{
    float:left;
    width:200px;
    }

    #ColumnLeftDown {
    float:left;
    width:1000px;
    }

    #ColumnRight{
    float:right;
    width:264px;
    }

    #60977
    artjunkie
    Participant

    you’re missing some closing div tags and your math was wrong
    in terms of div widths. everything has to match up.












      LEFT




    Book


    News


    Publi300




    User6



    User7


    User8





    FOOTER




    EXTRA











    #60896
    SAiNT
    Participant

    don’t know what’s the problem exactly, but you might want to check this layout:
    http://www.pmob.co.uk/temp/4colfixedtest_5.htm

    #60679
    ccc630
    Member

    As a quick test, I used this structure:




    Left




    Main







    Extra



    I left-floated the ‘mainwrap’ div, then left-floated ‘left’ and ‘main’ inside it, and right-floated ‘right’. I also left-floated ‘extra’, and it *seemed to come out correctly (Firefox 3.6 on Mac). No idea if it would break in Explorer or other browsers, but this might offer a starting point . At the least, I *think* the ‘Extra’ div should be separate from the rest of the page structure rather than nested as it is now. To make it stretch the full height of the 3 columns plus footer, you could either calculate the total height if it’s static or wrap everything in a ‘totalwrap’ div (or whatever) and set ‘extra’s height to 100%.

    Hope this helps — if anyone out there is shaking their head at some bone-headed mistake here, let me know — I’m still learning as well. :)

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