SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text columns, table or css?

    Hi everyone, so i got a pretty good one here, luckily I was having trouble creating two text columns with CSS but it worked out with a table, take a look.

    2ac.png

    If I wanted to create this from pure css, how would i do it? what one is better in the endgame for this, table or css??

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Table layouts are ten years obsolete. If you Google for two-column CSS layouts, you'll find a blue million of them, templates, tutorials, the works. Pick one that suits you and deconstruct it to see how it works. Here's a good place to start.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Definitely don't use tables.

    You's have to start with something like this in html
    <body>
    <div id="header">
    <h1> Text Indenting </h1>
    </div>
    <div id="leftSide"></div>
    <div id="rightSide"></div>
    </body>

    And of course Add your content.

    CSS:
    To make the content reach the edges of the browser window, set the margin and padding of the body and html elements to zero.

    Two make the two columns display side by side, float them, and specify widths.

    #leftSide {
    float:left;
    width:500px;
    background:#fff;
    }
    #rightSide {
    float:right;
    width:250px;
    background:#fff;
    }


    Vague example.

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I saw this new CSS3 feature in the book HTML5 and CSS3 for the real world...should work for you.

    Link

    ~TehYoyo

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,151
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I saw this new CSS3 feature in the book HTML5 and CSS3 for the real world...should work for you.
    Unfortunately, CSS3 is still a work in progress, and support for its features is patchy in newer browsers and non-existent in older browsers. Those browsers that do support multi-column layouts mostly require vendor pre-fixes to make it work.

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Well, of course, as are all-most css3 properties. I was just suggesting an alternate strategy.

    ~TehYoyo

  7. #7
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I saw this new CSS3 feature in the book HTML5 and CSS3 for the real world...should work for you.

    Link

    ~TehYoyo
    Neat neat neat, CCS3 looks very cool, and thanks everyone I see how i can utilize the float property for columns.

  8. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by polyhedra View Post
    Neat neat neat, CCS3 looks very cool, and thanks everyone I see how i can utilize the float property for columns.

    If you think that's cool, you should take a look at this article and this crazy thing.

    CSS3 is amazing

    ~TehYoyo

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You want cool CSS3? Look at this page I made (not my website, just coded hte page on it) for a content.

    http://egproductions.net/Files/HTML/sitepoint.html

    T
    he Code is <3.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •