3 Column CSS Newbie

Hi all,
I have a website that uses table. I am trying to setup a template in CSS so I can convert over from table format. Below is my my css and html. I have 3 questions.
1) How do I make it so all three columns stay the same height or expand to be the height of the longest?
2) The text, if long enough, in each column will flow into the other columns/divs. How do I make the text wrap and stay in the proper div?
3) It appears that I have a gap between column 3 (right column) and the footer. Do I have something set making this happen (I don't want a gap).
I have the float clear indicated in my footer css. I don't know if that is the proper place to have it (don't know much about clearing floats) or if that is causing some of my problems.
Thanks in advance....Chris
CSS:
<style type="text/css">

</style>
HTML:
<body>
<div id="wrapper">
<div id="topbar">Search Bar/Links/Contact Us/ Date</div>
<div id="wrapper2">
<div>Logo Goes Here</div><div>SWF Goes Here</div>
<div>navigation bar goes here</div>
<div id="left_column">
<p>Left Column</p>
</div>
<div id="main_content">
<p>Main Content</p>
</div>
<div id="right_column">
<p>Right Column</p>
</div></div>
<div id="footer">footer</div>
</div>
</body>

Example 3-column CSS layout:
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
CSS divisions do not produce equal height columns. You'll need to trick the eye into thinking they are equal buy using a repeating background-image that tiles down the page. This technique is called Faux Columns.
You can see a crude example here:
http://alt-web.com/TEMPLATES/3-col-white-gray.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

Looking for a two-column CSS layout

I am looking for a two-column CSS layout that is centered
with blank space
on the sides, so the layout does not expand across the entire
screen, but
instead uses a portion of it (such as 75%). The left column
would be for
navigation and I haven't decided if I want it to be liquid or
fixed, but the
right column for content would be liquid. There would also be
a heading div
and navigation div across the top and a footer across the
bottom.
While looking for sample sites I keep finding ones that use
three columns,
and I'm worried that if I remove the third column that the
layout will break
at some point, even if I don't see it in my test browsers.
I'm also
discovering that some of the sample pages out there don't
respond well when
I resize the browser window. The columns don't have a minimum
width or they
stack on top of each other at some point.
There are so many different techniques to use when designing
a layout with
CSS, some better than others, that I thought maybe some
people here may
already know what's tried and true and what should be
avoided. Are any
layouts robust enough to allow a third column to be added at
a future date
if needed? I also like the idea of putting the content div
first in the
code, to improve search engine indexing and also to aid those
who may be
using a screen reader, but if that feature makes the coding
much more
complex then I could see why I might avoid it for now.

Sorry Nancy, I didn't see your post for some reason. At least
we agree (o:
Jo
"josie1one" <[email protected]> wrote in message
news:g4tv32$57f$[email protected]..
>I have DW8 and am very happy with this:
>
http://projectseven.com/products/templates/pagepacks/cssmagic/index.htm
>
>
> --
> Jo
>
>
> "Matt" <[email protected]> wrote in message
> news:g4tg96$isq$[email protected]..
>>I am looking for a two-column CSS layout that is
centered with blank space
>>on the sides, so the layout does not expand across
the entire screen, but
>>instead uses a portion of it (such as 75%). The left
column would be for
>>navigation and I haven't decided if I want it to be
liquid or fixed, but
>>the right column for content would be liquid. There
would also be a
>>heading div and navigation div across the top and a
footer across the
>>bottom.
>>
>> While looking for sample sites I keep finding ones
that use three
>> columns, and I'm worried that if I remove the third
column that the
>> layout will break at some point, even if I don't see
it in my test
>> browsers. I'm also discovering that some of the
sample pages out there
>> don't respond well when I resize the browser window.
The columns don't
>> have a minimum width or they stack on top of each
other at some point.
>>
>> There are so many different techniques to use when
designing a layout
>> with CSS, some better than others, that I thought
maybe some people here
>> may already know what's tried and true and what
should be avoided. Are
>> any layouts robust enough to allow a third column to
be added at a future
>> date if needed? I also like the idea of putting the
content div first in
>> the code, to improve search engine indexing and also
to aid those who may
>> be using a screen reader, but if that feature makes
the coding much more
>> complex then I could see why I might avoid it for
now.
>>
>
>

Dreamweaver CS3 3 column CSS footer issue

Has anyone used the Three Column Absolutely Positioned Header
and Footer (thrColAbsHdr) CSS template in Dreamweaver CS3? If so,
has anyone figured out how to address issue of Sidebar1 and
Sidebar2 content floating over top of the footer (instead of
growing and pushing the footer down)?
Adrian Senior appears to have addressed it regarding the
twoColElsLtHdr CSS...
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_cs3.html
I've tried his suggestion and it still doesn't appear to be
working properly with this CSS/template (thrColAbsHdr).

Example 3-column CSS layout:
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
CSS divisions do not produce equal height columns. You'll need to trick the eye into thinking they are equal buy using a repeating background-image that tiles down the page. This technique is called Faux Columns.
You can see a crude example here:
http://alt-web.com/TEMPLATES/3-col-white-gray.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

3-column css "push down" problem

I'm using a 3-column nav css design for my site (take a look
at rjkg.com/GS.html), but the center and right columns are being
pushed down in IE. Here's the css (navbar is left, headlines is
right, and content is center):
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #ffddbb;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
#headlines{
float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
background-color: #ffddbb;
background: #ffddbb;
#content{
float: left;
width: 499px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
What do I do to make it showcorrectly in IE?
Also, in Firefox, the center column isn't actually centered
between the two sidebars, but I'd like it to be. Any clues?
Thanks in advance from this newbie!
R.

