Extra white space after float elements

summary:

In some cases the ~~~~ element introduces a lot of extra white space

Extra white space after float elements

UnNeurone 1194210882|%e %b %Y, %H:%M %Z|agohover

Foreword: I'm totally ignorant of CSS…

that said, have a look at this page, which is rather self-explanatory:
sometimes the ~~~~ instruction works as I would expect, some other times it introduces a lot of white space.

The same happens using [[div style="clear:both"]] and similar.

Am I missing something? Is there a workaround?

Thanks.

last edited on 1194883674|%e %b %Y, %H:%M %Z|agohover by UnNeurone + show more

Re: Extra white space after float elements

PizzaGeek 1194227795|%e %b %Y, %H:%M %Z|agohover

This is a real head-scratcher. I just copied and pasted the source from your sandbox page into one of my sites and I do not get the extra white space. I tested your page and mine in both IE7 and Firefox and got the same results. I suspect something with the theme you're using. I'm using a slightly modified version of the new "Shiny" theme.

Try a different theme or two and see if you get the same results.

-Ed

Re: Extra white space after float elements

PizzaGeek 1194229057|%e %b %Y, %H:%M %Z|agohover

OK, disregard my first reply. I can tell you what's happening, but can't tell you why. When I first tested your source, I had it contained inside a [[tabview]] wrapper. When I moved your source outside that wrapper, I got the same display issues you're having.

If you look closer, you'll see the the white space ends at the bottom of the left side navigation. To prove my suspicion, I tripled the size of my left navigation and the white space grew with it.

So, now that I did the easy part of defining the behavior, does anyone have a solution? ;)

Thanks,
-Ed

Re: Extra white space after float elements

Craig Macomber 1194230474|%e %b %Y, %H:%M %Z|agohover

I have had this issue. my only solution was to make the nav bar wider. It has something to do with the theme. I can't offer much help as I know nothing about how floats work.

Re: Extra white space after float elements

PizzaGeek 1194233469|%e %b %Y, %H:%M %Z|agohover

It appears you're using the float to try and control the location of a table. One work-around for this specific issue is to use the advanced table syntax. Here's an example:

Some text, text and more text…

A title

There is no float element here - just an "advanced" table

One	Two
Three	Four
Five	Six
Seven	Eight

End of table element (advanced tables give you lots more control on placement!)
Text to follow…

Other title

"Welcome one and all to Milliways, …

More un-floated stuff

1	2
3	4
5	6
7	8

End of second table (simple table gives less control and auto-centers)

…the Restaurant at the End of the Universe!"

Here's the code:

Some text
++ A title
There is no float element here
[[table style="width: 1%; margin: 40px; border-collapse: collapse; border:2px solid"]]
[[row]]
[[cell style="padding: 5px; border:1px solid silver; text-align: center;  background-color: #FFFFCC;"]]**One**[[/cell]]
[[cell style="padding: 5px; border:1px solid silver; text-align: center;  background-color: #FFFFCC;"]]**Two**[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 5px; border:1px solid silver; text-align: left;  background-color: #FFFFFF;"]]Three[[/cell]]
[[cell style="padding: 5px; border:1px solid silver; text-align: left;  background-color: #FFFFFF;"]]Four[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 5px; border:1px solid silver; text-align: left;  background-color: #FFFFFF;"]]Five[[/cell]]
[[cell style="padding: 5px; border:1px solid silver; text-align: left;  background-color: #FFFFFF;"]]Six[[/cell]]
[[/row]]
[[row]]
[[cell style="padding: 5px; border:1px solid silver; text-align: left;  background-color: #FFFFFF;"]]Seven[[/cell]]
[[cell style="padding: 5px; border:1px solid silver; text-align: left;  background-color: #FFFFFF;"]]Eight[[/cell]]
[[/row]]
[[/table]]
End of table element (**advanced tables give you lots more control on placement!**)
Text to follow...
++ Other title

//"Welcome one and all to Milliways, ...//

More un-floated stuff
||~ 1 ||~ 2 ||
|| 3 || 4 ||
|| 5 || 6 ||
|| 7 || 8 ||
End of second table (**simple table gives less control and auto-centers**)

//...the Restaurant at the End of the Universe!"//

When I don't need precise control over column widths, my trick is to set the table width to just 1% and then use the table margin and cell padding setting to add some space around my table and cell content.

Until we get a real solution, this may help!

Also, check out gerdami's outstanding Excel utility for making advanced tables:
http://community.wikidot.com/howto:import-simple-excel-tables-into-wikidot

-Ed

Re: Extra white space after float elements

UnNeurone 1194286727|%e %b %Y, %H:%M %Z|agohover

Thank you very much, I'll use advanced table then, borrowing from your example.

I guess it's the best way to control the layout anyway; for example, I had the same issue trying to put two little images side by side with some text below.

Carlo