Text outside the Container

HTML & CSS
1

I want a phrase ro extend outside the container of the web page.

I understood that overflow:visible; should do this, but it doesn’t seem to work. What am I doing wrong ?

The CSS is the very simple p.overflow {overflow:visible;}
The web page is http://www.c5d.co.uk/1851.60.php

And the relevant bit is right at the bottom where it say IMPORTANT NOTE. I’d really like this to be on one line

Thanks

Antony

2

Hi, Antony.

Try this:


p.overflow {
    [color=red][s]overflow: visible;[/s][/color]
    [color=blue]white-space: nowrap;[/color]
}
3

That’s the one.

Perfect.

Thanks very much.

Antony

4

You’re welcome, Antony.

Here’s a little tidbit for you.

{overflow:visible} is the default state of all boxes. It does not normally have to be declared. In this case, it would be meaningless if assigned to the paragraph.

{white-space:nowrap} tells the paragraph to not wrap at the edge of its parent container (.container) … in other words, to overflow the box… which it does willingly… and remains visible.

IF the parent container, .container, had been assigned {overflow:hidden} for some reason, such as clearing floats, the paragraph text would disappear when it overflowed its parent box and {white-space:nowrap} would not work.

Cheers

5

Thanks for that tip

I have another query now, based on what you have previously told me.

When I have two tables with different number of columns, you said that if I put them in a div, they would show as the same width.

So I have called my div “tablewrapper”

And this is the HTML extract <div class=“tablewrapper”>
<table class=“qrmmarriages”>

This is the CSS: it’s exactly what you gave mepreviusly which worked fine.

.tablewrapper {display:table;
width: 100%;
margin: 0 auto;

}

The web page is: http://www.c5d.co.uk/qrmmarriages.php and the second table starts at entry 23.

Have I misunderstood what you told me previously ?

Antony

6

A small misunderstanding, I think.

.tablewrapper should have NO width assigned. It should be allowed to behave like a normal table and hug its contents.

The tables nested inside .tablewrapper should be assigned {width:100%} so the narrower one/s will extend to meet the width of .tablewrapper and thereby all become the same width.