> rjkg.com/GS.html), but the center and right columns are
being pushed
> down in
> IE. Here's the css (navbar is left, headlines is right,
and content is
> center):
>
> #navBar{
> float: left;
> width: 20%;
> margin: 0px;
> padding: 0px;
> background-color: #ffddbb;
> border-right: 1px solid #cccccc;
> border-bottom: 1px solid #cccccc;
> }
>
> #headlines{
> float:right;
> width: 20%;
> border-left: 1px solid #cccccc;
> border-bottom: 1px solid #cccccc;
> padding-right: 10px;
> background-color: #ffddbb;
> background: #ffddbb;
> }
>
> #content{
> float: left;
> width: 499px;
> margin-top: 0px;
> margin-right: 0px;
> margin-left: 0px;
> }
>
> What do I do to make it showcorrectly in IE?
>
> Also, in Firefox, the center column isn't actually
centered between
> the two
> sidebars, but I'd like it to be. Any clues?
20% + 20% + 499px = ?
You can't mix measures like that. Try replacing 499 with 60%.
Your float
will now drop in all browsers. Why?
20% + 20% + 60% = 100%
But the borders and padding you've assigned are added to the
width,
resulting in another mathematical improbablility. The easiest
way to fix
that is the remove the padding and borders from the main
boxes and then
nest content boxes inside the main boxes. Assign your borders
and
padding to those nested elements.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Photo Gallery combined with three column CSS

Hi, I am trying to implement your photo gallery into our
school site and I am having trouble with the layout. I am using a
three-column layout created with CSS and JS, and then placing the
photo gallery inside of this. What happens is when you pull up the
page the three column layout does not position everything correctly
until you resize the browser window (ever so slightly). Help, have
been staring at CSS and JS code now for about a month and cannot
get it to behave, any help would be greatly appreciated. Thanks.
HSPVA Photo
Gallery

"kjuliff" <[email protected]> wrote in message
news:eqij22$are$[email protected]..
>I can reproduce your problem, gnd4evr&evr. I have XP
an IE7 and FF2.
>It's fine
> in FF2 but not in IE7.
>
> I have a similar problem, and I think it's related. This
problem
> really needs
> addressing!
>
> Go to
http://www.coolabah.com/spry/demos/gallery/
and look at the
> bottom of
> the page (in either IE or FF). You will see a google
adsense div.
> Although it
> is specified in it's div tab as being 15 px in height,
it takes up
> much more
> than that.
>
> I HAD wanted to have these google links at the top of my
gallery, but
> cannot
> as I cannot force the div to be only 15px in height.
>
> I posted this problem a few weeks ago but no one
answered.
Your Google ads are in an iframe. This rule will get you
started
iframe {
height: 2em !important;
position: absolute;
top: 650px;
You can leave the position static if you like, and it will
move up and
down with your images - I found that a bit distracting,
though. If you
leave it static, use a top-margin to establish space between
your image
and the ads.
The !important notation is required for the height,
indicating either a
conflict somewhere in your markup or CSS, or poor Google code
(not
uncommon).
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

CSS newbie - 8.10 upgrade problem

I typed the config from our working 11503 7.10 CSS into a new 11503 8.10 CSS. Show Run for each is identical (see attached). When I swap-in the new CSS I get "Page not found" from the VIP, and all the 8.10 CSS will do is bridge me to the real server addresses. What have I missed?
NB 8.10 CSS has SSL module and license.

I have seen this kind of things in the past.
Often it is cable misconnected or arp table of gateways/servers still pointing at the previous CSS even if disconnected.
So, clear all arp table on gateways and servers.
Then verify they learn the new CSS mac address correctly.
Then verify connectivity using ping.
Then use a browser.
If it still does not work, capture a sniffer trace in front of the CSS.
Gilles.

10g adftable:column CSS Style question

I am trying to left justify the author column in this adf:table but I cannot get it to work. The styleClass does not appear to work for it. I have looked into skinning but because the styleClass is not being applied I can't get it to work for this single column. Any suggestions?
Thanks,
Andy
<af:table rows="15"
             banding="row"
             bandingInterval="1"
             var="book"
             id="currentImmunizationsTable"
             width="900"
             value="#{backingbean.books}"
             rendered="#{! empty backingbean.books}"
             immediate="true">
<af:column sortable="true"
                   sortProperty="author"
                   headerText="Author"
                   id="authorColumn"
                   formatType="icon"
                   gridVisible="true"
                   styleClass="column">
    <af:outputText value="#{book.author}"
                           id="authorText">
    </af:outputText>
</af:column>
</af:table>Edited by: anotherhale on Jun 21, 2010 2:04 PM

Is not "align" what you need?
<af:column >
align="left"
</af:column>

HELP EMAIL CSS NEWBIE MELTDOWN

I am using the link below as reference with the suggested
“force” for the font size discrepancy in gmail. Nothing
is working that I have tried. I do not know how to apply the
suggested “force” to the text.
The test sample I have included contains reverse type and
type. I have left the code above the body copy so you can see the
styles I am using even though this is all stripped by gmail.
Any insight and instruction would be greatly appreciated.
Thank you
http://www.xavierfrenette.com/articles/css-support-in-webmail/
Gmail
• Keeps only the HTML between the <body> and
</body> tags. Discards the rest.
• Removes any <style> element and its content,
even if it's within the <body> element.
• Removes any <link> element.
• The font size is bigger in <table> elements, so
you'll probably have to force it with: <table
style="font-size:/*your size*/;"></table>
This is the link to the test sample
http://64.224.200.235/www/RYTEST.html

I am using the link below as reference with the suggested
“force” for the font size discrepancy in gmail. Nothing
is working that I have tried. I do not know how to apply the
suggested “force” to the text.
The test sample I have included contains reverse type and
type. I have left the code above the body copy so you can see the
styles I am using even though this is all stripped by gmail.
Any insight and instruction would be greatly appreciated.
Thank you
http://www.xavierfrenette.com/articles/css-support-in-webmail/
Gmail
• Keeps only the HTML between the <body> and
</body> tags. Discards the rest.
• Removes any <style> element and its content,
even if it's within the <body> element.
• Removes any <link> element.
• The font size is bigger in <table> elements, so
you'll probably have to force it with: <table
style="font-size:/*your size*/;"></table>
This is the link to the test sample
http://64.224.200.235/www/RYTEST.html

CSS Newbie - Modules required for One-Legged topology

Hi all,
I'm looking to setup a system to load balance 12 http web application servers which talk to a backend database cluster. The servers are connected to top of rack 4948 switches which are dual homed to a pair of 6500 chassis for resilience.
Looking through the application networking pages on CSS's I think that a one-legged pair of CSS11503 switches (possibly in an Active-Active standby mode) connected one to each of the 6500's should do the trick. My question is does this sound sensible and would I need any other module in the CSS11503 other than the SCM?
Thanks in advance,
Zac

Zac,
be aware that the CSS is splitting the traffic accross all the modules [no matter where the traffic came in]. So the more modules you have, the more connections the CSS can handle.
For this purpose we sell SAM module that have no interfaces and their only purpose is to perform loadbalancing decision.
Also, regarding one-armed solution.
At first glance it is easy deploy.
However, the CSS is a stateful device, so it requires to see for a single connection all the packets from the client and all the packets from the server.
In a one-armed scenario, this is not automatic. You need to set the CSS to be the default gateway of the server, or use client nat or policy routing.
If you go for client nat, the servers will see connections from one ip address only and you won't be able to perform stats about the clients.
Gilles.

CSS Newbie

I have an existing website to which I'd like to
assign a CSS file. Can I do a global attach in Dreamweaver and not
have to go to each page (file) in the site to assign it?
myGratitude

Is the site a templated one? How many pages are there?
You could always do a site-wide find and replace to find
</head> and replace
it with <link rel="stylesheet" type="text/css"
href="whatever.css"></head>.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"RobtAR" <[email protected]> wrote in
message
news:e9lpid$at8$[email protected]..
>
I have an existing website to which I'd like to
assign a
> CSS file. Can I do a global attach in Dreamweaver and
not have to go to
> each page (file) in the site to assign it? myGratitude

Config Info - CSS Newbie

I can't figure out why this isn't working...it is basic config, and I am eventually trying to to back-end SSL termination. Need basic connectivity first though. If anyone can assist that would be great.
thanks in advance!
CSS11501# term len 0
CSS11501# sh run
!Generated on 01/15/2007 20:38:54
!Active version: sg0810106
configure
!*************************** GLOBAL ***************************
!************************* INTERFACE *************************
interface e1
phy 100Mbits-FD
description "SCTREC02"
bridge vlan 55
interface e2
phy 100Mbits-FD
description "SCTREC02-9/11"
bridge vlan 255
!************************** CIRCUIT **************************
circuit VLAN55
ip address 161.19.55.5 255.255.255.192
ip virtual-router 55
ip virtual-router 150 priority 105 preempt
ip redundant-interface 55 161.19.55.4
ip redundant-vip 150 161.19.55.8
circuit VLAN255
ip address 161.19.55.66 255.255.255.192
ip virtual-router 255
ip redundant-interface 255 161.19.55.65
!*********************** SSL PROXY LIST ***********************
ssl-proxy-list SSL-PROXY
ssl-server 1
ssl-server 1 vip address 161.19.55.8
ssl-server 1 cipher rsa-with-rc4-128-md5 161.19.55.8 443
ssl-server 1 unclean-shutdown
ssl-server 1 ssl-queue-delay 0
backend-server 20
backend-server 20 ip address 161.19.55.75
backend-server 20 port 443
backend-server 20 cipher rsa-with-rc4-128-md5
backend-server 10
backend-server 10 ip address 161.19.55.74
backend-server 10 port 443
backend-server 10 cipher rsa-with-rc4-128-md5
!************************** SERVICE **************************
service sctam103:1-1
ip address 161.19.55.74
protocol tcp
port 443
keepalive type tcp
keepalive tcp-close fin
keepalive port 443
active
service sctam104:1-1
ip address 161.19.55.75
protocol tcp
port 443
keepalive type tcp
keepalive tcp-close fin
keepalive port 443
active
!*************************** OWNER ***************************
owner AMLDAP
content services-sys:ssl
vip address 161.19.55.8
protocol tcp
port 443
add service sctam103:1-1
add service sctam104:1-1
active
CSS11501#

try setup a group -
group
add destination service sctam103:1-1
add destination service sctam104:1-1
vip address 161.19.55.8
active
I had to add this in the first time I used the CSS models as the return HTTP traffic was coming back with the real server IP rather than the VIP IP. You should run an ethereal trace to see what responses you are getting.

Can this be done with CSS (newbie?)

Is there a simple way to make a page as follows:
Main area 720px by 480px and centered on the screen
In the main area 4 areas (divs) for content (2 rows of 2
coumns)
First row Left hand Content 120px by 240px. Right hand
content 600px by
240px.
Second row Left hand Content 120px by 240px. Right hand
content 600px by
240px.
hope this makes sense
Thanks

Can it be done without the use of tables?
"Murray *ACE*" <[email protected]> wrote
in message
news:eq5kou$ipp$[email protected]..
> Use a centering table, with a fixed width of 720px.
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "BW" <[email protected]> wrote in message
> news:eq5i9k$g65$[email protected]..
>> Is there a simple way to make a page as follows:
>>
>> Main area 720px by 480px and centered on the screen
>>
>> In the main area 4 areas (divs) for content (2 rows
of 2 coumns)
>>
>> First row Left hand Content 120px by 240px. Right
hand content 600px by
>> 240px.
>>
>> Second row Left hand Content 120px by 240px. Right
hand content 600px by
>> 240px.
>>
>> hope this makes sense
>>
>> Thanks
>>
>
>

CSS issue when changing the table row height to 16px

Hello,
After changing the table row height through css like this:
.table-row-cell, .table-cell {
-fx-cell-size: 16;
the table rows are correctly displayed with a 16px height but the cell bottoms seem to be incorrectly set.
For example the following css style (a red 3px bottom border):
.table-cell {
-fx-border-width: 0 0 3 0;
-fx-border-color: red;
doesn't work anymore with the new row height whereas it works with the 24px standard row height.
While investigating with Scenic View, I noticed that changing the row height changes the TableRow layoutBounds height (from 24px to 16px so that's ok) but not the boundsInParent height which remains to 27px. I think it should become 19px (16 + 1.5 + 1.5). I don't know if it's a bug.
Anyway, any help making the css red border working for a 16px row height would be greatly appreciated.
Regards,
Bruno.

Q: Would this help to just use absolute div tags and give me 'ABSOLUTELY ABSOLUTE' positioning?
No. APDivs are not a good primary layout method. Use default CSS positioning (which is no positioning at all). Align page elements with margins, floats and padding.
See example -- 2-Column CSS Layout with Grids
(View Page Source in your browser to see the code)
http://alt-web.com/TEMPLATES/2-col-fixed-with-grid.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS coloumn background color Issue in IE8

Hi,
JDev: 11.1.1.4.
The following style class is not working in ie8 where as it is working in FireFox.
<af:column sortProperty="Description" filterable="true"
headerText="#{bindings.SetupVO1.hints.Description.label}"
styleClass="#{row.bindings.Date.attributeValue gt row.bindings.sDate.attributeValue? tableRowCreate :''}"
id="c20" >
<af:inputText value="#{row.bindings.Description.attributeValue}"
label="#{bindings.SetupVO1.hints.Description.label}"
columns="#{bindings.SetupVO1.hints.Description.displayWidth}"
shortDesc="#{bindings.SetupVO1.hints.Description.tooltip}"
id="it19" autoSubmit="true">
</af:inputText>
</af:column>
CSS StyleClass:
.tableRowCreate{
background-color: #CC9966;
Thanks,
Rajesh

Hi Rajesh ,
I tried applying this style , It works fine for me in IE8.
I am using Jdev 11.1.1.3.0
but this shouldnt be the cause , can u try installing firebug and see the style class getting applied to column

Freeze Data Columns in WAD

Hi,
I want to freeze the Row Header as well as some data columns in WAD.
Eg
FY HY1 Jan Feb ..... HY2 July...
Sales Org DistrCh Site 1200 600 100 500
Now I want to fix the the columns till HY1. Out out these 5 columns I am able to fix the header thats is the first three columns but I am not able to Fix FY and HY1 aswell.
Best wishes, Dheeraj

Hi,
To Freeze column in WAD;On the properties tab select table. goto web item tab. in number of data columns displayed put value as 4. (you can change as per ur need).
Also Pls go through thes links
http://web.tampabay.rr.com/bmerkey/examples/locked-column.css.html
http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html
For visiblity
you can set visible rows and columns in the specific properties of web item table! Just click the table in the Web Application Designer and than look into the specific properties. Select "Number of Data Rows..." or "Number of Data Columns..." as you wish!
Hope this helps
Regards
CSM Reddy

3 Column CSS Newbie

Similar Messages

Maybe you are looking for