Image Alignment Issue

[Cardman]

I am hopeful that someone can quickly solve my image alignment issue
when things are just not going right and where my attempts to solve
this alignment issue have all failed.

First of all take a look here...
http://www.cardman.com/switches.html

In MIE this page looks perfect. Unfortunately both Netscape and Opera
show these item photos in the wrong place. For some *unknown* reason
all the photos drop down to align with the green "Don't forget to
include Postage and VAT" box in the left hand column.

This causes the odd effect that any photo above this green box drops
down to below the green box, but any photo that is below this section
is aligned correctly.

So I admit that trying to do photo alignment under HTML (align=left)
was a bad idea. My problem is that the guy who showed me how much
better my site would look under the CSS stylesheet missed out showing
me the CSS code to correctly align these item photos. And since I am
quite new at stylesheets, even after browsing the CSS specification,
then I am currently at a loss on how to correctly align these photos
under CSS.

Well beyond trapping the whole section in a table in an undesirable
dirty fix solution.

My most recent testing has successfully moved the whole item block to
being controlled under CSS. Only problem now is that the problem has
got somewhat worse. As when I define a nice window to dump this item
block in, including an IMG section to control photo placement, then
now the whole damned block (photo and text) drops down below that same
green box.

This tells me that there is some odd CSS pointer that is saying that
any CSS stuff is to be vertically aligned from here. The problem then
is that when the second column was started this pointer did not reset
back to zero.

I think in all this tells me that there is a fault in the original CSS
code that simply did not take into account that there would be item
photos left aligned to the text in this second column.

So since I am now flapping about helplessly and about to go belly-up,
in some fear of pulling apart this original CSS code, then so do I
hope that someone with some actual CSS experience can point out how I
can get these damned photos to appear in the right place.

My prior thanks of course.

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

[Viken Karaguesian]

Hi,

In MIE this page looks perfect. Unfortunately both Netscape and Opera
show these item photos in the wrong place. For some *unknown* reason
all the photos drop down to align with the green "Don't forget to
include Postage and VAT" box in the left hand column.
It seems to me that the problem is that the sidebar <div>s (in your menu.css
sheet) all have clear:both in them. That would not allow any floating
elements on either side of the <div>, forcing anything else with a float to
go below them. Since your images all have "align: left", they are forced
below the last <div> with a clear: both command, which is the "Postage and
VAT" div.
So I admit that trying to do photo alignment under HTML (align=left)
was a bad idea. My problem is that the guy who showed me how much
better my site would look under the CSS stylesheet missed out showing
me the CSS code to correctly align these item photos.
CSS code: style="float: left";
This tells me that there is some odd CSS pointer that is saying that
any CSS stuff is to be vertically aligned from here......
.......I think in all this tells me that there is a fault in the original
CSS
code that simply did not take into account that there would be item
photos left aligned to the text in this second column.

clear:both

The problem with removing the clear:both, is that all your sidebar <div>s
will start to float up and stack side by side, I think (which is probabaly
why you have clear:both in there). I'm not sure what the solution is. You
could have a containing sidebar <div> that houses all you other sidebars.
Then you could float:left that one big containing sidebar and not have to
set clear: both. If you set the containing sidebar to a fixed with that's
just wide enough to accomodate the smaller sidebar widths (plus any padding
and margin) they would, in theory, stack top-to-bottom and you wouldn't have
to float them left. It's just a thought.

I am not a design expert though. :>) As far as the problem with the
pictures goes, I believe that it's because of the clear:both property of
your sidebar <div>s.

Hope this helps a bit.

Viken K.
http://home.comcast.net/~vikenk

[Cardman]

On Sun, 26 Feb 2006 09:50:27 -0500, "Viken Karaguesian"
<vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:

Hi,

In MIE this page looks perfect. Unfortunately both Netscape and Opera
show these item photos in the wrong place. For some *unknown* reason
all the photos drop down to align with the green "Don't forget to
include Postage and VAT" box in the left hand column.
It seems to me that the problem is that the sidebar <div>s (in your menu.css
sheet) all have clear:both in them. That would not allow any floating
elements on either side of the <div>, forcing anything else with a float to
go below them. Since your images all have "align: left", they are forced
below the last <div> with a clear: both command, which is the "Postage and
VAT" div.

I agree. I have been doing some testing today and the photo image
alignment is going wrong due to the sidebars.

On this mentioned page the sidebar is made up into 5 sections...

1. The main menu.
2. The language bar.
3. The bookmarking section.
4. The main address.
5. The postage and VAT section.

From my testing if only the main menu is used, and the following four
sidebar sections are removed, then the main content photos align
correctly. It seems that you are closer to me in working out why this
is.

So I admit that trying to do photo alignment under HTML (align=left)
was a bad idea. My problem is that the guy who showed me how much
better my site would look under the CSS stylesheet missed out showing
me the CSS code to correctly align these item photos.

CSS code: style="float: left";

Yes, it seems to do that fine when put under CSS. However, since I can
now get this photo alignment working fine without the CSS code, then I
am currently wondering if it is worth the extra code?

This tells me that there is some odd CSS pointer that is saying that
any CSS stuff is to be vertically aligned from here......
.......I think in all this tells me that there is a fault in the original
CSS
code that simply did not take into account that there would be item
photos left aligned to the text in this second column.

clear:both

That is what patches these 5 sidebar sections together. Just a shame
that the image placement is left out of place once it is complete.
The problem with removing the clear:both, is that all your sidebar <div>s
will start to float up and stack side by side,
Yes, I have seen that done when removing that clear:both line.

This explains why the photo images are now trying to align in the next
column next to this last sidebar DIV.
I think (which is probabaly why you have clear:both in there).
Correct.

This code was passed to me from a CSS expert. So I have been trying
for ages to work out why my code is failing to work correctly under
his code. And I thought that it was my fault...
I'm not sure what the solution is.
Then I sure hope that someone here does.
You
could have a containing sidebar <div> that houses all you other sidebars.
The problem with this is that different sidebar sections have
different colours and styles. Not to mention that they can be put
together and mixed around as I desire.

For example my welcome page contains a 6th sidebar section, concerning
payment options, that is placed in the middle and not seen in that
Smart Switches page.

So my main aim is now to replace this CSS sidebar code with some
suitable code to do this same thing without messing up the following
photo image alignment.

My answer for now would be to simply "remove" the following 4 sidebars
on these item pages. Losing information like my address would be very
unhelpful though.
Then you could float:left that one big containing sidebar and not have to
set clear: both.
That would be nice. The only problem now is to work in some sub
sections for different styles.
If you set the containing sidebar to a fixed with that's
just wide enough to accomodate the smaller sidebar widths (plus any padding
and margin) they would, in theory, stack top-to-bottom and you wouldn't have
to float them left. It's just a thought.
I am not so sure about that. The photo images always align next to the
last sidebar section placed in the code. So by placing these on top of
one larger sidebar would still (in theory) have the photos pile up
next to the last sidebar section placed down.

Unless there some pointer override command then the only answer is to
just have one sidebar DIV section. It is possible to replicate these
styles using tables, but that is what I am trying to move away from.

It may be possible to place them down using different code without
affecting the image alignment, but I would need to do quite a lot of
testing in order to "get lucky" in terms of finding out what that
exact code is.
I am not a design expert though. :>) As far as the problem with the
pictures goes, I believe that it's because of the clear:both property of
your sidebar <div>s.
Testing has proved you correct. I did spot that these was a problem
here myself not too long ago, but you did point out what was going
wrong.

Now it is all about figuring out a solution.
Hope this helps a bit.

Thanks for your help. I was wondering it anyone was brave enough to
step though this code trying to find an unknown cause.

Hopefully someone else here can now point out how to merge these
sidebar sections into just one section...

DIV.sidebar
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff
}

DIV.sidebar2
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #ffff00;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #222222;
TEXT-ALIGN: center
}

DIV.sidebar3
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #2222ff;
TEXT-ALIGN: center
}

DIV.sidebar4
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
BORDER-RIGHT: #ff0000 1px solid;
BORDER-LEFT: #ff0000 1px solid;
BORDER-TOP: #ff0000 18px solid;
BORDER-BOTTOM: #ff0000 18px solid;
PADDING-BOTTOM: 0px;
MARGIN-BOTTOM: 1em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffff00;
TEXT-ALIGN: center;
}

DIV.sidebar5
{
CLEAR: both;
FONT-SIZE: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
FLOAT: left;
MARGIN-BOTTOM: 0.7em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #00ff00;
TEXT-ALIGN: center
}

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

[Viken Karaguesian]

Hi,

Hopefully someone else here can now point out how to merge these
sidebar sections into just one section...
You could wrap all of them in a container <div>, as I had previously
mentioned, but...

You
could have a containing sidebar <div> that houses all you other sidebars.

The problem with this is that different sidebar sections have
different colours and styles. Not to mention that they can be put
together and mixed around as I desire.

Wrapping them in a container wouldn't affect that at all. All the individual
<div>'s would still keep their styles.

See your code below for my modification. I haven't tested it myself, though
(sorry, no time right now). But, basically, I removed all the clears and
floats from the other sidebars and added it to the container div. So you
would add to your sidebars:

div.sidebar_container { (or whatever name you want to use)
width: 23ex;
float: left;
}

Then this would be your html:

<div class="sidebar_container">
<div class="sidebar"></div>
<div class="sidebar1"></div>

</div>
DIV.sidebar
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff
}

DIV.sidebar2
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #ffff00;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #222222;
TEXT-ALIGN: center
}

DIV.sidebar3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #2222ff;
TEXT-ALIGN: center
}

DIV.sidebar4
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
BORDER-RIGHT: #ff0000 1px solid;
BORDER-LEFT: #ff0000 1px solid;
BORDER-TOP: #ff0000 18px solid;
BORDER-BOTTOM: #ff0000 18px solid;
PADDING-BOTTOM: 0px;
MARGIN-BOTTOM: 1em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffff00;
TEXT-ALIGN: center;
}

DIV.sidebar5
{
FONT-SIZE: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN-BOTTOM: 0.7em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #00ff00;
TEXT-ALIGN: center
}

--
Viken K.
http://home.comcast.net/~vikenk
"Cardman" <do****@spam-me.com> wrote in message
news:oa********************************@4ax.com... On Sun, 26 Feb 2006 09:50:27 -0500, "Viken Karaguesian"
<vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:

Hi,

In MIE this page looks perfect. Unfortunately both Netscape and Opera
show these item photos in the wrong place. For some *unknown* reason
all the photos drop down to align with the green "Don't forget to
include Postage and VAT" box in the left hand column.
It seems to me that the problem is that the sidebar <div>s (in your
menu.css
sheet) all have clear:both in them. That would not allow any floating
elements on either side of the <div>, forcing anything else with a float
to
go below them. Since your images all have "align: left", they are forced
below the last <div> with a clear: both command, which is the "Postage and
VAT" div.

I agree. I have been doing some testing today and the photo image
alignment is going wrong due to the sidebars.

On this mentioned page the sidebar is made up into 5 sections...

1. The main menu.
2. The language bar.
3. The bookmarking section.
4. The main address.
5. The postage and VAT section.

From my testing if only the main menu is used, and the following four
sidebar sections are removed, then the main content photos align
correctly. It seems that you are closer to me in working out why this
is.

So I admit that trying to do photo alignment under HTML (align=left)
was a bad idea. My problem is that the guy who showed me how much
better my site would look under the CSS stylesheet missed out showing
me the CSS code to correctly align these item photos.

CSS code: style="float: left";

Yes, it seems to do that fine when put under CSS. However, since I can
now get this photo alignment working fine without the CSS code, then I
am currently wondering if it is worth the extra code?

This tells me that there is some odd CSS pointer that is saying that
any CSS stuff is to be vertically aligned from here......
.......I think in all this tells me that there is a fault in the
original
CSS
code that simply did not take into account that there would be item
photos left aligned to the text in this second column.

clear:both

That is what patches these 5 sidebar sections together. Just a shame
that the image placement is left out of place once it is complete.

The problem with removing the clear:both, is that all your sidebar <div>s
will start to float up and stack side by side,

Yes, I have seen that done when removing that clear:both line.

This explains why the photo images are now trying to align in the next
column next to this last sidebar DIV.

I think (which is probabaly why you have clear:both in there).

Correct.

This code was passed to me from a CSS expert. So I have been trying
for ages to work out why my code is failing to work correctly under
his code. And I thought that it was my fault...

I'm not sure what the solution is.

Then I sure hope that someone here does.

For example my welcome page contains a 6th sidebar section, concerning
payment options, that is placed in the middle and not seen in that
Smart Switches page.

So my main aim is now to replace this CSS sidebar code with some
suitable code to do this same thing without messing up the following
photo image alignment.

My answer for now would be to simply "remove" the following 4 sidebars
on these item pages. Losing information like my address would be very
unhelpful though.

Then you could float:left that one big containing sidebar and not have to
set clear: both.

That would be nice. The only problem now is to work in some sub
sections for different styles.

If you set the containing sidebar to a fixed with that's
just wide enough to accomodate the smaller sidebar widths (plus any
padding
and margin) they would, in theory, stack top-to-bottom and you wouldn't
have
to float them left. It's just a thought.

I am not so sure about that. The photo images always align next to the
last sidebar section placed in the code. So by placing these on top of
one larger sidebar would still (in theory) have the photos pile up
next to the last sidebar section placed down.

Unless there some pointer override command then the only answer is to
just have one sidebar DIV section. It is possible to replicate these
styles using tables, but that is what I am trying to move away from.

It may be possible to place them down using different code without
affecting the image alignment, but I would need to do quite a lot of
testing in order to "get lucky" in terms of finding out what that
exact code is.

I am not a design expert though. :>) As far as the problem with the
pictures goes, I believe that it's because of the clear:both property of
your sidebar <div>s.

Testing has proved you correct. I did spot that these was a problem
here myself not too long ago, but you did point out what was going
wrong.

Now it is all about figuring out a solution.

Hope this helps a bit.

Thanks for your help. I was wondering it anyone was brave enough to
step though this code trying to find an unknown cause.
Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

[Viken Karaguesian]

--
Viken K.
http://home.comcast.net/~vikenk
"Cardman" <do****@spam-me.com> wrote in message
news:oa********************************@4ax.com...

On Sun, 26 Feb 2006 09:50:27 -0500, "Viken Karaguesian"
<vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:

Hi,

In MIE this page looks perfect. Unfortunately both Netscape and Opera
show these item photos in the wrong place. For some *unknown* reason
all the photos drop down to align with the green "Don't forget to
include Postage and VAT" box in the left hand column.

It seems to me that the problem is that the sidebar <div>s (in your
menu.css
sheet) all have clear:both in them. That would not allow any floating
elements on either side of the <div>, forcing anything else with a float
to
go below them. Since your images all have "align: left", they are forced
below the last <div> with a clear: both command, which is the "Postage and
VAT" div.

I agree. I have been doing some testing today and the photo image
alignment is going wrong due to the sidebars.

On this mentioned page the sidebar is made up into 5 sections...

1. The main menu.
2. The language bar.
3. The bookmarking section.
4. The main address.
5. The postage and VAT section.

From my testing if only the main menu is used, and the following four
sidebar sections are removed, then the main content photos align
correctly. It seems that you are closer to me in working out why this
is.

So I admit that trying to do photo alignment under HTML (align=left)
was a bad idea. My problem is that the guy who showed me how much
better my site would look under the CSS stylesheet missed out showing
me the CSS code to correctly align these item photos.

CSS code: style="float: left";

Yes, it seems to do that fine when put under CSS. However, since I can
now get this photo alignment working fine without the CSS code, then I
am currently wondering if it is worth the extra code?

This tells me that there is some odd CSS pointer that is saying that
any CSS stuff is to be vertically aligned from here......
.......I think in all this tells me that there is a fault in the
original
CSS
code that simply did not take into account that there would be item
photos left aligned to the text in this second column.

clear:both

That is what patches these 5 sidebar sections together. Just a shame
that the image placement is left out of place once it is complete.

The problem with removing the clear:both, is that all your sidebar <div>s
will start to float up and stack side by side,

Yes, I have seen that done when removing that clear:both line.

This explains why the photo images are now trying to align in the next
column next to this last sidebar DIV.

I think (which is probabaly why you have clear:both in there).

Correct.

This code was passed to me from a CSS expert. So I have been trying
for ages to work out why my code is failing to work correctly under
his code. And I thought that it was my fault...

I'm not sure what the solution is.

Then I sure hope that someone here does.

You
could have a containing sidebar <div> that houses all you other sidebars.

The problem with this is that different sidebar sections have
different colours and styles. Not to mention that they can be put
together and mixed around as I desire.

For example my welcome page contains a 6th sidebar section, concerning
payment options, that is placed in the middle and not seen in that
Smart Switches page.

So my main aim is now to replace this CSS sidebar code with some
suitable code to do this same thing without messing up the following
photo image alignment.

My answer for now would be to simply "remove" the following 4 sidebars
on these item pages. Losing information like my address would be very
unhelpful though.

Then you could float:left that one big containing sidebar and not have to
set clear: both.

That would be nice. The only problem now is to work in some sub
sections for different styles.

If you set the containing sidebar to a fixed with that's
just wide enough to accomodate the smaller sidebar widths (plus any
padding
and margin) they would, in theory, stack top-to-bottom and you wouldn't
have
to float them left. It's just a thought.

I am not so sure about that. The photo images always align next to the
last sidebar section placed in the code. So by placing these on top of
one larger sidebar would still (in theory) have the photos pile up
next to the last sidebar section placed down.

Unless there some pointer override command then the only answer is to
just have one sidebar DIV section. It is possible to replicate these
styles using tables, but that is what I am trying to move away from.

It may be possible to place them down using different code without
affecting the image alignment, but I would need to do quite a lot of
testing in order to "get lucky" in terms of finding out what that
exact code is.

I am not a design expert though. :>) As far as the problem with the
pictures goes, I believe that it's because of the clear:both property of
your sidebar <div>s.

Testing has proved you correct. I did spot that these was a problem
here myself not too long ago, but you did point out what was going
wrong.

Now it is all about figuring out a solution.

Hope this helps a bit.

Thanks for your help. I was wondering it anyone was brave enough to
step though this code trying to find an unknown cause.

Hopefully someone else here can now point out how to merge these
sidebar sections into just one section...

DIV.sidebar
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff
}

DIV.sidebar2
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #ffff00;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #222222;
TEXT-ALIGN: center
}

DIV.sidebar3
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #2222ff;
TEXT-ALIGN: center
}

DIV.sidebar4
{
CLEAR: both;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
FLOAT: left;
BORDER-RIGHT: #ff0000 1px solid;
BORDER-LEFT: #ff0000 1px solid;
BORDER-TOP: #ff0000 18px solid;
BORDER-BOTTOM: #ff0000 18px solid;
PADDING-BOTTOM: 0px;
MARGIN-BOTTOM: 1em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffff00;
TEXT-ALIGN: center;
}

DIV.sidebar5
{
CLEAR: both;
FONT-SIZE: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
FLOAT: left;
MARGIN-BOTTOM: 0.7em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #00ff00;
TEXT-ALIGN: center
}

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

[Viken Karaguesian]

Hi,

SORRY. MY LAST POST GOT SENT BY MISTAKE.

Hopefully someone else here can now point out how to merge these
sidebar sections into just one section...
You could wrap all of them in a container <div>, as I had previously
mentioned, but...

You
could have a containing sidebar <div> that houses all you other sidebars.

The problem with this is that different sidebar sections have
different colours and styles. Not to mention that they can be put
together and mixed around as I desire.

Wrapping them in a container wouldn't affect that at all. All the individual
<div>'s would still keep their styles.

See your code below for my modification. I haven't tested it myself, though
(sorry, no time right now). But, basically, I removed all the clears and
floats from the other sidebars and added it to the container div. So you
would add to your sidebars:

div.sidebar_container { (or whatever name you want to use)
width: 23ex; <-- to match the width of the other <div>'s
float: left;
}

Then this would be your html:

<div class="sidebar_container">
<div class="sidebar"></div>
<div class="sidebar1"></div>
<div class="sidebar2"></div>
<div class="sidebar3"></div>
<div class="sidebar4"></div>
<div class="sidebar5"></div>
</div>

That should contain them without having to use clear:both, and they would
still retain their individual styles.
DIV.sidebar
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff
}

DIV.sidebar2
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #ffff00;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #222222;
TEXT-ALIGN: center
}

DIV.sidebar3
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
MARGIN-BOTTOM: 1em;
PADDING-BOTTOM: 0px;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #2222ff;
TEXT-ALIGN: center
}

DIV.sidebar4
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 100%;
BORDER-RIGHT: #ff0000 1px solid;
BORDER-LEFT: #ff0000 1px solid;
BORDER-TOP: #ff0000 18px solid;
BORDER-BOTTOM: #ff0000 18px solid;
PADDING-BOTTOM: 0px;
MARGIN-BOTTOM: 1em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffff00;
TEXT-ALIGN: center;
}

DIV.sidebar5
{
FONT-SIZE: 100%;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN-BOTTOM: 0.7em;
WIDTH: 21.5ex;
COLOR: #000000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #00ff00;
TEXT-ALIGN: center
}

--
Viken K.
http://home.comcast.net/~vikenk

[Cardman]

