Best 80% screen css magazine format liquid layout

HTML & CSS
1

Hi All, I am looking to design a variable, liquid, sized div, (nested?) magazine layout, that would include many columned snippets with links to full articles on inside pages. Possibly a static left and right columns that would hold ads and static information, Please be patient with me if my naivety is showing, I am somewhat new to css web design, in any case, I found these links in a different thread on Sitepoint. Once I have designed the site I will convert to a Wordpress Theme through a tutorial I found on another site.

"An easy way to do it, is just use already made layouts. Like these:
http://www.free-css.com/free-css-layouts/page1.php
http://csseasy.com/ "

Pls comment if I am not making any sense, perceived obstacles, or a better way than how I am approaching the project.

2

Well…what exactly do you want us to do? Say “congratulations” and be gone? (Sorry, that was a bit harsh)

Do you want us to explain how to do a multi-column layout or a magazine layout?

~TehYoyo

3

Hum…, yes, a bit harsh, What I would like feedback on is what I am trying to do is feasible, liquid css within nested divs, that would have dynamic layouts on different pages within those nested center div’s, with two static, horizontal sized outside columns between fixed header’s and footers, before I start trying to bring this to fruition I would just like feedback if this is a reasonable approach.

4

Not quite sure what you mean by ‘nested’. With the assumption that this means ‘inline’ (which is what I thought it means - I’ve heard the word before, but…yeah. whatever), I’ll proceed.

So pretty much what you seem to want is:

[list][]A header and a footer (good idea! major brownie points for that! :lol:) - Is this like position:fixed; or is it a fixed-width?
[]two divs of fluid width (height isn’t a big deal)
[]stuff inside of the divs w/ fluid width
[]outside columns with fixed widths (in pixels)
[/list]

The main part that would be tricky is the outside columns.

~TehYoyo

5

TeyYoyo, you are right, everything is behaving properly except my right fixed column, I have nested liquid div’s iniside the parent left div and they are behaving properly, the right "fixed div has now moved out of the “mid” parent div and the text flows below the footer, any help would be appreciated.

<!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>liquidleft-fixedright-nested</title>
<style type='text/css'>
body {
   padding: 0px;
   margin: 0px;
}
.wrapper{
   width: 95%;
   margin: 0 auto;
}
.header{
	height:125px;
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.wrapleft{
   float: left;
   width: 100%;
   background-color: #cfcfcf
}
.left{
   margin-right: 250px;
   background-color: #afeeee;
}
.right{
   float: right;
   width: 240px;
   margin-left: -240px;
   background-color: #98fb98;
}
.footer{
	height:75px;
   float: left;
   width: 100%;
   background-color: #f4f4f4;
}

.inmask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #b4d2f7
}
.incolmid{
   position: relative;
   width: 100%;
   right: 33%;
   background-color: #b4d2f7
}
.incolleft{
   position: relative;
   width: 100%;
   right: 33%;
   background-color: #b4d2f7
}
.incol1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 32%;
   left: 100.5%;
   background-color: #99ccff
}
.incol2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 33.5%;
   left: 34%;
   background-color: #99ccff
}
.incol3{
   position: relative;
   overflow: hidden;
   float: left;
   width: 32.5%;
   left: 68%;
   background-color: #99ccff
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        header
    </div>
    <div class="wrapleft">
        <div class="left">

			<div class="inmask">
        <div class="incolmid">
    <div class="incolleft">
        <div class="incol1">
           in mid
        </div>
        <div class="incol2">
           in left
        </div>
        <div class="incol3">
           in right
        </div>
    </div>
    </div>


        </div>
    </div>
    <div class="right">
            right fixed
    </div>
    <div class="footer">
        footer
    </div>
</div></div>
</body>
</html>
6

Hello :). The .left comes first before .right in the HTML. .left isn’t floated so of course it can’t have .right up next to it :). Floats need to come first in the HTML source order. Never forget that. So switch up .right so that it comes before .left in the HTML. Should patch things up.

I don’t know why you have the footer floated as well, but generally you want to clear footers instead of floating them, to avoid any float snag problems :).

7

Ryan, first of all, brilliant, much appreciated. Now, as a CSS wannabe, I cannot take credit for the code, as much as I would like to. I would have to crack open that calculus book that is under that unordered pile behind that locked door, (it is still in it’s plastic). For noobs, and veterans alike that are not in the loop, looking for quick coding tool for their theme, I found this site, http://www.pagecolumn.com/ beyond the touch-ups Ryan suggested, its gold, and a great learning tool to boot.

