1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Two columns in pages

Discussion in 'Styling and Customization Questions' started by AndreaMarucci, Dec 19, 2011.

  1. AndreaMarucci

    AndreaMarucci Well-Known Member

    I would like to create a page with two columns of text. I know that I could use tables but I would like to know if there's any other way to do that through CSS...
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. AndreaMarucci

    AndreaMarucci Well-Known Member

    Thanks Brogan. Tried it but everytime I hit reload I get a completely messed up page. Probably there's some css code that conflict with the XF css code... I've tried this (putting the css in extra.css) but the page header disappeared and nothing is displayed in the page...


    Code:
    .pgn_mask{
      position: relative;
      overflow: hidden;
      margin: 0px auto;
      width: 100%;
      background-color: #ffffff
    }
    .pgn_header{
      float: left;
      width: 100%;
      background-color: #ffffff
    }
    .pgn_colleft{
      position: relative;
      width: 100%;
      right: 50%;
      background-color: #ffffff
    }
    .pgn_col1{
      position: relative;
      overflow: hidden;
      float: left;
      width: 48%;
      left: 101%;
      background-color: #ffffff
    }
    .pgn_col2{
      position: relative;
      overflow: hidden;
      float: left;
      width: 48%;
      left: 3%;
      background-color: #ffffff
    }
    .pgn_footer{
      float: left;
      width: 100%;
      background-color: #ffffff
    }
     
    <div class="pgn_mask">
        <div class="pgn_header">
            header
        </div>
        <div class="pgn_colleft">
            <div class="pgn_col1">
                right
            </div>
            <div class="pgn_col2">
                left
            </div>
        </div>
        <div class="pgn_footer">
            footer
        </div>
    
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You're missing a closing </div>.
     
  5. AndreaMarucci

    AndreaMarucci Well-Known Member

    I've used tables. It's too frustrating to have to do with css and go on trying just to obtain nothing. I simply do not understand what's going on... :(
     

Share This Page