Multiple ROW css layout

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple ROW css layout

css layout rows

Protospleen

6:20 pm on Apr 20, 2009 (gmt 0)

Hi,

I'm battling to make a table-like layout using CSS. I need a 'table' with 4(or more!) multiple-column rows. If that makes any sense..

This is what I'm aiming at... basically :

Ś----------------Ś
Ś header Ś
Ś----------------Ś
Ś 50% Ś 50% Ś
Ś----------------Ś
Ś25%Ś 75% Ś
Ś----------------Ś
Ś33% Ś33%Ś 33%Ś
Ś----------------Ś
Ś footer Ś
Ś----------------Ś

Crude...I know...sorry.

I seem to be able to get the header, first row and footer ... I am using float:left and :right to keep them both in position, and clear:both for the footer...

However...I can't seem to "insert" that 2nd or 3rd row. And as you can see from my expertly crafted example(again - apologies), I would like to be able to vary the column sizes accross all the rows (unique to each row).

Thanks to anyone who can provide any insight....and a HUGE thank you if anyone can provide the basic skeleton CSS and Style code so that I can learn how the logic works.

I would be immensely grateful..

CSS_Kidd

6:36 pm on Apr 20, 2009 (gmt 0)

You may have to design like you would an actual table. Create a basic class for each row then insert the internal divs styled with the floats.

like this.

<div class="basic_row">
//header info or header div
</div>

<div class="basic_row">
//footer info or footer div
</div>

</div>

I hope that clear.

Protospleen

8:01 pm on Apr 20, 2009 (gmt 0)

Thanks for the reply...but it's the "styled with the floats" part that I don't understand... could you show me your css statements pls!

I don't understand how the elements are defined to a certain row.

Thanks..

CSS_Kidd

9:49 pm on Apr 20, 2009 (gmt 0)

Well without doing the whole thing for you... Start with the code listed below and apply it the way you want. Then post your code up here and we can work from there.

CSS

* {
margin: 0px;
padding: 0px;
}
body {
font: 10px Arial, Helvetica, sans-serif;
background: #CCCCCC;
}
#main_container {
width: 600px;
margin-top: 20px;
margin-left: 20px;
border: 1px solid #000000;
}
.basic_row {
clear: both;
position: relative;
border: 1px solid #990000;
}
.two_col {
float: left;
width: 50%;
background: #999933;
}
.clear_float {
font-size: 0px;
line-height: 0px;
clear: both;
}

HTML

<body>

<div id="main_container">
<div class="basic_row">
<div class="two_col">Content for class "two_col" Goes Here</div>
<div class="two_col">Content for class "two_col" Goes Here</div>
<div class="clear_float"></div>
</div>
</div>
</body>

Protospleen

6:52 am on Apr 21, 2009 (gmt 0)