8

Hi all, I am close but I am looking for some help with some code, I have a 4 column layout between “fixed” header and footer, what I would like to do for all outer div containers is have them flow to the bottom of the viewport >> “centwrap” “leftwrap” “rightwrap” “inright” while the “inner div’s” are behaving as I want, I am also trying to have div class=“right” remain fixed and not scroll while the dynamic liquid div’s do in the viewport no matter the screen resolution. I have tried moving the div class=“right” outside the relative flow but have been unable to get the div to behave, hopefully I am making sense. Please see 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>4 Column 3 liquid | 1 fixed</title>
<style type='text/css'>
html, body {
height: 100%;
}
.header, .footer {
	position:fixed;
	width:100%;
	left:0;
	top:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
   padding: 0px;
   margin: 0px;
}
.wrapper{
   width: 98%;
   margin: 0 auto;
}
.header{
	height:75px;
   float: left;
   width: 100%;
   background-color: #f4f4f4;
   -webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
	z-index:999;
}
.footer {
	bottom: 0;
	top: auto;
	height: 60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #99CCFF;
	font-size: 10px;
   clear:both;
   background-color: #f4f4f4;
  -webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0px -8px 6px -6px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000');

   z-index:999;
}
.wrapleft{
   float: left;
   width: 100%;
   margin-top:75px;
   margin-bottom:65px;
}
.left{
   margin-right: 250px;
   background-color: #afeeee;
}
.right{
   float: right;
   width: 220px;
   margin-left: -240px;
   background-color: #ABA5F2;
   z-index:999;
   padding:10px;
}
.inmask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #fff;
}
.incolmid{
   position: relative;
   width: 100%;
   right: 33%;
   background-color: #b4d2f7
}
.incolleft{
   position: relative;
   width: 100%;
   right: 33%;
   background-color: #b4d2f7
}
.centwrap{
   position: relative;
   margin-bottom:70px;
   overflow: hidden;
   float: left;
   width: 32%;
   height:100%;
   left: 100.5%;
   background-color: #FEEBC9;
}
.leftwrap{
	position: relative;
	overflow: hidden;
	float: left;
	width: 33.5%;
	left: 34%;
	background-color: #F4CFCF;
	}
