Text with padding next to a floated table - help needed

I have a table which is floated left, and a 10px margin is on the right border. It looks fine; the text that runs alongside it has the 10px gap between it and the table.

For some of the text, I've defined a left padding of 5px, to set it apart from headers and stuff. (It's padding, not a margin.)

But that text isn't padded (at least in Safari), it's flush with the rest of the text, as if the padding weren't defined.

It worked fine before I floated the table. What am I missing?

(I can't link an example, it's only a file on my desktop now.)

 

The text's padding is applied to the edge of the parent block element. Trouble is, block elements don't see the float. The left edge of the parent is under the float. Put a border or outline on each block element to see what's really going on. You could also look at my enclosing float elements demo.

For a specific fix, we'll need to see the actual code you're using.

cheers,

gary

 

Thanks. The section of code I'm working with is something like this:

[B](from the CSS file)[/B]
[COLOR="Red"]td.bigbox[/COLOR] { padding: 10px; }
[COLOR="Blue"].table-menubox[/COLOR] { width: 220px; height: auto; float: left; margin-right: 15px; }
[COLOR="SeaGreen"].indented-text[/COLOR] { text-align: left; padding-left: 10px; }

Code (markup):

That's about it. In the HTML, I have the page's main box using the td.bigbox element; the table inside that box floated using the .table-menubox element; and the text using .indented-text going down the right of that table. But it's that 10px padding on the indented text I'm not getting.

Do I have to add up all the space between the actual main td edge to where I want the text indented, i.e.:

[COLOR="SeaGreen"].indented-text[/COLOR] { padding-left: 255px; }

Code (markup):

Added:
I did try that, and it worked in Safari. But I use that text in other pages without the table, so would I have to make a separate element for that text? How do I know if this works in all browsers?

Thanks!!

(Not sure why that one element doesn't start with a dot. Is that odd?)

 

Hi!

The dot indicates a class selector in CSS. The text immediately following the dot is the class name you are selecting. If you omit the dot, it becomes an element selector. td.bigbox means select specifically td elements with the "bigbox" class. Simply .bigbox would select all elements with class "bigbox".

I would have to see the file in action, to work out the actual problem.

Regards
- P

 

I want the small text to have a padding of 10px (#1) beyond what it has now (indented from the big "blah"s).

It works (#2) only after the table ends. As was pointed out, the "padding" CSS style is 10px from the far edge, not the nearest element. Since the table is wider than that 10px I want, no padding is added at all.

But if I add up all the pixels and give it a padding of 255px, the small text looks fine beside the table but doesn't flush back to the left margin below the table; it stays 255 pixels away with lots of empty space.

So, I basically need the 10px padding to work beside the table AND below the table, when the small text is longer than the table.

 

Hi,

If you draw a line at the edge of the padding box of the float element, you will see it lands midway through a line. Hence, the text runs on to another line before wrapping back to the left margin.

Regards
- P