SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi column - split row layout... possible in CSS?

    OK, I've been playing with the CSS for awhile, and while I am getting close, I know there must be an easier way. Basically I am trying to get a layout that was previously done using tables, rewritten to properly utilize CSS. I'm beginning to wonder, if maybe at least a small part of this should remain as a table?

    It's a navigation type of page, header and footer (no problems there as they span the entire page width). But the center part, I am attempting to get a narrow left column (for some icon based "master" navigation). And the content to the right of that would be in a 3x2 (different heights for all 3 columns) layout. I'm still getting myself comfortable with CSS but figured out that the only way to really get my head fully into it, is try to get things like this to function.

    Would I be wrong to use a table in the right hand side of the content section? (the 3x2 area) or is there a way to get CSS to nicely handle all this.

    Here is basically what I have at the moment:

    Single div for the icon navigation floated left followed by 6 independent div's, all floated left, with their width's defined so that they stack 3 on top of each other.

    Any suggestions feedback would be greatly appreciated!

    Greg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by GHicks View Post
    if maybe at least a small part of this should remain as a table? ... Would I be wrong to use a table in the right hand side of the content section? (the 3x2 area) or is there a way to get CSS to nicely handle all this.
    No, none of this should be a table. Tables are for tabular data. Period.

    I'm not quite clear on the layout you want, but if you could post a screen shot, with a description of how the sections should behave, we can suggest how to code it. If you have a bunch of divs as part of a sidebar, make sure to wrap them all in one container that is floated, rther than trying to float all the individual sidebar elements.

  3. #3
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NavSample.gif

    That is the basics of it, header and footer are pretty straightforward, it is the section between. And the SubMenu sections (1A, 2A, 1B, 2B, 3A, and 3B) can all be fixed width's, but their lengths will float based on the number of navigation items held in each section. And to be completely honest, at the moment, sections 2B and 3B are actually empty, but thought I would leave it setup so they could be utilized in the future without having to reconfigure.

    Let me know if you have any other questions.

    Greg

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I am trying to get a layout that was previously done using tables, rewritten to properly utilize CSS.
    The problem with this approach is that you are basically copying a table layout instead of starting from scratch using css. It is better to create a new design with different dynamics that suit css rather than tables.

    Although your wireframe approach gives you an idea of the layout it misses out the most important part of the process which is content. Creating little blocks all over the place does not take into account what content you may have in those sections and in the end you end up squeezing content into little blocks when in fact its the content that should dictate how the end result should look - not the other way around.

    In reality a mixture of those approaches is required but content should be the priority. Design without content is just a drawing - not a website.

    Looking at your wireframe it is basically just 4 separate columns floated left. In each column you can stack as much stuff as you need so the icon nav is the first column; 1a and 2 a would be stacked in the second column; 1b and 2B would be stacked in the third column and so on. I would float the nav column to the left and then float a main column to the right. The main column would then hold your subheader and three more floated columns as mentioned above.

    Where CSS will differ from tables is that the end of all those columns will be in a different place and not all automatically align at the bottom. If its a fixed with you can imitate this affect with background images (faux columns) and other clever tricks but the best approach is to design without needing these tricks if you can and just let the columns finish where they will. After all its the content that should dictate where things finish and not the design.

    For ie8+ you could use the display:table properties and create the same equalising behaviour that tables have if this is a pre-requisite of your design.

    Here's a quick mock up:

    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">
    p, h1, h2, h3, h4, h5, h6 {
    	margin:0 0 1em;
    	padding:5px;
    }
    #outer {
    	width:960px;
    	margin:auto;
    	border:1px solid #000;
    	background:#eee;/* left column colour*/
    }
    #header {
    	background:#fcf;
    	padding:1px 0;
    	border-bottom:1px solid #000;
    }
    #main {
    	float:right;
    	width:720px;
    	border-left:1px solid #000;/* slides on top of left nav border */
    }
    #sidebar {
    	float:left;
    	width:239px;
    	border-right:1px solid #000;/* slides on top of #main border */
    	margin:0 -1px 0 0;/* mmke border overlap #main t provide full length */
    }
    #sub {
    	background:red;
    	min-height:100px;
    	padding:1px 0;/* stop margin collapse */
    }
    .submain {
    	display:table;/* ie8+ only*/
    	width:100%;
    }
    .column {
    	display:table-cell;
    	table-layout:fxed;
    	padding:0 0 1px;
    }
    .col1 { background:#ffc }/* Full length column colours ie8+ */
    .col2 {
    	background:#ffc000;/* Full length column colours ie8+ */
    	border-left:1px solid #000;
    	border-right:1px solid #000
    }
    .col3 { background:#feff00 }/* Full length column colours ie8+ */
    .coltop1 {
    	padding:1px 0;
    	background:teal;
    	border-bottom:1px solid #000
    }/* column top colurs*/
    .coltop2 {
    	padding:1px 0;
    	background:blue;
    	border-bottom:1px solid #000
    }/* column top colurs*/
    .coltop3 {
    	padding:1px 0;
    	background:green;
    	border-bottom:1px solid #000
    }/* column top colurs*/
    #footer {
    	clear:both;
    	width:100%;
    	background:blue;
    	color:#fff;
    	padding:1px 0;
    	border-top:1px solid #000
    }
    </style>
    
    <!--[if lte IE 7]>
    <style type="text/css">
    .column{float:left;width:239px}
    </style>
    <![endif]-->
    </head>
    
    <body>
    <div id="outer">
    		<div id="header">
    				<h1>Header</h1>
    		</div>
    		<div id="main">
    				<div id="sub">
    						<h2>Subheader</h2>
    				</div>
    				<div class="submain">
    						<div class="column col1">
    								<div class="coltop1">
    										<p>column 1</p>
    										<p>column 1</p>
    								</div>
    								<p>Sub column content</p>
    						</div>
    						<div class="column col2">
    								<div class="coltop2">
    										<p>column 2</p>
    										<p>column 2</p>
    										<p>column 2</p>
    										<p>column 2</p>
    								</div>
    								<p>column 2</p>
    								<p>column 2</p>
    								<p>column 2</p>
    								<p>column 2</p>
    						</div>
    						<div class="column col3">
    								<div class="coltop3">
    										<p>column 3</p>
    										<p>column 3</p>
    								</div>
    								<p>column 3</p>
    						</div>
    				</div>
    		</div>
    		<div id="sidebar">
    				<h3>Sidebar</h3>
    		</div>
    		<div id="footer">
    				<p>footer</p>
    		</div>
    </div>
    </body>
    </html>
    IE7 and under just get normal columns but no equalising behaviour.

  5. #5
    SitePoint Zealot GHicks's Avatar
    Join Date
    Oct 2003
    Location
    Prescott Valley, Arizona, United States
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's perfect! And thank you for the education, what you said makes a LOT of sense and I will keep that in mind as I continue to advance my skills. Since this is for a business application and not a public website, I do have some browser control and can dictate that a particular browser be used. One item I was dealing with is that with the re-write they want to try to make it as transparent to the employees as possible that it has changed, as they have learned from many past experiences, change brings confusion. Even something as simple as a menu option being moved to a slightly new location makes employees become confused.

    But that's a HUGE topic for another forum! (-:

    Greg


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
  •