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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question html/css columns discussion

    Hi all,

    I'm strugglin with a html/css column layout. So I searched for a forum and here I am. Hope some of you can give me an advice how to proceed.

    So I have 2 colums and a quote in the middle. The way I did it now is simply:

    <p>1 paragraph</p>(float left)
    <p>3 paragraph</p>(float left)
    <blockquote>quote here</blockquote>
    <p>2 paragraph</p>(float left)
    <p>4 paragraph</p>(float left)

    --
    I could to it with css3 columns, but I'd like it working crossbrowser. The javascript solutions for that issue I'm not to excidid about.

    What you guys think?


    Ilja

    html/css columns discussion-columns.jpg

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 284 Times in 283 Posts
    That's always been a layout that doesn't have a good solution. I would leave it as you have it until the css3 version becomes more ubiquitous.

    Dave

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    That's always been a layout that doesn't have a good solution. I would leave it as you have it until the css3 version becomes more ubiquitous.

    Dave
    Thanks Dave.
    It's nasty this way huh, and not that easy for a client to modify in a CMS.

    Ilja

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by Ilja View Post
    Thanks Dave.
    It's nasty this way huh, and not that easy for a client to modify in a CMS.
    Ilja
    I'd even say it is impossible to do it yourself, create a CMS that will do that. And I don't like that layout either, as a reader. I love it esthetically, but I find annoying that I have to scroll up and down to read the text. I prefer a one-colum-article layout.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    I'd even say it is impossible to do it yourself, create a CMS that will do that. And I don't like that layout either, as a reader. I love it esthetically, but I find annoying that I have to scroll up and down to read the text. I prefer a one-colum-article layout.
    Thanks. A single column using the full width of the page is not that nice for reading, that's why I used a smaller column. It didd work in de CMS but it's not pretty

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You might consider using display:table display:table-row and display:table-cell to lay out the elements instead of using floats. It would make keeping the columns the same height easier.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    You might consider using display:table display:table-row and display:table-cell to lay out the elements instead of using floats. It would make keeping the columns the same height easier.
    Didn't thought of that. Do you have an example?

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Ilja View Post
    Didn't thought of that. Do you have an example?
    Possibly something like

    Code:
    <div style="display:table:>
    <p style="display:table-cell">1 paragraph</p>
    <p style="display:table-cell">3 paragraph</p>
    <blockquote style="display:table-row">quote here</blockquote>
    <p style="display:table-cell">2 paragraph</p>
    <p style="display:table-cell">4 paragraph</p>
    </div>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Just throwing this out there as we just started using twitter bootstrap in an HTML 5 app we are developing. The following example degrades pretty well in IE 7 (just some margin issues), no idea about 6, but I'll tell you what, the whole framework is pretty slick. This has two sets of columns because I like to get crazy. It's all fluid, and I just made this example in literally 30 seconds.

    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">
    <head>
        <title></title>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
        <style type="text/css">
            blockquote
            {   
                text-align:center;
                margin:35px;
                font-style:italic;
            }
        </style>
    </head>
    <body>
        <div class="row-fluid">
            <div class="span6">
                <div class="row-fluid">
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                </div>
                <div class="row-fluid">
                    <blockquote class="span12">
                        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit porro quisquam est qui dolorem ipsum quia dolor...
                    </blockquote>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="row-fluid">
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                </div>
                <div class="row-fluid">
                    <blockquote class="span12">
                        Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
                    </blockquote>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                    <div class="span6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie. 
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    I'm not sure how you're setting this up in your CMS, but I would have a single text area, and then split the user's content up evenly into the number of columns / rows you have on submission and a separate field for the quote. That way the content provider isn't responsible for ensuring that the paragraphs are of relatively equal size.
    Last edited by Basscyst; 01-30-2013 at 12:32 AM.
    Helping to build a bigger box. - Adam Matthews

  • #10
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by Ilja View Post
    Thanks. A single column using the full width of the page is not that nice for reading(
    That is absolutely correct. But my lines are never longer than 75 characters, usually just some 65, including spaces. And then I find a one-column layout more reader-friendly than a multi-column.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #11
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all the comments!
    I've used my first option.

    <p>col up left</p>
    <p>col up right</p>
    <blockquote>middle quote</blockquote>
    <p>col bot left</p>
    <p>col bot right</p>

    p {float: left; width: 450px}
    p:nth-child(odd) {margin: 0 20px 0 0;}
    blockquote {width: 920px; margin: 20px 0;}


    Thanks.
    Ilja


  •  

    Posting Permissions

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