Vertical expendable and unbreakable css design without using tables

Mimoun · #1 (**permalink**) 07-01-2005, 11:28 PM

Here I will explain how to make a vertical expandable and unbreakable css design without using tables.

We will be using the CSS attribute float.
A div layer can float left or right.

We will be using a 2 column design but you can do this with a 3,4 and more column too by just nesting one div in another.
first create the framework for the HTML file

PHP 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>Vertical expendable and unbreakable CSS design </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="central">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="content">
        <div id="leftside">
            <p>Test text test 1 2 3</p>
            <p>Test text test 1 2 3</p>
        </div>
        <div id="rightside">
            <p>Test text test 1 2 3</p>
            <p>Test text test 1 2 3</p>
            <p>Test text test 1 2 3</p>
        </div>
        <div id="footer">footer</div>
    </div>
</div>
</body>
</html>

The first thing to make on your CSS file will be the to all standard settings for all elements on 0px.

HTML Code:

* {margin:0px;padding:0px;top:0px;left:0px;}

than give your body a background color:

HTML Code:

body{background-color:#CCCCCC;}

Now we will make a div that will be in the center of the screen.
It is important that you give this div the same background as your column that will be used on the left side and a background image that will be used for the column on the right side.

HTML Code:

#central{
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 780px;
	text-align: left;
	background-color: #FFFFFF;
	background-image: url(background.gif);
	background-repeat: repeat-y;
	background-position: right top;
}

Now make a header:

HTML Code:

 #header{
	background-color: #26618d;
	height: 100px;
	width: 780px;
	left: 0px;
	top: 0px;
}

And the leftside with a float left:

HTML Code:

#leftside{
	float: left;
	width: 460px;
	background-color: #fff;
}

and the rightside it's important that you set the backgound to transparnt as we will be using the background from the #central DIV

HTML Code:

#rightside{
	float: right;
	width: 316px;
	background-color: transparent;
}

And the footer very important set clear to both:

HTML Code:

#footer{
	clear: both;
	background-color: #88a905;
	position: relative;
	height: 30px;
}

That's all you can download the code in the attachment.
If you have downloaded it try to add a lot of content in one of the columns and you will see that the design does not break but expands.

christiest · #2 (**permalink**) 07-11-2005, 12:52 PM

Hello Mimoun,

I've downloaded your code for creating an unbreakable css template and I'm trying to add another central column but failing miserably.
Could you possibly add another column and send me example code please.
Also, I'm planning on having a nested menu on the left hand column which will populate the central column with the 3rd(right hand column) being used for helpful notes on the main subject.
I would be grateful if you could show me how I can i) direct info to the central column after choosing an option from the menu and ii) directing the helpful notes to the right hand side column.
I'd apprectate any help you can give on this matter.
Thanks,
Stephen

Mimoun · #3 (**permalink**) 07-11-2005, 01:04 PM

I will create a new one for you with 3 columns.

You direct info into a column by creating a new html file, put the info in the column and linking to it from the mainpage.
This is the code for using links.

Code:

<a href="http://www.example.com/mypage.html">click here for info</a>

Mimoun · #4 (**permalink**) 07-11-2005, 02:51 PM

I have made the 3 columns layout for you.
It's important if you change the colors or width to change the background images color or width.

christiest · #5 (**permalink**) 07-11-2005, 03:04 PM

Thanks for the example Mimoun.
In your code the links from the left hand menu open the target in a new browser. Is there any way of opening the target in the middle column? I can do this in frames quite easily but I'd like to use CSS to handle the template. Is it a case of having the target as
<a href="http://www.example.com/mypage.html" "target=rightside">click here for info</a>

Mimoun · #6 (**permalink**) 07-11-2005, 04:15 PM

To open the link in the same page use this:

Code:

<a href="http://www.example.com" target="_self">link</a>

There is no need to use any frames, just copy the page to make any new page.
Using frames was good in the early days of the internet, because the internet was very slow.
Now you don't need to use it anymore, because of these 3 reasons:
1 - The internet is much faster now.
2 - You're using an external CSS file which makes your pages very small.
3 - It's not good for search engines they get lost in your frames.

christiest · #7 (**permalink**) 07-12-2005, 10:10 AM

Mimoun, the url link <a href="http://www.example.com" target="_self">link</a> from the left hand menu is still not opening up in the centre column. But maybe this is not possible...or practical. Also I noticed in the css file that you reference a #wrapper and also use background images. Can you explain why.....or are you just demonstrating how they can be used?

Mimoun · #8 (**permalink**) 07-12-2005, 10:37 AM

Opening something in the center is not practical, but possible you could use inline frames, but I recommend you not to use them.
It's better to open new pages for different content.

The #wrapper and background images are needed to make the background of every column appear continuous while in fact they’re not.
If you don't need the background to appear continuous you can remove the background images.

Check the design back when you have removed the background images and you will see why I used it.

christiest · #9 (**permalink**) 07-12-2005, 01:56 PM

Mimoun, what I'm looking to create is a static menu on the left which populates both the centre and right hand columns with data depending on what menu item was clicked on. I can understand that if one of those links pointed to an external site it would open another browser or fill the browser already open but for 'internal' links I would hope to direct this data into the middle and right hand columns. Actually what you use on this site would be almost exactly what I'm after as you have a 'static' area on top which directs data into the main area below. You with me?

Mimoun · #10 (**permalink**) 07-12-2005, 02:13 PM

If that's what you want you will have to use an inline frame.
On this site we don't use any frames.
It looks like the header is static but it's a dynamic header it loads so fast that it almost looks like the header didn't reload but it's a new page with a new header.

I will see if I can make a new one for you by tomorrow with more pages and one with inline frames.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode