Faux column challenge

I had a site working in tables, but switched to divs to avoid a problem with Spry tabbed panels. Now I am having challenges creating Faux Columns to re-create the look I had with tables:
The page has a false three-column look so that a header graphic can "pop out" of the left side of the page. I set up the header and right sidebar divs, as well as the main page content and footer. To make the right sidebar faux column, I had a background graphic the width of the sidebar aligned right and repeated. So far so good.
But then I had a problem when the main content div was shorter than the sidebar. The gray background - which I used to create the invisible first column - shows through at the bottom of the main div before the footer. Oops.
I thought the simple solution was to create a background graphic the width of the main content + sidebar and align that right as I had the sidebar graphic. Bingo. No more problem with short page content. (Although it did mess up the nice muted background image).
But ... now when the page content is *longer* than the sidebar, it works in Safari and IE but in Firefox the background graphic somehow doesn't kick in, and the gray shows through at the bottom of the sidebar. Also in IE, the footer shows up at the bottom of the sidebar, not the bottom of the page, even though there's a clearfloat.
I am sure there is something SIMPLE I'm forgetting to do, but as I'm looking I'm not seeing it. Ideas?
URLs:
http://www.inkwellxwords.com - shows the original design in tables
http://www.inkwellxwords.com/iwxabout.html - shows the div rewrite with the long page content issue
http://www.inkwellxwords.com/iwxsubscribe.html - shows the div rewrite with short page content
CSS file is inkwell.css

I'mnot sure I understand all your issues, but try this
Add to your footer rule
#footer     {
     background-color:#CC3300;     clear:both;     height:20px;     width:820px;     margin:auto;) Remove <table width="820" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="72"> </td>
    <td width="748" bgcolor="#CC3300"> </td>
</tr>
</table>
See what that does for you.
Gary

Similar Messages

Issue with Faux Column solution for 2 Column website

Hi - I hope you can help me
I have come across a problem which I haven't seen before using the Faux Column method in DW CS5 - there is a white line appearing down the right side of my sidebar which I can only imagine is caused by the repeated background image I have set in the body tag.
The code I have added to the body tag in my css style sheet is;
background: #FFF url(../images/faux_background.jpg) repeat-y 50% 0;
Website where the issue is occuring is www.nurtureearlylearning.co.nz. The issue so far is appearing in Chrome, Firefox and IE. IN Chrome and FIrefox, it will appear and disappear as you adjust the screen size but there is no consitency with what size the browser is.
Please keep in mind that website is not finished yet - just an issue that i'd like to resolve so far
Any help would be appreciated - thanks!
Clint

I'm using Firefox and I don't see a white line. Not entirely sure why you need a background image at all for this layout since the entire page is white.
See a live example of Faux Columns
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Having Trouble with Faux Columns

I've reviewed several websites that have code for Faux Columns but I still can't get my sidebar to stretch along the length of the page. Here's my code:

