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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    146
    Thanks
    5
    Thanked 3 Times in 2 Posts

    CSS Columns for layout-ish

    Ok so here's what I'm using.

    HTML

    Code:
    </DIV>
    
    <DIV class="rightcolumn">
    
    Contents of right column.
    </DIV>
    
    </DIV>
    
    <DIV class="leftcolumn">
    
    Contents of left column.
    </DIV>
    CSS CODE

    Code:
    .leftcolumn {
    position:       absolute;
    width:          100;
    top:            0px;
    left:           0px;
    background-color: #00FFFF;
    }
    
    .rightcolumn {
    position:       absolute;
    width:          700;
    top:            0px;
    left:           100px;
    background-color: #32cd32;
    }
    My question is that is this the most effective way to get my page split? I am wondering if this is a good way to be splitting my page or if there is a better way?
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    In my opinion, I would say that this is a bad way to be splitting your page. If you're overall layout is going to be 800 pixels thick, then try something this:

    Code:
    <style type="text/css">
     #container { width: 800px; border: 1px solid #000; }
     #lftCont { width: 700px; }
     #lftCont .cont { padding: 20px; }
     #rgtCont { width: 100px; float: right; }
     #rgtCont .cont { padding: 5px; }
    </style>
     
     <div id="container">
      <div id="lftCont">
       <div class="cont">
        <p>
         I used this to add padding.
        </p>
       </div>
      </div>
      <div id="rgtCont">
       <div class="cont">
        <ul>
         <li>
          <a href="index.php?id=1">Homepage</a>
         </li>
         <li>
          <a href="index.php?id=2">About Me</a>
         </li>
         </ul>
        </div>
       </div>
      </div>
    I haven't tested this at all, so I don't know if it will work, just posted it quickly. Sorry if it doesn't - getting late.

    You could opt to replace the absolute widths with percentages.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    146
    Thanks
    5
    Thanked 3 Times in 2 Posts
    So I would just put that in place of my html code, and leave my css code the same or vis versa?
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.

  • #4
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Just paste the <style> into your <head> and the <div>'s into your <body> and check if it works first.

    Apply it, change it to suit your needs. I just bashed the thing together. You gave no indication of what you were doing or what you required, so I just put something together.

    Given your HTML and CSS, I'm guessing you have knowledge of both - so this task shouldn't be difficult for you.

    Like I said, I didn't bother testing it out - it's just too late at night for that.
    Last edited by BWiz; 07-29-2007 at 05:31 AM. Reason: Errors - late at night
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    146
    Thanks
    5
    Thanked 3 Times in 2 Posts
    +rep thanks for the help. I just had to adjust a few things. My question though is I want the CSS in a seperate document, and to connect it with a tag such as this


    Code:
    <link href="../html/trial.css" rel="stylesheet" type="text/css" />
    How would I get this to work on a seperate document?
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.

  • #6
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    I'm unsure what you mean, though if you're using the <link> tag - it's basically having the CSS in that page. You can use all your classes and ids normally.

    If you mean about linking it up and such, just make sure that the href is relative to the page which you are calling it from. Then, inside the external stylesheet; if you're using any background images or such - they have to be relative to the .css file.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    146
    Thanks
    5
    Thanked 3 Times in 2 Posts
    No I mean I don't want to have to paste that code into every single page. I'm using a seperate css document and linking it in. The code you gave me was for in the html document.
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    #container { width: 800px; border: 1px solid #000; }
    #lftCont { width: 700px; }
    #lftCont .cont { padding: 20px; }
    #rgtCont { width: 100px; float: right; }
    #rgtCont .cont { padding: 5px; }
    Place that code into the trial.css, link to the trialcss file and delete that coding from the html document.

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    146
    Thanks
    5
    Thanked 3 Times in 2 Posts
    Thanks JLHaslip, I'll try that now.
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.


  •  

    Posting Permissions

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