.rightwrap{
	position: relative;
	overflow: hidden;
	float: left;
	width: 32.5%;
	left: 68%;
	background-color: #C5D1C1;
}
.inleft {
	margin: 10px;
	background-color: #D24E54;
	padding: 10px;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	z-index: 200;
}
.inmid {
	margin: 10px;
	background-color: #F1D347;
	padding: 10px;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
}
.inright {
	margin: 10px;
	background-color: #9FCD93;
	padding: 10px;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	z-index: 200;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        header
    </div>
    <div class="wrapleft">
    
    <div class="right">
        right fixed</div> 
    
        <div class="left">

			<div class="inmask">
        <div class="incolmid">
    <div class="incolleft">
        <div class="centwrap">
           <div class="inmid">in mid<br />
			   Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et iriure utamur singulis. Mucius essent omittam cu has, dico<br />
			   <br />
			   appellantur pro et, cu vis quot nemore. Ut mel nonumy accusamus dmodus pertinacia sententiae, quo dicant referrentur<br />
			   </div>
			   <div class="inmid">
&nbsp;consequuntur at. In cum dicta veritus periculis, dicit constituam liberavisse an vis. Ne sed simul decore dolorum.

Elaboraret interpretaris ei eos, ea solet ornatus adipisci pri. Ut debitis inciderint pro, ei vel enim pertinax, eum nisl omnium rationibus eu. Cum facilis voluptaria te. Mel ne enim sonet sententiae, mea eu ipsum nulla. Cu per vero noster. Utroque definitiones vix id.

Augue invenire <br />
				   <br />
				   postulant te vim, aperiam forensibus eos at. Ad omnium luptatum vim, appetere petentium ne sit. Dicta regione officiis in cum, vel et dicat splendide, sed vide ullum invenire te. No utinam debitis denique est, saperet accusam concludaturque ad est, ex aeque dolores intellegebat ius. At ius malis alienum ocurreret, ad vix vivendo vituperata.

Mei ne aeque facete moderatius, mei an odio pericula. Quo altera abhorreant ut, diam voluptatum id his, mea dicant fuisset ocurreret at. In dictas accusamus imperdiet eam, eos ne nobis dignissim. Suas disputationi his te, te dolorum vulputate mei.
</div>
        </div>
        <div class="leftwrap">
           <div class="inleft">in left<br />
			  Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et iriure
			   <br />
			   <br />
			   utamur singulis. Mucius essent omittam cu has, dico

appellantur pro et, cu vis quot nemore. Ut mel nonumy accusamus dissentiunt. Id nec doming elaboraret. Et vim falli quando tritani, ne scripta omittantur vituperatoribus mel. Quidam hendrerit eu pri, no pri modus pertinacia sententiae, quo dicant referrentur</div>
        <div class="inleft">in left<br />
			  Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et iriure
			   <br />
			   <br />
			   utamur singulis. Mucius essent omittam cu has, dico

appellantur pro et, cu vis quot nemore. Ut mel nonumy accusamus dissentiunt. Id nec doming elaboraret. Et vim falli quando tritani, ne scripta omittantur vituperatoribus mel. Quidam hendrerit eu pri, no pri modus pertinacia sententiae, quo dicant referrentur</div>

        </div> 
        <div class="rightwrap">
           <div class="inright">in right<br />
								 Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et iriure
			   <br />
			   <br />
			   utamur singulis. Mucius essent omittam cu has, </div>
			   <div class="inright">in right<br />
								 Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et iriure
			   <br />
			   <br />
			   utamur singulis. Mucius essent omittam cu has, </div>

        </div> 
    </div> 
    </div>
            
            
        </div>
    </div>
    
   
</div><div class="footer">
        footer
    </div></div>
 
</body>
</html>
9

Too many wrappers :slight_smile:

I’d do it more simply like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height: 100%;
	margin:0;
	padding:0;
}
p {
	padding:5px;
	margin:0 0 1em
}
.header, .footer {
	position:fixed;
	width:100%;
	left:0;
	top:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	padding: 0px;
	margin: 0px;
}
.wrapper {
	width: 98%;
	margin: 0 auto;
	position:relative;
	overflow:hidden;	
	min-height:100%;
}
* html .wrapper{height:100%}
.header {
	height:75px;
	float: left;
	width: 100%;
	background-color: #f4f4f4;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
	z-index:999;
}
.footer {
	bottom: 0;
	top: auto;
	height: 60px;
	font-family: Arial, Helvetica, sans-serif;
	color: #99CCFF;
	font-size: 10px;
	clear:both;
	background-color: #f4f4f4;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0px -8px 6px -6px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000');
	z-index:999;
}
.col {
	float:left;
	width:24%;
	margin:0 1% 0 0;
	display:inline;
	padding:75px 0;
	overflow:hidden;
	position:relative;
	z-index:2;
}
.column4 {
	position:fixed;
	right:0;
	top:75px;
	bottom:60px;
	overflow:auto;
	padding:0;
	background:green;
}
.bg {
	position:absolute;
	top:0;
	bottom:0;
	width:24%;
	z-index:1;
}
.bg1 {background:#f00;left:0}
.bg2 {background:#6fc;left:25%}
.bg3 {background:#fcf;left:50%}
</style>
</head>

<body>
<div class="wrapper">
		<div class="header"> header </div>
		<div class="col column1">
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p><p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
		</div>
		<div class="col column2">
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
		</div>
		<div class="col column3">
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
				<p> Lorem ipsum dolor sit amet, quo voluptua ponderum an, vis lorem putant impetus ea, soluta facilis intellegebat ad vis. Vel movet vocibus sensibus eu, errem forensibus ea quo. Primis suavitate eu pri, qui et </p>
		</div>
		<div class="col column4">
				<p>Fixed</p>
		</div>
		<div class="footer"> footer </div>
		<div class="bg bg1"></div>
		<div class="bg bg2"></div>
		<div class="bg bg3"></div>
</div>
</body>
</html>

(Not ie6 friendly)

It uses my absolute overlay technique for the full length column colours.

10

Hi Paul, thanks for your help, in just a couple of posts, and with the help of the community I have learned so much, with slight tweaks I have been able to bring to fruition my design,
Thanks