Tom
Vista Tom
Vistatom
Registered User
185 posts
Take a look at the open from layouts option on the file menu in CC2008 HTML Editor. These are great examples of validated css to create various layouts. A good starting place. These were originally available at http://blog.html.it/layoutgala/ but having them internally available in the editor is great. You can read more about them at the above web site.
Tom
Tom
sstovert@satx.rr.com
Guest
5,410 posts
Here is an example of a 3 column page. As far as link to change just a column - that has to be done with either frame sets or by using javascript/css to display or hide a div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nested Divs</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#wrapper {
position:relative;
width: 750px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#Main {
position:relative;
width: 750px;
height: 500px;
background-color: white;
}
#left {
position:absolute;
top: 0px;
left: 0px;
width: 250px;
height: 500px;
background-color: red;
}
#center {
position:absolute;
top: 0px;
left: 250px;
width: 250px;
height: 500px;
background-color: yellow;
}
#right {
position:absolute;
top: 0px;
left: 500px;
width: 250px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="left">
left
</div>
<div id="center">
center
</div>
<div id="right">
right
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nested Divs</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#wrapper {
position:relative;
width: 750px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#Main {
position:relative;
width: 750px;
height: 500px;
background-color: white;
}
#left {
position:absolute;
top: 0px;
left: 0px;
width: 250px;
height: 500px;
background-color: red;
}
#center {
position:absolute;
top: 0px;
left: 250px;
width: 250px;
height: 500px;
background-color: yellow;
}
#right {
position:absolute;
top: 0px;
left: 500px;
width: 250px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="left">
left
</div>
<div id="center">
center
</div>
<div id="right">
right
</div>
</div>
</div>
</body>
</html>
CoffeeCup... Yeah, they are the best!
BillR
Ambassador
3,144 posts
jds41979 wrote:
Could some of you experts explain how to create a 3 column page using css and show code examples. Nothing I have seen explains this. If possible could you have a button link to another page in the same window changing only the middle column.
Thanks if you can help.
Could some of you experts explain how to create a 3 column page using css and show code examples. Nothing I have seen explains this. If possible could you have a button link to another page in the same window changing only the middle column.
Thanks if you can help.
There are multiple ways to create a three column layout. Tom used absolute positioning, and I would tend to use a float method. You can see three columns on a site I created at Brighter Day Charities (use the link below). The CSS for that would be:
<style type="text/css">
body {
min-width: 770px;
margin-top: 0px;
}
#left {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 235px;
align:center;
}
#center {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 235px;
align:center;
}
#right {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 235px;
align:center;
}
</style>
body {
min-width: 770px;
margin-top: 0px;
}
#left {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 235px;
align:center;
}
#center {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 235px;
align:center;
}
#right {
float: left;
margin-left: 5px;
margin-right: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
width: 235px;
align:center;
}
</style>
Notice that I have my page setup to have a width of 770px.
The code would look something like this:
<div id="left>
left column content here.
</div>
<div id="center">
center content here.
</div>
<div id="right">
right content here.
</div>
left column content here.
</div>
<div id="center">
center content here.
</div>
<div id="right">
right content here.
</div>
For your middle column, you may want to make the center column an iframe, and have a button to change the content.
Try different methods, and use the one that fits how you work and think. If you have any questions, be sure to ask, and Tom and I can fight over absolute positioning and floats.
sstovert@satx.rr.com
Guest
5,410 posts
Nah. It's whatever "floats" your boat, Bill. 
CoffeeCup... Yeah, they are the best!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