Thanks for the replies CSSkid, much appreciated... however, your example shows only a single row, which I can already do. I need to know how to add MULTIPLE rows now. :(

Ok... easiest might be to just give you the code I am working with. I've managed to add a 2nd row, and size the columns differently, but it's not working 100% in EI (only in FF).

CSS: (external)
----

body,html
{
margin:0;
padding:0;
background:#000000;
color:#000;
text-align:center; /* Table Center alignment for IE */
}

div.container
{
width:750px; /*<<<< SET 'TABLE' SIZE HERE */
margin:0 auto; /* Table Center Alignment for FF */
background: #2D3F80;
}

/* -------------------------------------------HEADER */

div.header1
{
height:100px;
color:white;
background-color:gray;
clear:left;
}

h1.header1
{
padding:0;
margin:0;
}

div.header2
{
height:50px;
color:white;
background-color:gray;
clear:left;
}

h1.header2
{
padding:0;
margin:0;
}

/* --------------------------------------------ROW1 */

div.row1left
{
float:left;
background-color:#4F41AE;
width:375px;
height:200px;

}

div.row1right
{
float:left;
background-color:green;
width:375px;
height:200px;

}

/* --------------------------------------------ROW2 */

div.row2left
{
float:left;
background-color:blue;
width:550px;
height:150px;
}

div.row2right
{
float:left;
background-color:brown;
width:200px;
height:150px;
}

/* -----------------------------------------FOOTER */

div.footer
{
color:white;
background-color:gray;
clear:left;
}

HTML:
-----
<html>
<head>
<link rel="stylesheet" type="text/css" href="Glob_Style.css" />
</head>

<body>

<div class="container">

<div class="header1">
<h1 class="header1">Header1</h1>
</div>
<div class="header2">
<h1 class="header2">Header2</h1>
</div>

<div class="row1left">
<p>Left 375pix</p>
</div>

<div class="row1right">
<p>right 375pix</p>
</div>

<div class="row2left">
<p>Left 550pix</p>
</div>

<div class="row2right">
<p>Right 200pix</p>
</div>

<div class="footer">Footer</div>
</div>

</body>
</html>

OK..this seems to work ok in FF...but in IE it's not right. I just get the feeling that I am going about this the wrong way, which is why I have posted this topic.

Thanks in advance to anyone who can enlighten me.

CSS_Kidd

1:13 pm on Apr 21, 2009 (gmt 0)

The .basic_row that I set up is to be used as a container for each row. So you would just simply repeat that one but change the content for each row.

Basically your rows would more or less be set up as such...

<div class="basic_row">

<div class="row1left">
<p>Left 375pix</p>
</div>

<div class="row1right">
<p>right 375pix</p>
</div>
</div>

<div class="basic_row">

<div class="row2left">
<p>Left 550pix</p>
</div>

<div class="row2right">
<p>Right 200pix</p>
</div>
</div>

And repeat for each row. This way your floats are contained. All you need to do is to create a rule for .basic_row like I did. Also create a clear float class like I did as well and place it before the </div> for the .basic_row div. Keep your container and header the way they are. See how that works.

Protospleen

1:46 pm on Apr 21, 2009 (gmt 0)

Thanks man... I seem to have the rows working ok now with different width specified for the columns.

Now...however...I have noticed that the text is displayed at different heights from IE to FF... :( *sigh*

The code is the same as I pasted above... could anyone help me understand why IE puts the text right at the top of the div element...but in FF there is some padding at the top, and the text shows a bit lower!?

This doesn't happen in the header sections, only in the different rows! :(

Thanks..

CSS_Kidd

1:51 pm on Apr 21, 2009 (gmt 0)

I am reformatting your code with some notes. it will include an IE fix for that. Different browsers render elements differently. Just give me a few and I will post it.

Protospleen

1:56 pm on Apr 21, 2009 (gmt 0)

Thanks man - that would be pretty awesome :)

I'm actually going a bit insane with all this... just when I think I've got it, I find something that doesn't work..

CSS_Kidd

2:49 pm on Apr 21, 2009 (gmt 0)

Ok. So here is the basic layout that I came up with. Nothing to fancy, just a simple page. I tested in all browsers so it is solid. I put some notes in there for you. Just stick with the basic concept and go from there. Then let us see it when youre done. Or if you have any issues let us know. Remember this is just one way to do it. Others may approach it a different way. Its all about what youre used to or what you get used to when you are styling. I always say there is no right or wrong way as long as it works and it is solid!

Anywho Heres the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--

/*Fix to even out differently rendered spacing of elements for all browsers. You will have to set spacing for elements as needed i.e. <p>. this also This also makes it possible to give divs left and right auto margins in order to center in all browsers.*/
* {
margin: 0px;
padding: 0px;
}
body {
font: 10px Arial, Helvetica, sans-serif;
background: #000000;
color:#000000;
/*No Text Align Needed to center container div for IE if you use the * rule listed above.*/
}

/* Gave both headers different names to easily differentiate the two. Also made them IDs instead of classes because they are only used once on each page. I took them out of the container and gave them auto margins for centering on the page and a clear both value.*/
#top_header {
height:100px;
width:750px;
margin-left:auto;
margin-right:auto;
color:white;
background-color:#808080;
clear:both;
}
#top_header h1 {
/*There are many ways to style h tags. I do it this way so I dont have to remember witch one is the style I need. This way I know that the h1 tag in this div looks like this and the h1 tag in the other div looks like that. but others have the own preferences.*/
}
#sub_header {
height:50px;
width:750px;
margin-left:auto;
margin-right:auto;
color:white;
background-color:#808080;
clear:both;
}
#sub_header h1{
/*There are many ways to style h tags. I do it this way so I dont have to remember witch one is the style I need ("was it the h1, h2 or h4?"). This way I know that the h1 tag in this div looks like this and the h1 tag in the other div looks like that. but others have the own preferences.*/
}

/*Used to hold all basic_row containers*/
#container {
width: 750px;
margin-left: auto;
margin-right: auto;
background:#2D3F80;
}

/*Used to hold the different column floats*/
.basic_row {
clear: both;
}

/*Depending on what you want to do you can style these anyway you want as long as their combined width stays with in that 750px range. Dont forget to account for padding, margins and borders. Either create one class and use it twice (or thrice) or create a style for each individual column (cell really) as you did. I did an example of both for the two column rows.*/
.two_col {
float: left;
background:#4F41AE;
width:375px;
height:200px;
}
.two_col_left
{
float: left;
background:#4F41AE;
width:375px;
height:200px;
}
.two_col_right
{
float: left;
background:#008000;
width:375px;
height:200px;
}
/*Used to clear all floats on in a row. Noticed it is placed before the closing tag of the basic_row div.*/
.clear_float {
font-size: 0px;
line-height: 0px;
clear: both;
}

/*Footer is set up the same as the header. but will be placed under the container div*/
#footer {
color:white;
clear:both;
background:#808080;
height: 75px;
width: 750px;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>

<body>

<div id="top_header">
<h1>TOP HEADER</h1>
</div>

<div id="sub_header">
<h1>SUB HEADER</h1>
</div>

<div class="basic_row">

<div class="two_col">COLUMN LEFT USING SAME CLASS</div>
<div class="two_col" style="background:#008000;">COLUMN RIGHT USING SAME CLASS WITH INLINE STYLE FOR BACKGROUND COLOR</div>
<div class="clear_float"></div>
</div>

<div class="basic_row">

<div class="two_col_left">LEFT COLUMN USING DIFFERENT CLASS</div>
<div class="two_col_right">RIGHT COLUMN USING DIFFERENT CLASS</div>
<div class="clear_float"></div>
</div>

</div>

<div id="footer">FOOTER</div>

</body>
</html>

Protospleen

3:58 pm on Apr 21, 2009 (gmt 0)

First off....THANK YOU!

Your coding style and layout is great...really helped me visualise the flow and fill in the gaps in my CSS understanding.

It's working great, and I will definately keep you posted. :)

Protospleen

4:01 pm on Apr 21, 2009 (gmt 0)

Sorry...one thing I don't understand... the H1 headers display completely different sizes from IE to FF, Am I missing something?

(thanks for your patience man)

CSS_Kidd

4:12 pm on Apr 21, 2009 (gmt 0)

H1 tags will always display somewhat different in each browser... so I useually style them with a font size just in case...Example:

#top_header h1 {
font-size:24px;
}

Protospleen

4:46 pm on Apr 21, 2009 (gmt 0)

Legend :) Thanks mate.

As you have no doubt guessed...I'm quite new to this!