css problem (float)

D

Deephay

Greetings all,

I am currently writting a 3-column full-width webpage, I have a layout
problem, here is demo of the page:

<html>
<body>
<div style="float: left; width: 25%; border-right: 1px
dashed; min-height: 20em; padding: 1em"><p>test testtest test test
test test test test test test test test test test test test test test
test test test test test test test test test test test test test test
test</p></div>
<div style="float: right; width: 25%; border-left: 1px
dashed; min-height: 20em; padding: 1em">test test test test test test
test test test test test test test test test test test test test test
test test test test test test test test test test test test test test
test test test test test test test test test test test test test test
test </div>
<div style="border: 1px solid">content content content
content content content content content content content content
content content content content content content content content
content content content content content content content content
content content content content content content content content
content content content content content content content content
content content content content content content content content
content content content content</div>
</body>
</html>

I have three columns (<div>), the width of the middle column (the last
<div>) will equal to 100% of the body width (according to CSS spec.),
but the content in that <div> will be put into the spaces between the
left and right floats according to the CSS spec, my problem is: some
times my CMS system will put a <table width="100%"><tr><td
align="center">content</td></tr>, this will break the layout of the
page because the middle column is not (100% - 2 x %25) but 100% and
the table width will be 100% either.

Specify the width of the middle column direcly in the stylesheet (45%,
say) will help, but I am not sure whether it is a good idea.

Any suggestion is very much appreciated. TIA!

Cheers,
Deephay
 
D

dorayme

I have three columns (<div>), the width of the middle column (the last
<div>) will equal to 100% of the body width (according to CSS spec.),
but the content in that <div> will be put into the spaces between the
left and right floats according to the CSS spec, my problem is: some
times my CMS system will put a <table width="100%"><tr><td
align="center">content</td></tr>,
Click to expand...

Put a table where?
 
B

Ben C

Greetings all,

I am currently writting a 3-column full-width webpage, I have a layout
problem, here is demo of the page: [...]
I have three columns (<div>), the width of the middle column (the last
<div>) will equal to 100% of the body width (according to CSS spec.),
but the content in that <div> will be put into the spaces between the
left and right floats according to the CSS spec, my problem is: some
times my CMS system will put a <table width="100%"><tr><td
align="center">content</td></tr>, this will break the layout of the
page because the middle column is not (100% - 2 x %25) but 100% and
the table width will be 100% either.

Specify the width of the middle column direcly in the stylesheet (45%,
say) will help, but I am not sure whether it is a good idea.
Click to expand...

That sounds like not a bad idea. The problem is you've got padding and
borders so things won't add up properly.

But the general idea of giving the middle column something like width:
45%; margin-left: 25%; margin-right: 25% should do the trick from the
point of view of that stupid table.

Why not fix the CMS system?
 
D

Deephay

Greetings all,
Click to expand...
I am currently writting a 3-column full-width webpage, I have a layout
problem, here is demo of the page: [...]
I have three columns (<div>), the width of the middle column (the last
<div>) will equal to 100% of the body width (according to CSS spec.),
but the content in that <div> will be put into the spaces between the
left and right floats according to the CSS spec, my problem is: some
times my CMS system will put a <table width="100%"><tr><td
align="center">content</td></tr>, this will break the layout of the
page because the middle column is not (100% - 2 x %25) but 100% and
the table width will be 100% either.
Click to expand...
Specify the width of the middle column direcly in the stylesheet (45%,
say) will help, but I am not sure whether it is a good idea.
Click to expand...

That sounds like not a bad idea. The problem is you've got padding and
borders so things won't add up properly.
Click to expand...

Thanks, I'll do it if I have no choice.
I feel CSS behaves oddly in Firefox, according to CSS spec:

"The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible') must
not overlap any floats in the same block formatting context as the
element itself."

But why does the middle column actually overlapped with them?
 
D

Deephay

Greetings all,
I am currently writting a 3-column full-width webpage, I have a layout
problem, here is demo of the page: [...]
I have three columns (<div>), the width of the middle column (the last
<div>) will equal to 100% of the body width (according to CSS spec.),
but the content in that <div> will be put into the spaces between the
left and right floats according to the CSS spec, my problem is: some
times my CMS system will put a <table width="100%"><tr><td
align="center">content</td></tr>, this will break the layout of the
page because the middle column is not (100% - 2 x %25) but 100% and
the table width will be 100% either.
Specify the width of the middle column direcly in the stylesheet (45%,
say) will help, but I am not sure whether it is a good idea.
Click to expand...
Click to expand...
That sounds like not a bad idea. The problem is you've got padding and
borders so things won't add up properly.
Click to expand...

Thanks, I'll do it if I have no choice.
I feel CSS behaves oddly in Firefox, according to CSS spec:

"The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible') must
not overlap any floats in the same block formatting context as the
element itself."

But why does the middle column actually overlapped with them?
Click to expand...
I have a mis-understanding, this behavior is correct.
 
B

Ben C

I feel CSS behaves oddly in Firefox, according to CSS spec:

"The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible') must
not overlap any floats in the same block formatting context as the
element itself."

But why does the middle column actually overlapped with them?
Click to expand...

Because it doesn't establish a new block formatting context, it's just a
normal block-level element.

Only some block boxes start "block formatting contexts"-- floats, table
cells, positioned things, things with overflow other than visible.

You could actually use this to solve your problem, and I almost
suggested it the first time.

Note that this particular thing has only very recently been tightened up
in the CSS 2.1 spec. It used to say something like "browsers may make
block formatting context narrower when there are floats in the way".

Now it says "must" and is altogether clearer about the whole thing.

Try this, then try commenting out overflow: hidden and reloading:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div
{
border: 2px solid black;
}
.left
{
float: left;
background-color: pink;
width: 25%;
height: 300px;
}
.right
{
float: right;
background-color: palegreen;
width: 25%;
height: 300px;
}
.middle
{
overflow: hidden;
background-color: blue;
height: 400px;
}

</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
</html>
 
D

Deephay

Because it doesn't establish a new block formatting context, it's just a
normal block-level element.

Only some block boxes start "block formatting contexts"-- floats, table
cells, positioned things, things with overflow other than visible.

You could actually use this to solve your problem, and I almost
suggested it the first time.

Note that this particular thing has only very recently been tightened up
in the CSS 2.1 spec. It used to say something like "browsers may make
block formatting context narrower when there are floats in the way".

Now it says "must" and is altogether clearer about the whole thing.

Try this, then try commenting out overflow: hidden and reloading:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div
{
border: 2px solid black;
}
.left
{
float: left;
background-color: pink;
width: 25%;
height: 300px;
}
.right
{
float: right;
background-color: palegreen;
width: 25%;
height: 300px;
}
.middle
{
overflow: hidden;
background-color: blue;
height: 400px;
}

</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
</html>
Click to expand...

Hi Ben,

Thanks, I thought the initial value of overflow is not visible, but it
is. It is now matches my need (at least in Firefox).

Another thing:
I think Firefox does not handle CSS correctly, if you add a "width:
100%;" for the middle column, the
middle column will overlap with the right float, which is not correct
for that case since "overflow: hidden"
makes the middle column established a new block formatting context.

Cheers.
 
B

Ben C

.left
{
float: left;
background-color: pink;
width: 25%;
height: 300px;
}
.right
{
float: right;
background-color: palegreen;
width: 25%;
height: 300px;
}
.middle
{
overflow: hidden;
background-color: blue;
height: 400px;
}
Click to expand...
[...]
Another thing:
I think Firefox does not handle CSS correctly, if you add a "width:
100%;" for the middle column, the middle column will overlap with the
right float, which is not correct for that case since "overflow:
hidden" makes the middle column established a new block formatting
context.
Click to expand...

You're right, it does do that, according to the spec, it is wrong. It
should move the middle one down to clear the other two in that
situation. But both Opera and Konqueror do the same thing as Firefox.

9.5:
[...]
If necessary, implementations should clear the said element by placing
it below any preceding floats, but may place it adjacent to such floats
if there is sufficient space.

But no-one actually does that.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Working on mobile css menu with plenty of frustration! 2
Is it possible an iframe can overlapp another? 3
How to position the *tooltip* comment on these buttons? 9
Help with Visual Lightbox: Scripts 2
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
How can I get my menu inside of a menu to function properly? 1

Members online

Total: 35 (members: 3, guests: 32)
Robots: 497

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top