</style>
[Item 1 | #]
[Item 1.1 | #]
[Item 1.2 | #]
[Item 1.3 | #]
[Item 2 | #]
[Item 3 | #]
[Item 3.1 | #]
[Item 3.1.1 | #]
[Item 3.1.2 | #]
[Item 3.2 | #]
[Item 3.3 | #]
[Item 4 | #]
Special
PURPOSE
This guide does not replace policy, procedures, or training
    Home Page

</script>
</body>
</html>

Faux Columns will not work in a Fluid Layout (responsive web design)
Fortunately PVII have written a nifty little JS-file that will allow you to do that. See the example here http://www.projectseven.com/tutorials/css/pvii_columns/

Can I create a curved faux column?

I am relatively new to web design, Dreamweaver and CSS and I am not sure what are the limitations involved.
I would like to create a 3 column layout with a the sidebar having a curved look instead of a simple straight box
and have it scalable according to content.
I understand the concept of the faux column and was wondering if there are any method that could be modified to achieve the result?
Is my only option to create the background in Photoshop?
Thanks

Hi
To reply to Myleniums answer, using css3, you would have to apply css3 rounded corners to just one corner of the item, along with adjusting the corner width and color to get the rounded effect, then apply a background color to get the left hand item. Finally using css3 transform rotate the item inside a div to the required position.
I think everyone will agree, this is not worth the effort when a simple image of the 'curve' placed inside a div with the required color and a placed background image, would create the same effect.
PZ

Problem with faux column and min 100% height

hello
i',m trying to create a faux column on this page:
http://www.malcmabe.co.uk/listtest.html.
the column i'm trying to do is the left hand side menu
column.
i just can't get this to work, so i'm obviousley missing
something.
also, i've set the wrapper as minimum height of 100%. this
isn't working, so my hunch is that it's having a knock on effect to
the measurements of the left hand column....but i may be wrong
any help would be appreciated.
the css file is
http://www.malcmabe.co.uk/listtest.css
malc

malcster2 wrote:
> hello
>
> i',m trying to create a faux column on this
> page:
http://www.malcmabe.co.uk/listtest.html.
> the column i'm trying to do is the left hand side menu
column.
>
> i just can't get this to work, so i'm obviousley missing
something.
>
> also, i've set the wrapper as minimum height of 100%.
this isn't working, so
> my hunch is that it's having a knock on effect to the
measurements of the left
> hand column....but i may be wrong
>
> any help would be appreciated.
>
> the css file is
http://www.malcmabe.co.uk/listtest.css
>
> malc
Malcolm
That's not quite how faux columns work - you'd make an image
the width
of your container with the dimensions you need - perhaps a
line only to
separate a left and right column or something a little more
detailesd -
the image's height can be sliced very small as it will repeat
on the y
axis, attached via css to the container. You can then use
margins or
divs floated left and right to keep your content on either
side.
Something like this I made earlier......
http://www.bealeandpyper.co.uk/
and the background image......
http://www.bealeandpyper.co.uk/p7bpassets/images/p7bp_layout.jpg
btw most of us in here use the faster NNTP for accessing the
newsgroups
- OE, Outlook, Thunderbird and/or dedicated mail/newsreader
apps would
do to access them. Try clicking this link.....
news://forums.macromedia.com
HTH
chin chin
Sinclair

Problem with faux column and 100% min height

hello
i',m trying to create a faux column on this page:
http://www.malcmabe.co.uk/listtest.html.
the column i'm trying to do is the left hand side menu
column.
i just can't get this to work, so i'm obviousley missing
something.
also, i've set the wrapper as minimum height of 100%. this
isn't working, so my hunch is that it's having a knock on effect to
the measurements of the left hand column....but i may be wrong
any help would be appreciated.
the css file is
http://www.malcmabe.co.uk/listtest.css
malc

malcster2 wrote:
> hello
>
> i',m trying to create a faux column on this
> page:
http://www.malcmabe.co.uk/listtest.html.
> the column i'm trying to do is the left hand side menu
column.
>
> i just can't get this to work, so i'm obviousley missing
something.
>
> also, i've set the wrapper as minimum height of 100%.
this isn't working, so
> my hunch is that it's having a knock on effect to the
measurements of the left
> hand column....but i may be wrong
>
> any help would be appreciated.
>
> the css file is
http://www.malcmabe.co.uk/listtest.css
>
> malc
Malcolm
That's not quite how faux columns work - you'd make an image
the width
of your container with the dimensions you need - perhaps a
line only to
separate a left and right column or something a little more
detailesd -
the image's height can be sliced very small as it will repeat
on the y
axis, attached via css to the container. You can then use
margins or
divs floated left and right to keep your content on either
side.
Something like this I made earlier......
http://www.bealeandpyper.co.uk/
and the background image......
http://www.bealeandpyper.co.uk/p7bpassets/images/p7bp_layout.jpg
btw most of us in here use the faster NNTP for accessing the
newsgroups
- OE, Outlook, Thunderbird and/or dedicated mail/newsreader
apps would
do to access them. Try clicking this link.....
news://forums.macromedia.com
HTH
chin chin
Sinclair

Equal length, faux columns in the CS4 thrColHybHdr template

In this CS4 template ( three colum hybrid with header - footer, sidebar columns in em [or fixed] center column width in % capped with full span header and footer), I am trying to accomplish the look of equal column lenth (ie,the faux column technique). I'll admit I am coming up the learning curve with CSS, but I've tried to do alot of homework and read on the faux column technique. Honest! But I've yet to find an exact example of this though, and every close variation I try tweaking doesn't quite pan out.
Somebody PLEASE tell me how to get this to look just like the little pictograph of it in Dreamweaver!

I dont know if it is possible to set up faux columns with fixed / % /fixed widths, I'd love to see the answer to that.
If you were to set your center to a fixed width, its pretty easy. You wrap the 3 columns in a wrapper div, You create a background image that matches the widths of the column, set it as your background image in the wrapper div, and set the overflow rule to hidden and set repeat to y in your css.
So for example if your cols are 200px, 400px, 200px, you create an image 800px wide, height is not all that important with first 200px being the color you want your first column, 400 your center and 200 your right, You have a faux column
There is a second faux technique that has a catch to it. If you leave the width a %, what you can to is to again create the wrapper, only make the background a color, again overflow to hidden, set no color for the left and right columns. Set the center div background color to whatever you want. The catch is that you would have to make sure that the center div is always the longest, and by a good margin, otherwise you see the differences at the bottom.
That is the only way I know with fixed and % widths, but would love to hear other opinions.
Gary

Faux column background not aligned in smaller browser window...

I'm working on a three-column webpage. I'm using fixed-width columns, with the left and right columns floated (started with a dreamweaver layout). I am also using a background applied to the <body> tag to apply the faux column look, so that the side column backgrounds flow all the way down the page.
My layout is a total of 780px wide, but the background image I'm using is 2000px wide. It's the same image that was used in the previous version of the website, and I can only guess that the image is that wide to "fill" the extra space around the main content when the browser window is wider than 780px. Because the image is so wide, I have it styled to center on the page. When my browser window >= 780px wide, everything looks great... the faux columns line up perfectly with the divs. However, when I make the window less than 780px, things get messy.
My layout elements stay where they are, meaning that the left edge of the container stays aligned with the left edge of the screen and a scroll bar appears at the bottom. However, since my background is set to center itself, it continues to try to center itself in the browser window. Basically, the content is not centered in the browser window, but the background is, causing the faux columns to not line up with the divs. The relevant CSS I have applied is:
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #666666;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(../img/BG-gray.gif);
#container {
    width: 780px;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
Note: everything within the container div stays where it should relative to the container, so I didn't include the CSS for them, though I can post it up later if you really need to see it.
Is there a way to keep everything lined up in a smaller browser window? Or, would it be better to trim down the background image to the same width as the container?
Sorry for the long message, but I'm new at this. Please don't eat me.

Same problem, only worse. That causes the background to show from the very left edge of the image. All my text is in the gray area in the example below. Let me try to clarify...
The background image is something like this (colors are for clarity):
(filler)
Left faux column
Main content goes here. This is always in the center of the browser window.
Right faux column
(filler)
Where the combined width of the blue, white, and red sections is 780px. This is what I want my layout to line up with, the blue and red columns being the faux left and right columns, respectively. The gray areas are "filler" that colors the excess width in browser windows that are wider than the fixed width of the main content. With the background set to centered, the white stripe is always centered in the browser window. As long as the window is wider than my layout, the layout is centered in the browser window as well.
I'm looking for a way to either center the background relative to the layout container, not the browser window, or to keep the layout container centered in the browser window when the window is narrower than the layout.

Faux columns

Hi there,
Can someone please take a look at the following website and
help me out with the 'faux columns' technique. I have a fixed pixel
layout for this website. I have created a background image with the
left side the color and pixel size of the left sidebar and the
remaining part of the image the color of the background on the
maincontent div. Where do I put this image in order to get it to
tile vertically? If I put it on the container div then it will mess
up the header - won't it?
What else do I need to take into consideration? What about my
footer div? I have been going around in circles with this for
months so I would appreciate someone walking me through all the
steps. Here's the webpage I'm referring to:
www.saponelawfirm.com/index
Many thanks!

Hey there lads & lassies,
I've just put the background image on the container div and
it looks good but the footer looks kinda funky now - the sidebar
and the footer don't line up the way they should - how do I take
care of this? I've tried putting the padding on the footer to 0 but
to no avail. Can you help?
Here's the link:
www.saponelawfirm.com/index
Cheers!!!!!

Faux Columns - Problems Understanding and Implementing

Here's my site. It's not functional yet, so clicking on links won't do you any good. You can if you really want to, though:
http://www.ladyhawkslair.com/index04.html
The layout content consists of
A header (left; position absolute)
mainContent (floated right)
mainNav (floated left)
sidebar (floated left)
footer (cleared: both)
wrapper (contains everything and provides stone texture background)
I've read a little about faux columns, but
1) I'm not entirely sure I understand the concept. I'm really new to CSS.
2) I want to apply a fix to my current site and not re-do everything. Because I am new to CSS, it's taken me forever!
The examples cited on the pages I read dealt with columns of the same length. On my page, the "main content" starts at the top and the sidebar starts further down. I could cheat and add more height to the sidebar and main content, but it might not look very good if someone is using a font-size of 30 or something. Also, my footer would get lost. (Would this be an adequate if nothing else works?
Here's my code : http://www.ladyhawkslair.com/code.txt
If you can help me apply a column fix to my current design, please explain it to me like I'm five years old.
If I have to redo everything, I could put the header, mainNav and sidebar into a single column, since they are the same size. In that case, still explain it to me like I'm five.

I've messed around with a wrapper similar to the one you made for me (very nice by the way), but I don't think the faux column approach will work for me without a major page design overhaul. The repeating structure is interrupted at various points by a 15 px border of the stone texture, which I would like to keep, especially around the header. The wrapper background is then out of sync with the rest of the page. (The tear pattern doesn't match between the background for the sidebar and the background for the wrapper.) I tried setting top padding. I can get the two to sync, but then the top of the page looks ridiculous.
I could re-design the header, mainNav and the sidebar into a single column, but sync between the wrapper and the images on the sidebar would still be a problem because I would like to keep the 15px border around the logo on the left and (if possible) between "main nav" and the sidebar.
I've read about a javascript solution, but there are some issues:
1) I know nothing about javascript
2) I'm wondering if the two columns must start at the same place on the page. My "sidebar" div starts way below the "main content" div. I'd like both to extend to the end of the "main content" div.
3) If I created a two-column page (each column starts at the same distance from the top of the page, would the javascript work? Will it work with the page layout as it is?
My last resort would be to set the height to "auto" on the main content and match the height of the sidebar according to default font size. It may not look as pretty as it could for some people, but it's better than nothing, I suppose.
If you can think of a better option for me, let me know, especially if someone could help me with the javascript.
P.S. Here is the "last resort" solution: http://www.ladyhawkslair.com
P.P.S It turns out it's not much of a solution because it doesn't look the same in live view, Firefox and IE. Each is different.

Help with divs and columns please?

Hello all,
I'm quite new to dreamweaver and having problems. I am
designing a site with 3 columns (left for nav, middle for main
content and right for offers & advertising etc.) I am using
tables within the divs to organise content and I have aligned the
divs left and in all sorts of other ways to try and get them to
look like 3 columns but no matter what I do the right column always
ends up underneath the middle column. What am I doing wrong?
Thanks in advance

Faux columns. I don't like javascript solutions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Jay Jhabrix" <[email protected]> wrote in message
news:ga92ts$23c$[email protected]..
> Murray,
>
> BTW... am trying to create a 3 column site... staying
away from tables...
> :)
>
> As i see it i have two choices:
> 1/ Go for a 'faux column" kind of solution
> 2/ PVII's javascript driven answer
>
> Ideally, i'd like to do it purely in CSS but with
minimal hacks. I will be
> using tables but don't want them to be a feature of the
design... purely
> for content. Background white. But want to have four
borders... left,
> right and the two central ones. Fixed width. Any
suggestions, links?
>
> (One menu is definitely PMM.)
>
> Cheers,
>
> JJ
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:ga920g$tv$[email protected]..
>>I can take it....
>>
>> --
>> Murray --- ICQ 71997575
>> Adobe Community Expert
>> (If you *MUST* email me, don't LAUGH when you do
so!)
>> ==================
>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>> ==================
>>
>>
>> "Jay Jhabrix" <[email protected]> wrote in
message
>> news:ga91so$ph$[email protected]..
>>> "Murray *ACE*"
<[email protected]> wrote in message
>>> news:ga8vu7$rpa$[email protected]..
>>>
>>>> Heh - no. It was the perceived status of the
OP.
>>>
>>> That's what i kind of figured... but couldn't
resist the dig ;->
>>>
>>
>
>

Help with two DIVs as columns at 100% page height

I've got two DIVs side by side on my page and I want both columns to fill the page from top to bottom.
The left DIV stops about half way down the page.
There are DIVs inside of each column.
My test link is: http://faceworks.webtestingsite.net/pages/facials.html
Here's the CSS I used for the columns,
#leftSideBkgd {
          position:absolute;
          min-height:100%;
          background-color: #f0f0f0;
          width: 25%;
          left: 0px;
          top: 0px;
          z-index: 0;
          background-image: url(../img/bkgd/leftMenu.jpg);
          background-repeat: repeat-y;
          background-position: 100% 0px;
#rightSideBkgd {
          position: absolute;
          background-color: #FFFFFF;
          width: 75%;
          left: 25%;
          top: 0px;
          z-index: 0;
          min-height:100%;
          background-image: url(../img/bkgd/pageBkgd.jpg);
          background-repeat: repeat-x;
          background-position: 0px 0px;
html {
          height:100%;
body {
          height:100%;
          background-image: url(../img/bkgd/pageBkgd.jpg);
          background-repeat: repeat-x;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          background-color: #FFF;
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 14px;
          font-style: normal;
          line-height: 1.75em;
          font-weight: normal;
          color: #000;
Thanks for your help with this

You cannot safely force the height on those divs, without also getting ugly vertical scrollbars.
Your choices are three -
1. Use Faux columns (Google it) to make it *look* like the divs are the same height.
2. Use javascript to actually dynamically determine what height to use for the columns.
3. Use CSS3 to make the adjacent columns behave as if they were two adjacent cells in a table, resulting in them being the same height.
My preference is #1 - it's easy and VERY effective. I don't like #2 as a solution, and #3 works beautifully if you are not worried about supporting IE6 or 7.

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

Bottom of columns are uneven

I have a web page that looks perfect in Dreamweaver and also using browser previews in Dreamweaver but when I view the page with any browser (outside of DW) the bottom of the columns are not even and the background image shows. I have uploaded all the files to a folder on Google docs since I thought posting the code here would be too long.
I have included the index.html file as well as the css file and most of the images.
https://docs.google.com/leaf?id=0B3JGyktK42m-MjIzNTUzNWYtMzFlZi00YWU0LTg3ZjctMzY5MjJkYmU5N jE2&hl=en
I also have two screenshots of the problem - the first one in Dreamweaver where the bottom is correct, and the other in IE8 where the bottom is uneven.
Now the bad one:
Any help would be appreciated - I just don't understand why it looks perfect in Dreamweaver and not in the browsers. What am I doing wrong?
I also have a terrible time with the float:left and float:right not seeming to do what tutorials says it will do.

For Equal Height CSS Columns, you have three options:
1) Start your project with a special template that provides for equal height CSS columns:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser- css-no-hacks
2) Fake it with a 2 or 3-toned background image that repeats vertically down the page. This method is called Faux Columns.
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
3) Use a Javascript.
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Also, see float clearing ~ http://css.maxdesign.com.au/floatutorial/clear.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Trouble with CSS div column

Just got DW CS3 and having a good time learning the new
features. About to pull my hair out regarding one issue though, and
I have definitely hit the wall, I pretty sure I tried every option,
but maybe I am missing something. Here is the page in question:
http://www.grpg.org/NewDesign
I cannot get the right and left hand columns to just stop
where the main container stops, i.e. the white section, before the
footer. As you can see on the right hand column, if I make the
height 100%, it goes past the footer, and if I make it a fixed
length, like on the left column, it does not extend all the way to
the bottom...I need them both to stretch with the main container,
i.e. the white part. I have tried all the positioning tags,
relative, absolute, etc. and none of them seem to give me what I
want. Please HELP!

The best (i.e., non-javascript) method to make columns look
to be the same
height is to use a faux-column method. Google that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SnakEyez02" <[email protected]> wrote in
message
news:g6snvo$6c8$[email protected]..
> Divs do not work like tables, so if you expand 2 divs
down next to each
> other
> they will keep their respective heights unlike tables
which expand. I
> would
> recommend taking a look at the source code of the
following example and
> read
> over the tutorial that accompanies it:
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/col3fluid.htm
> Example
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
> Project Seven also has some other good tutorials so I'll
just give you
> that
> link for a later time:
>
>
http://www.projectseven.com/tutorials/index.htm
>
>

Faux column challenge

Similar Messages

Maybe you are looking for