468,117 Members | 1,450 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,117 developers. It's quick & easy.

Three column layout, middle column clear:both; affects other two columns;no tables

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 <divis not autonomous, they
interact with each other when clear: styles apply.

I've tried putting the <divitem 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.
Mar 10 '07 #1
4 5266
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/l.../skidoo_redux/

--
Berg
Mar 10 '07 #2
On 2007-03-10, Jim Carlock <an*******@127.0.0.1wrote:
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 <divis 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...aca6762?hl=en&

Click on More Options and View Thread to see the rest of the thread.
Mar 10 '07 #3
On 2007-03-10, Jim Carlock <an*******@127.0.0.1wrote:
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 <divis 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...aca6762?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 <divto work. Maybe I've got something going in a
global <divdeclare 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/l.../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...71ffe22aca6762

Thanks.

--
Jim Carlock
Post replies to the group.
Mar 11 '07 #4
On 2007-03-11, Jim Carlock <an*******@127.0.0.1wrote:
On 2007-03-10, Jim Carlock <an*******@127.0.0.1wrote:
[...]
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 <divto work. Maybe I've got something going in a
global <divdeclare 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.
Mar 11 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Stan Brown | last post: by
7 posts views Thread by Will Hartung | last post: by
1 post views Thread by Koen Hakvoort | last post: by
3 posts views Thread by Joel Byrd | last post: by
6 posts views Thread by Mike Lepore | last post: by
5 posts views Thread by Timothy Larson | last post: by
13 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.