Click here to get back home

Three column layout, middle column clear:both; affects other two columns;no tables
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Three column layout, middle column clear:both; affects other two columns;no tables Jim Carlock 03-09-2007
Posted by Jim Carlock on March 9, 2007, 11:31 pm
Please log in for more thread options

I'm working with three column layouts without tables.

The page in question...

http://www.microcosmotalk.com/images/garden/vine.asp

Using clear:both; causes problems in the left and right <div>
columns, meaning that each <div> is not autonomous, they
interact with each other when clear: styles apply.

I've tried putting the <div> item with the margin:auto; inside
a <div style="width:100%;"> but that fails to work as I want
it to.

Any suggesttions would be greatly appreciated (as long as they
don't involve tables).

Thanks.

--
Jim Carlock
Post replies to the group.



Posted by Bergamot on March 10, 2007, 12:00 am
Please log in for more thread options

Jim Carlock wrote:
>
> I'm working with three column layouts without tables.
> http://www.microcosmotalk.com/images/garden/vine.asp
>
> Any suggesttions would be greatly appreciated

http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/

--
Berg

Posted by Ben C on March 10, 2007, 4:34 pm
Please log in for more thread options


> I'm working with three column layouts without tables.
>
> The page in question...
>
> http://www.microcosmotalk.com/images/garden/vine.asp
>
> Using clear:both; causes problems in the left and right <div>
> columns, meaning that each <div> is not autonomous, they
> interact with each other when clear: styles apply.

I don't understand your description of the problem, but it might help to
know that the effect of "clear" is restricted to the block formatting
context that it's used in.

Some discussion here.

http://groups.google.co.uk/group/alt.html/msg/9a71ffe22aca6762?hl=en&

Click on More Options and View Thread to see the rest of the thread.

Posted by Jim Carlock on March 10, 2007, 10:48 pm
Please log in for more thread options


> I'm working with three column layouts without tables.
>
> The page in question...
>
> http://www.microcosmotalk.com/images/garden/vine.asp
>
> Using clear:both; causes problems in the left and right <div>
> columns, meaning that each <div> is not autonomous, they
> interact with each other when clear: styles apply.


"Ben C" posted...
: I don't understand your description of the problem, but it might
: help to know that the effect of "clear" is restricted to the block
: formatting context that it's used in.
:
: Some discussion here.
:
: http://groups.google.co.uk/group/alt.html/msg/9a71ffe22aca6762?hl=en&
:
: Click on More Options and View Thread to see the rest of the
: thread.

Hi Ben,

The problem is with IE6 (and possibly all versions of IE). I've
corrected the problem by using a table. I gave up on trying to
get the <div> to work. Maybe I've got something going in a
global <div> declare somewhere, but I tend to think of more
as an IE only problem.

Basically, the problem occurs when wrapping those three small
pictures into a <div style="width:100%;">. In such a case I need
to clear:both; but the clear:both; breaks out of the container id-
entified as, <div id="content">, and causes the container for the
pictures (<div style="clear:both;">) to fall below the bottoms of
the two outside (<div id="left_side"> and <div id="right_side">)
containers.

Perhaps there's another way to get around this, I took a look at
the link Bergadot posted,

http://webhost.bridgew.edu/etribou/layouts/skidoo_redux/

and I started to test things out with that, and read through the
commented CSS there. But I ended up throwing a table in to
contain the small images and it works much better than trying
to get a <div style="clear:both;"> or <div style="width:100%;">
container to hold the images.

I'm reading through the link you posted right at this moment.

You wrote a pretty good explanation of using floats to do
columns ends up with some unexpected results (specifically
I see the unexpected results inside of IE).
http://groups.google.co.uk/group/alt.html/browse_frm/thread/8e22a70cd0bdcb4e/9a71ffe22aca6762

Thanks.

--
Jim Carlock
Post replies to the group.



Posted by Ben C on March 11, 2007, 4:56 am
Please log in for more thread options


[...]
> The problem is with IE6 (and possibly all versions of IE). I've
> corrected the problem by using a table. I gave up on trying to
> get the <div> to work. Maybe I've got something going in a
> global <div> declare somewhere, but I tend to think of more
> as an IE only problem.
>
> Basically, the problem occurs when wrapping those three small
> pictures into a <div style="width:100%;">. In such a case I need
> to clear:both; but the clear:both; breaks out of the container id-
> entified as, <div id="content">, and causes the container for the
> pictures (<div style="clear:both;">) to fall below the bottoms of
> the two outside (<div id="left_side"> and <div id="right_side">)
> containers.

There it might help to restrict clear to the div it's in (<div
style="width:100%">) by making _that_ div floated or display: table-cell
or any of the other things that start a new block formatting context.

Similar ThreadsPosted
3 column css layout with the middle fixed February 17, 2006, 4:32 pm
separate tables with common column widths September 1, 2006, 4:40 am
Implied width of implied center column in 3 column table June 30, 2008, 4:23 am
Three column forms with CSS October 23, 2006, 7:29 pm
Manipulating a two-column table? March 8, 2006, 12:09 pm
texts in same column but different size April 3, 2008, 8:27 am
Hidden column in HTML page October 4, 2004, 7:13 am
multi-column html form July 18, 2005, 7:42 am
freezing column headers with dropdowns December 15, 2005, 5:10 pm
Changing Cellspacing in a single column only March 27, 2007, 12:13 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap