When would text exceed boundaries

[Colic]

I have an area, rightcol, in which are defined two classes, login-form and remositorymodule.

Rightcol is defined as float: right, width: 185px; It displays as expected.

login-form appears to have no width attributes, and displays correctly within the bounds of rightcol. Even if I modify the text (through firebug) to be excessively long, it still wraps correctly within the boundaries of rightcol.

Class remositorymodule does not behave as expected, and I can see from firebug that its boundaries extend outside of rightcol. Unsurprisingly some text from within remositorymodule displays outside of those boundaries, which is of course not what I want.

Apart from width percentages , remositorymodule appears to have no width styling, and even if I remove any width references it still doesnt behave correctly.

My question is, what could cause this behavior, aside from an explicit width: xx pixels?

The HTML in question is listed below, and you’ll have to take my word for it that remositorymodule displays what looks like 5 or 10% outside of the boundaries of rightcol.

div id=”rightcol”>
form id=”login-form” method=”post” action=”/hk4wd/index.php?option=com_content&view=article&id=11&Itemid=67″>
div class=”login-greeting”> Hi localhost,
div class=”logout-button”>
/form>
table class=”remositorymodule”>
tbody>
tr class=”sectiontableentry2″>
td class=”number” valign=”middle”>
Nov.27

Minutes of General Meeting November 13th 2012.pdf

Nov.05

Minutes of committee Meeting October 23rd 2012.pdf

[CodeGraphics]

Create a codepen of what you are talking about.

[Colic]

Can you point me to what a codepen is and how I do it please?

I hace also discovered that this happens when the text has no spaces in it before the length of the container is exceeded. Diesnt solve it, but its a step in the right direction.

[Martin_Muzatko]

http://bit.ly/ZCX3U0

Codepen ist a tool to create Live Testcases which can be edited and seen by others.
Alternatives would be jsfiddle or webdav, but we prefer codepen.

Also: you have not even posted valid HTML (opening tag brackets missing “<" )

[Colic]

Thanks Martin – Ok I get that now. I A small learning curve, you know how it is trying to stay focussed without branching off :-) But I’ll take a look.

Yes I had to miss off the opening brackets otherwise the quote feature of this forum didnt display my HTML, I think it must have interpreted it or something … I did try indenting it for readability as well, but that didnt get me far either.

Dont get me wrong, its not like Ive never been on a web forum or quoted pieces of code in a post – far from it!

[Martin_Muzatko]

Ah this is why.
However, we can only help you if you provide a testcase on jsfiddle or http://codepen.io/pen/

Just insert your code there.

[Colic]

You’re absolutely spot on thanks :-).

I did look at table-layout, but I must have applied it incorrectly amongst my other efforts. I was somewhat focussed on text wrapping and truncation rather than the actual table parameters.

And with Google being my friend, as it is when you already know what you’re looking for, I now understand why my table (-layout) was extending past its definition despite my attempts with ellipsis and word wrap, since that is the default – the crucial point being I had a long string of unbroken text which would push the table out and stubbornly refuse to truncate or wrap it. It all works as desired now, thankyou :-)

Ah tables – Im using them only because I have to! The code is generated by a Joomla extension which I blame rather than myself for the use of tables here!

thanks (the time Ive now saved can perhaps be invested in investigating a codepen!)

[Author]

Posts