Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Attempting to add 3 columns
This is my Site: http://www.thedept.com
Currently, my site structure is: Header, Sidebar1 Left, Content Middle, Sidebar 2 Right, and the Footer.
I’m attempting to add the Sidebar2 Right, and its throwing off everything I’ve spent weeks setting up.
I’ve read in the forums that I should not float columns. But with my current set up, what other choices
do I have? If I set the width on the both sidebars, and the center column, within their own div tags, and
add a “clear: both”, will that solve issue?
I appreciate any suggestions.
thanks,
elstrausso
Offline
Re: Attempting to add 3 columns
Hello, just to follow up my last post, I did decide to go ahead and Float columns, and set a width to each. I’m finding that this method works within some browsers (mac Safari-3.1.2, FireFox-3.0.3) but not all including the following ;windows Firefox, IE, Mac IE-5.2. I’m still trying to solve, and will keep you all updated on my findings.
Best,
elstrausso
Offline
Re: Attempting to add 3 columns
elstrausso, it would be helful to see exactly how you are attempting to do this.
a) where did you read that you should not float columns? it is the most common way of laying out a page, in txp or otherwise
b) floats should work in every moden browser, firefox, windows ie 5+, and in mac ie there might be a few quirks, but a basic float layout should work.
you might find it helpful to use one of the themes at textgarden as a starting point
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline
Re: Attempting to add 3 columns
You might want to take a look at this list of 3 column layouts.
In particular, if you want a liquid layout, look here and to convert liquid to fixed, look here afterwards.
Offline
Re: Attempting to add 3 columns
Thanks for the links, and suggestions- they have been very helpful. I’m on the last leg of getting my site finalized, however I have encountered one big issue I just cannot seem to figure out. In I.E.7 windows, my center column is overlapping my left column which contains my site navigation. I’ve run the site through IE /Safari/ Firefox on Mac and Firefox/Safari on PC and don’t have any issues. Does anyone out there in the TXP community have any suggestions? I would greatly appreciate it!
Best,
Elstrausso
Last edited by elstrausso (2008-10-08 03:34:24)
Offline
Re: Attempting to add 3 columns
elstrausso hard to guess what the problem is without knowing what html or css you are using… do you have a link we can see?
~~~~~~~~~~~~~| monolinea.com | pixilate.com | istockphoto.com/kemie |~~~~~~~~~~~~~
Offline
Re: Attempting to add 3 columns
forgot to add this in my last post:
http://thedept.com/
here is my css code:
#blog
{
top:0px;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
margin: 0px ;
padding: 0px;
float: left;
text-align: left;
}
#blogcontent
{
background: #ffffff;
margin:0px 0px 0px 0px;
padding: 0px;
float: left;
text-align: left;
}
#blogcontent a img
{
border: 1px solid #ffffff;
}
#blogcontent a:hover img
{
border: 1px solid #000000;
background-color: #ffffff;
outline:none;
}
/**************/
/* THUMBNAILS */
/**************/
.thumbnails {
top:0px;
margin-top: 0px;
margin-left: 4px;
margin-right: 0px;
margin-bottom: 20px;
float: left;
background-color: #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.thumbnailimg {
float: left;
width: 166px;
height: 159px;
padding: 0px;
background: #ffffff;
}
.thumbnails a:hover
{
background-color: #ffffff;
border: 0px;
outline:none;
}
.thumbnailwrap {
padding: 0px;
float: left;
margin-left: 180px;
padding: 0px;
width: 600px;
}
.divider{
padding-bottom: 20px;
padding-top: 5px;
}
/**************/
/* COMMENT */
/**************/
.commentsmanuel
{
text-align: left;
font-weight: normal;
font-size: 11px;
color: #64a9ca;
padding-left: 0em;
}
.comments
{
color: #000000;
text-align: left;
font-weight: normal;
font-size: 11px;
padding-left: 0em;
}
.comments a
{
color: #000000;
}
.comments a:hover
{
color: #ffffff;
}
.commentauthor
{
font-size: 12px;
display: block;
}
.comments_error{
color: red; font-size: 14px; list-style-type: none; margin: 0; margin-top: 5px; padding: 0; }ol.comments
{
color: #000000;
font-size: 11px;
list-style-type: none;
margin: 0;
margin-top: 0em;
padding: 0;
}
ol.comments li
{
background: #ffffff;
border: 0px;
border-top: 0px;
border-top: 0px dotted #a4d1e6;
padding: 0em;
padding-top: 0em;
}
.even
{
background: #DCDCDC;
padding: 8px;
}
.odd
{
background: #cccccc;
padding: 8px;
}
.commentsblock
{
margin-left: 0px;
margin-right: 0em;
text-align: left;
padding: 0em;
font-size: 11px;
clear: both;
}
.commentsblock textarea
{
width: 450px;
height: 100px;
}
.commentsblock input, .commentsblock textarea
{
border: 1px solid #DCDCDC;
}
.commentsblock textarea:focus
{
background: #DCDCDC;
border: 1px solid #DCDCDC;
}
.commentsblock textarea:focus, .commentsblock input:focus
{
background: #DCDCDC;
border: 1px solid #DCDCDC;
}
ul
{
list-style-type: none;
margin: 0 0 0px 0;
}
li
{
list-style-type: none;
margin: 0 0 5px 0;
}
.floatright
{
float: right;
width: 200px;
margin: 0px 0px 0px 0px;
background-color: #fff;
padding: 0px;
outline:none;
}
div.floatright img
{
padding: 2px 0px 0px 0px;
border-top: 0px solid #555;
border-right: 0px solid #999;
border-bottom: 0px solid #999;
border-left: 0px solid #555;
}
div.floatright a:hover
{
background-color: #ffffff;
border: 0px;
outline:none;
}
.active
{
background: #ffffff;
}
.active a
{
color: #ffffff;
background: #000000;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
}
#info
{
position: absolute;
color: #000000;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 13px;
margin-left: 65px;
}
#info a
{
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
}
#info a:hover
{
background: #000000;
color: #ffffff;
}
.clearfix:after
{ content: “.”; display: block; height: 1px; clear: both; visibility: hidden;
}
.clearfix { display: inline-block;
}
/* Hides from IE-mac \*/
.clearfix { display: block;
}
/* End hide from IE-mac */
#sidebarleft {
float: left;
width: 200px;
}
#sidebarright {
float: right;
width: 200px;
margin: 0px 0px 0px 0px;
padding: 0px;
background : #beige;
}
#sidebarright a, #sidebarright a
{
color: #000000;
}
div.date2 {
font-size: 11px;
float: left;
width: 336px;
border: 0px;
text-align: left;
padding: 5px 0px 0px 150px;
}
date
{
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 10px;
font-weight: normal;
color: #ffffff;
margin: 0px 0px 0px 0px;
buffer; 0px 0px 0px 0px;
background: #000000;
width: 450px;
display: block;
text-align: left;
float: left;
}
author
{
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
font-style: normal;
color: #ffffff;
background: #000000;
margin: 0px 4px 0px 0;
buffer; 0px 0px 0px 0px;
float: right;
text-align: right;
}
a
{
color: #000000;
font-weight: bold;
text-decoration: none;
margin: 0px auto;
padding-left: 3px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
}
a:hover
{
background: #000000;
color: #ffffff;
}
p
{
margin: 0px;
padding-bottom: 10px;
}
h1
{
top: 0px;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
color: #272727;
font-size: 12px;
margin: 0px auto;
padding: 0px 0 0px 3px;
}
h2
{
top: 0px;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
color: #272727;
font-size: 12px;
margin: 0px auto;
padding: 0 0 0px 0;
}
h3
{
top: 0px;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
margin: 0px auto;
padding: 0px 0px 0px 0;
}
h4
{
top: 0px;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 12px;
font-weight: normal;
color: #272727;
margin: 0px auto;
padding: 0 0 0px 0;
}
h5
{
float: right;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 20px;
color: #000000;
margin: 8px 475px 0 0px;
padding: 0px;
width: 200px;
}
#logo
{
margin: 10px 0 0 55px;
padding: 0 0 10px 0px;
border: 0px;
background-color: #ffffff;
outline:none;
}
#logo a:hover
{
background-color: #ffffff;
border: 0px;
outline:none;
}
#content
{
padding: 0px;
background-color: #ffffff;
margin: 0px auto;
text-align: left;
width: 900px;
}
#content2
{
padding-left: 0px;
background-color: #ffffff;
margin: 0px auto;
text-align: left;
width:450px;
}
body
{
background-color: #ffffff;
color: #000000;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
text-decoration: none;
text-align: left;
font-size: 12px;
top: 0px;
margin: 0px;
padding: 0px;
overflow-x: hidden;
width: 100%;
}
.left
{
float: left;
clear: left;
width: 450px;
padding-left: 0px;
padding-right: 200px;
padding-top: 1px;
padding-bottom: 1px;
text-align: left;
}
.right
{
float: right;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 0px;
text-align: right;
margin: 0 0 0 0px;
}
.zemContactForm zemTextarea
{
width: 110px;
height: 100px;
border: 1px solid #cccccc;
}
.zemContactForm input, .zemContactForm textarea
{
border: 1px solid #cccccc;
}
.zemContactForm textarea:focus
{
background: #e6e7e8;
border: 1px solid #cccccc;
}
.zemContactForm textarea:focus, .zemContactForm input:focus
{
background: #e6e7e8;
border: 1px solid #cccccc;
}
/**************/
/* FOOTER */
/**************/
div.foot3
{
color: #8f8e8e;
font-family: Helvetica, Verdana, Trebuchet MS, sans-serif;
font-size: 10px;
padding-left: 0px;
float: left;
border: 0px;
text-align: center;
width: 100%;
}
thanks
Offline
Pages: 1