SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best 80% screen css magazine format liquid layout

    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. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tizak View Post
    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.
    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:

    • A header and a footer (good idea! major brownie points for that! ) - 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)


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

    ~TehYoyo

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    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>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>
    Last edited by TechnoBear; Apr 1, 2012 at 06:31. Reason: Added code tags

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,271
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Too many wrappers

    I'd do it more simply like this:

    Code:
    <!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. #10
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

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