I'm creating 3-colimn and some 2-column pages for a client.
html:
<!-- m --><a class="postlink" href="http://help.hyperarts2.com/index-text.html">http://help.hyperarts2.com/index-text.html</a><!-- m -->
css:
<!-- m --><a class="postlink" href="http://help.hyperarts2.com/style-test.css">http://help.hyperarts2.com/style-test.css</a><!-- m -->
The wrapper is set to 90% width.
I need the left and right columns to be a set width (175px), and the middle column (maincontent) to expand as needed. However, I don't want the wrapper to be any less that 760px. I just can't seem to get this working right in any browser, and I'm probably making some boneheaded error but I can't figure it out.
Also, I want all 3 columns to extend the entire height of the wrapper. This is working in IE6/Win but not with Safari. With FireFox (OS X) they extend the entire height, but the wrapper itself doesn't extend the full height. You'll see I set html and body to height=100%, so I'm at a loss.
Jeez, any help will be greatly appreciated. Thanks!
TimHere is some Codes Not sure if this is what you need
(Change these to as needed)
Use this in your css or in your header...
Left Content
#leftcontent {
position: absolute;
left:0px;
top:0px;
width:175px;
background:#fff;
border:0px solid #000;
}
Center Content
#centercontent {
position: absolute;
left:610px;
top:0px;
width:300px;
background:#fff;
border:0px solid #000;
}
Right Content
#rightcontent {
position: absolute;
left:610px;
top:0px;
width:175px;
background:#fff;
border:0px solid #000;
}
Placement:
Use this in the HTML...
This is the Left content (Place somewhere in the body)
<div id="leftcontent">
place your content here
</div>
This is the Center content (Place somewhere in the body)
<div id="centercontent">
place your content here
</div>
This is the Right content (Place somewhere in the body)
<div id="rightcontent">
place your content here
</div>
I hope this helps you out, If not sorry.I'll give you the basic HTML and CSS, the a note no what you'll need to get it to look like three columns.
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
text-align: center; /* Centers layout in IE5-Win */
}
#footer {
clear: both;
width: 100%;
}
/* Prevents IE-Win from stretching column and breaking layout when
contents are too wide. Hide from IE5-Mac \\*/
* html #footer { overflow; hidden; }
/* End IE5-Mac hiding */
#left {
float: left;
width: 175px;
}
/* Prevents IE-Win from stretching column and breaking layout when
contents are too wide. Hide from IE5-Mac \\*/
* html #left { overflow; hidden; }
/* End IE5-Mac hiding */
#middle {
margin: 0 175px;
}
#right {
float: right;
width: 175px;
}
/* Prevents IE-Win from stretching column and breaking layout when
contents are too wide. Hide from IE5-Mac \\*/
* html #right { overflow; hidden; }
/* End IE5-Mac hiding */
#wrapper1 {
margin: 0 auto; /* Centers layout in IE6-Win and standards browsers */
min-width: 760px;
text-align: left;
width: 90%;
}
/* Prevents standards browsers from cutting off left and right edges
of layout when window is too narrow. */
html>body #wrapper1 {
border: 1px solid #fff;
border-color: transparent;
border-bottom: 0;
border-top: 0;
}
#wrapper2 {}
-->
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="footer"></div>
</div>
</div>
You'll need to use a technique called Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) first published at A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->). Basically, you'll need two background images, one image for each border in your column.
You can't get elements to be a certain height unless their parent element has a set height. The most frustrating thing right now with CSS is that there isn't a good way to do a grid layout, but using a few tricks, you can easily get around that.
html:
<!-- m --><a class="postlink" href="http://help.hyperarts2.com/index-text.html">http://help.hyperarts2.com/index-text.html</a><!-- m -->
css:
<!-- m --><a class="postlink" href="http://help.hyperarts2.com/style-test.css">http://help.hyperarts2.com/style-test.css</a><!-- m -->
The wrapper is set to 90% width.
I need the left and right columns to be a set width (175px), and the middle column (maincontent) to expand as needed. However, I don't want the wrapper to be any less that 760px. I just can't seem to get this working right in any browser, and I'm probably making some boneheaded error but I can't figure it out.
Also, I want all 3 columns to extend the entire height of the wrapper. This is working in IE6/Win but not with Safari. With FireFox (OS X) they extend the entire height, but the wrapper itself doesn't extend the full height. You'll see I set html and body to height=100%, so I'm at a loss.
Jeez, any help will be greatly appreciated. Thanks!
TimHere is some Codes Not sure if this is what you need
(Change these to as needed)
Use this in your css or in your header...
Left Content
#leftcontent {
position: absolute;
left:0px;
top:0px;
width:175px;
background:#fff;
border:0px solid #000;
}
Center Content
#centercontent {
position: absolute;
left:610px;
top:0px;
width:300px;
background:#fff;
border:0px solid #000;
}
Right Content
#rightcontent {
position: absolute;
left:610px;
top:0px;
width:175px;
background:#fff;
border:0px solid #000;
}
Placement:
Use this in the HTML...
This is the Left content (Place somewhere in the body)
<div id="leftcontent">
place your content here
</div>
This is the Center content (Place somewhere in the body)
<div id="centercontent">
place your content here
</div>
This is the Right content (Place somewhere in the body)
<div id="rightcontent">
place your content here
</div>
I hope this helps you out, If not sorry.I'll give you the basic HTML and CSS, the a note no what you'll need to get it to look like three columns.
<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
text-align: center; /* Centers layout in IE5-Win */
}
#footer {
clear: both;
width: 100%;
}
/* Prevents IE-Win from stretching column and breaking layout when
contents are too wide. Hide from IE5-Mac \\*/
* html #footer { overflow; hidden; }
/* End IE5-Mac hiding */
#left {
float: left;
width: 175px;
}
/* Prevents IE-Win from stretching column and breaking layout when
contents are too wide. Hide from IE5-Mac \\*/
* html #left { overflow; hidden; }
/* End IE5-Mac hiding */
#middle {
margin: 0 175px;
}
#right {
float: right;
width: 175px;
}
/* Prevents IE-Win from stretching column and breaking layout when
contents are too wide. Hide from IE5-Mac \\*/
* html #right { overflow; hidden; }
/* End IE5-Mac hiding */
#wrapper1 {
margin: 0 auto; /* Centers layout in IE6-Win and standards browsers */
min-width: 760px;
text-align: left;
width: 90%;
}
/* Prevents standards browsers from cutting off left and right edges
of layout when window is too narrow. */
html>body #wrapper1 {
border: 1px solid #fff;
border-color: transparent;
border-bottom: 0;
border-top: 0;
}
#wrapper2 {}
-->
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="footer"></div>
</div>
</div>
You'll need to use a technique called Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) first published at A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->). Basically, you'll need two background images, one image for each border in your column.
You can't get elements to be a certain height unless their parent element has a set height. The most frustrating thing right now with CSS is that there isn't a good way to do a grid layout, but using a few tricks, you can easily get around that.