...

View Full Version : 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:

<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

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
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
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
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
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
Didn't thought of that. Do you have an example?

Possibly something like


<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 (http://twitter.github.com/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.



<!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
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.

<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum