I want these columns responsive if the screen size is small i want them to break downwards and adjust width 100% on small screen.
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
text-align:left;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
You can achieve this using media queries in css.
.newspaper {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
text-align: left;
}
/* max-width value depend on at which resolution you need text in single column, As for now to achieve that in mobile I have used 767px */
#media (max-width: 767px) {
.newspaper {
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
}
}
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
Try this
#media screen and (max-width: 767px)
{
.newspaper {
-webkit-column-count:1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
}
Related
i got following HTML structure:
Demo here
<div id="wrapper">
<div id="header">
<i>Header</i>
</div>
<div id="content">
<i>Content</i>
</div>
<div id="footer">
<i>Footer</i>
</div>
</div>
#wrapper{
margin: 0;
height: 100vh;
max-height: 100vh;
/* overflow: hidden; */
display: flex;
flex-direction: column;
}
#header{
background: blue;
height: 3rem;
}
#content{
background: red;
flex-grow: 1;
}
#footer{
background: green;
height: 3rem;
}
My problem is that when the div of the content gets too large, the wrapper ignores his max-height and gets a scrollbar. What i want is that the content div instead gets the scrollbar and the wrapper holds it's height.
Demo of content to large
You have to make the wrapper overflow: hidden so scroll-bar is disabled for that div.
Next, You can add the overflow: auto to content to make it scrollable if content goes outside.
#wrapper{
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: red;
overflow: hidden;
}
#content{
flex-grow: 1;
overflow: auto;
}
You don't need a flexbox here, since all the elements go after each other.
In your example, you can use a max-height on the content itself, and use a overflow: scroll to prevent large text to not show up
wrapper {
margin: 0;
height: 100vh;
/* overflow: hidden; */
}
#header {
background: blue;
height: 3rem;
}
#content {
background: red;
height: calc(100vh - 6em);
overflow: scroll;
}
#footer {
background: green;
height: 3rem;
}
<div id="wrapper">
<div id="header">
<i>Header</i>
</div>
<div id="content">
<i>iquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velmperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, cos autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dign
s autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dign</i>
</div>
<div id="footer">
<i>Footer</i>
</div>
</div>
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
I am trying to create two columns like a news paper that will be side by side on my webpage. It is basic html. Each column starts with an h1 tag and then the body of the column is a p tag with a few sentences. What css stylers would be best to achieve this?
Specially you can use multi column for newspaper style.
.newspaper {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers
I am trying to use #container (below) to control the height of the columns it contains. The way I have it coded doesn't seem to work. To help me identify what is going on I made the #container background-color red. I'm quite confused. Why is #container not red? What am I missing? The HTML and CSS files are below and complete. Any help is appreciated.
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
#menu li:first-child{
margin-left:75px;
}
#font-face{
font-family: Bleeding Cowboys;
src: url(assets/Bleeding_Cowboys.ttf);
}
a:link{
color:purple;
text-decoration:none;
}
a:hover{
color: red;
text-decoration:none;
}
#header{
display:block;
margin: auto;
width: 60%;
}
#header-img{
float:left;
margin-left:150px;
}
#header:hover{
display:block;
margin:auto;
width:60%;
img:(url)
}
#column1{
width:300px;
height:auto;
float:left;
margin-right:30px;
margin-left:30px;
border:solid;
border-width:3px;
border-color:grey;
}
#melies-portrait{
width:300px;
}
div p {
padding:10px;
}
#column2{
width:300px;
height 600px;
float:left;
margin-right:30px;
}
#melies-2-image{
}
#column3{
width:300px;
height:600px;
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>Archivo Melies</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="scripts.js"></script>
</head>
<body>
<div id="header">
<a href="index.html"><img id="header-img"; src="images/header-logo-950-purplelink.png"
onmouseover="this.src='images/header-logo-950-redhover.png'"
onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<div>
<ul id="menu">
<li>Inicio</li>
<li>Bio</li>
<li>Filmography</li>
<li>Articles</li>
<li>Merch</li>
<li>Archive</li>
</ul>
</div>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
</body>
</html>
On the final link, you are missing a " character after the URL.
<li><a href="about-the-archive.html>About the Archive</a></li>
Thus, all HTML from that point until the next " character is considered part of the href attribute, and not rendered on the page - it just so happens that your #container div is directly after it.
Once you fix it, your div will appear red. This was not a problem with your CSS at all!
<li>About the Archive</li>
This is not the only problem in your source code. Make sure that you always watch out for basic typos such as this one.
In most text editors (even in JSFiddle), all of the code from where you miss a character is syntax-highlighted red to let you know that you've missed something and alert you to the problem. You can also use your web browser's debug tools to look at the underlying page structure and notice this.
Please check it.
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
#menu li:first-child{
margin-left:75px;
}
#font-face{
font-family: Bleeding Cowboys;
src: url(assets/Bleeding_Cowboys.ttf);
}
a:link{
color:purple;
text-decoration:none;
}
a:hover{
color: red;
text-decoration:none;
}
#header{
display:block;
margin: auto;
width: 60%;
}
#header-img{
float:left;
margin-left:150px;
}
#header:hover{
display:block;
margin:auto;
width:60%;
img:(url)
}
#column1{
width:300px;
height:auto;
float:left;
margin-right:30px;
margin-left:30px;
border:solid;
border-width:3px;
border-color:grey;
}
#melies-portrait{
width:300px;
}
div p {
padding:10px;
}
#column2{
width:300px;
height 600px;
float:left;
margin-right:30px;
}
#melies-2-image{
}
#column3{
width:300px;
height:600px;
float:left;
}
<div id "header">
<a href="index.html"><img id="header-img"; src="images/header-logo-950-purplelink.png"
onmouseover="this.src='images/header-logo-950-redhover.png'"
onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<ul id="menu">
<li>Inicio</li>
<li>Bio</li>
<li>Filmography</a></li>
<li>Articles</a></li>
<li>Merch</li>
<li>About the Archive</li>
</ul>
</div>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
You had some syntax errors in your html. Now this is working.
* {
box-sizing: border-box;
}
body{
width:1200px;
background-color:white;
}
p{
font-size: .7em;
font-family:helvecta;
}
#melies-header{
float:left;
width:40%;
}
#container{
width:1200px;
height:300px;
background-color:red;
overflow:auto;
}
.clear {
clear:both;
line-height:0;
}
#menu li{
padding-left:100px;
display:inline;
font-size: 1.7em;
font-family: Bleeding Cowboys;
}
<div id="header">
<a href="index.html"><img id="header-img" src="images/header-logo-950-purplelink.png" onmouseover="this.src='images/header-logo-950-redhover.png'" onmouseout="this.src='images/header-logo-950-purplelink.png'" />
</a>
</div>
<ul id="menu">
<li>Inicio</li>
<li>Bio</li>
<li>Filmography</li>
<li>Articles</li>
<li>Merch</li>
<li>About the Archive</li>
</ul>
<div id="container">
<div id="column1">
<img id="melies-portrait" src="images/george_melies.jpg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
<div id="column2">
<img id="melies-2-image" src="images/melies2.jpeg">
<p>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
<div id="column3">
<p> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</div>
</div>
I'm using CSS3's multi-column layout functionality, but am having trouble finding a way to horizontally center a div such that text wraps around it. Any help would be awesome, thanks!
Here's an idea of what I'm trying to do.
Im not really sure what you want but maybe this helps you ? here is the fiddle
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
.yourPic{
border:3px solid black;
height:60px;
margin-top:50%;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
<div class="yourPic">
picture
</div>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer
possim assum.
</div>
</body>
</html>
EDIT Another possibility to accpomplish that is with tables. (I prefer this solution)
Here you have an example in fiddle
i've the below html code
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-moz-column-count:2;
/* Firefox */
-webkit-column-count:2;
/* Safari and Chrome */
column-count:2;
-moz-column-gap:40px;
/* Firefox */
-webkit-column-gap:40px;
/* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff;
/* Firefox */
-webkit-column-rule:4px outset #ff00ff;
/* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
.newspaper1 {
-moz-column-count:3;
/* Firefox */
-webkit-column-count:3;
/* Safari and Chrome */
column-count:3;
-moz-column-gap:40px;
/* Firefox */
-webkit-column-gap:40px;
/* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff;
/* Firefox */
-webkit-column-rule:4px outset #ff00ff;
/* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p>
<div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
<div class="newspaper1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
http://jsfiddle.net/isherwood/29GHW/
here when i run it i get a 2 column layout, followed by 3 column. but here my problem is, in 3 column layout, i want the left column to take 80% of the width and the second column to take 20% of the width, please let me know how do i achieve this.
Thanks
I think that is not possible.
From here:
column-space-distribution
This property describes how to distribute space in the case where CWPB is smaller than the content width of the element.
And column-width-policy
This property describes how to interpret 'column-width'. The 'flexible' value indicates that the width of columns can be increased to fill all the available space. The 'strict' value indicates that 'column-width' is to be honored.
They are not implemented in the most of the browsers, and there is nothing specified about fixed percentage in the documentation.