By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,853 Members | 1,570 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,853 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.