html/css columns discussion

Ilja · 01-27-2013, 11:40 AM

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:

1 paragraph(float left)
3 paragraph(float left)
<blockquote>quote here</blockquote>
2 paragraph(float left)
4 paragraph(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

Click image for larger version

Name: columns.jpg
Views: 34
Size: 41.9 KB
ID: 11897

tracknut · 01-27-2013, 03:38 PM

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

Ilja · 01-27-2013, 03:52 PM

Quote:

Originally Posted by tracknut

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

Frankie · 01-28-2013, 01:11 PM

Quote:

Originally Posted by Ilja

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.

Ilja · 01-29-2013, 07:22 PM

Quote:

Originally Posted by Frankie

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

felgall · 01-29-2013, 09:25 PM

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.

Ilja · 01-29-2013, 09:49 PM

Quote:

Originally Posted by felgall

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?

felgall · 01-29-2013, 09:57 PM

Quote:

Originally Posted by Ilja

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>

Basscyst · 01-30-2013, 12:04 AM

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.

Frankie · 01-30-2013, 12:09 PM

Quote:

Originally Posted by Ilja

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.

Ilja · 02-04-2013, 09:38 AM

Thanks for all the comments!
I've used my first option.

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

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

Thanks.
Ilja