On Sun, 26 Feb 2006 18:10:29 -0500, "Viken Karaguesian"
<vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:

See your code below for my modification. I haven't tested it myself, though
(sorry, no time right now). But, basically, I removed all the clears and
floats from the other sidebars and added it to the container div. So you
would add to your sidebars:

div.sidebar_container { (or whatever name you want to use)
width: 23ex; <-- to match the width of the other <div>'s
That would be 21.5ex. The main page content starts at 22ex allowing
for a 0.5ex gap.
float: left;
}

Then this would be your html:

<div class="sidebar_container">
<div class="sidebar"></div>
<div class="sidebar1"></div>
<div class="sidebar2"></div>
<div class="sidebar3"></div>
<div class="sidebar4"></div>
<div class="sidebar5"></div>
</div>

That should contain them without having to use clear:both, and they would
still retain their individual styles.

Well I am pleased to say that this solution you provided did work. You
can see the final version here...
http://www.cardman.com/switches.html

So now I can go on to complete the rest of this site change-over in
order to make all pages use the CSS stylesheet.

This reminds me. Does anyone know of a WYSIWYG editor that can display
my site pages in the same way that they appear?

Long ago I used to use AOLPress but over time this application became
less and less compatible with all the different possibilities. So at
this time I have to do all my HTML editing in notepad.

Anyway, thanks for your help, when this no doubt saved me a couple of
weeks worth of work achieving this same solution.

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk

[Viken Karaguesian]

>>div.sidebar_container { (or whatever name you want to use)

width: 23ex; <-- to match the width of the other <div>'s
That would be 21.5ex. The main page content starts at 22ex allowing
for a 0.5ex gap.

Yeah...I was adding some space to accomodate any padding/margins/borders.
Well I am pleased to say that this solution you provided did work. You
can see the final version here...
http://www.cardman.com/switches.html
I glad to be able to help. I'm still in the learning stages myself. I find
that helping other people and working on debugging their problems helps me
learn as well.
This reminds me. Does anyone know of a WYSIWYG editor that can display
my site pages in the same way that they appear?

WSYWYG by its self will not generate a webpage better than you can. I use
Microsoft Frontpage, but I haven't touched the WSYWYG function in it in a
long time. I basically use it as a text editor. It has a very good "code
only" section where you simply type code. Contrary to how it may seem, once
you know what you're doing, it's actually *faster* to type code as opposed
to moving the mouse around and choosing options from menus, etc in WSYWYG
mode.

--
Viken K.
http://home.comcast.net/~vikenk

[Cardman]

On Sun, 26 Feb 2006 21:25:37 -0500, "Viken Karaguesian"
<vikenkNO_SPAM@NO_SPAMcomcast.net> wrote:

div.sidebar_container { (or whatever name you want to use)
width: 23ex; <-- to match the width of the other <div>'s
That would be 21.5ex. The main page content starts at 22ex allowing
for a 0.5ex gap.

Yeah...I was adding some space to accomodate any padding/margins/borders.

I think my site is quite basic compared to some I have seen. All home
coded and where one day maybe I will figure out how to home code a
shopping basket system as well.

Well I am pleased to say that this solution you provided did work. You
can see the final version here...
http://www.cardman.com/switches.html

I glad to be able to help. I'm still in the learning stages myself. I find
that helping other people and working on debugging their problems helps me
learn as well.

I am a professional computer programmer with over 30 qualifications in
this subject. Doing long projects was nice in the past, but due to
current time constraints I just have to quickly patch together a
workable system.

This reminds me. Does anyone know of a WYSIWYG editor that can display
my site pages in the same way that they appear?

WSYWYG by its self will not generate a webpage better than you can.

AOLPress even has a spell checker. :-]

That I guess is the main reason why I currently write my News page in
AOLPress before copying it over to the on-line CSS stylesheet version.
I use
Microsoft Frontpage, but I haven't touched the WSYWYG function in it in a
long time. I basically use it as a text editor.
Hmmm. Viva la notepad then.
It has a very good "code
only" section where you simply type code. Contrary to how it may seem, once
you know what you're doing, it's actually *faster* to type code as opposed
to moving the mouse around and choosing options from menus, etc in WSYWYG
mode.

Overlooking tag mistakes. The one thing that is certainly true is that
the code is cleaner and better organized.

Anyway, I had better go do my taxes. Thanks again.

Cardman
http://www.cardman.org
http://www.cardman.com
http://www.cardman.co.uk