Basic question. Centre text in the remaining space to right of image?

Hi.

This is such a basic question, I know. I can't seem to get my thick
head around the way browsers lay out blocks and elements.

In a pages 'branding' area I want a logo on the left and a textual
title centred in the remaining clear space to its right. At the
moment the text displays as if centred, ie it stretches over two lines
and the smaller text centres under the larger, but the whole text
butts against the image. There is no space to its left and a lot to
its right.

Does that make sense?

I have a div called branding within a div called mainwrapper. It has
an id'd heading which is text centred. I've tried putting another div
in at *** this point and centring the text within that but it then
dropped down below the image.

I know its simple, it usually is, but how can I centre the text
*within the remaining clear space* to one side of the image?

Thanks in advance.

***

Some text to be centred

***

Re: Basic question. Centre text in the remaining space to right of image?

In article ,
Mike Barnard wrote:


> In a pages 'branding' area I want a logo on the left and a textual
> title centred in the remaining clear space to its right. At the
> moment the text displays as if centred, ie it stretches over two lines
> and the smaller text centres under the larger, but the whole text
> butts against the image. There is no space to its left and a lot to
> its right.
>
> Does that make sense?
>
> I have a div called brandin

'''
>

>
>

>
etc

Not quite sure what you want? Will this sort of thing do?

"http://www.w3.org/TR/html4/strict.dtd">

Some text to be centred

--
dorayme

Re: Basic question. Centre text in the remaining space to right of image?

On 2007-05-02, Mike Barnard wrote:
> Hi.
>
> This is such a basic question, I know. I can't seem to get my thick
> head around the way browsers lay out blocks and elements.
>
> In a pages 'branding' area I want a logo on the left and a textual
> title centred in the remaining clear space to its right. At the
> moment the text displays as if centred, ie it stretches over two lines
> and the smaller text centres under the larger, but the whole text
> butts against the image. There is no space to its left and a lot to
> its right.
>
> Does that make sense?
>
> I have a div called branding within a div called mainwrapper. It has
> an id'd heading which is text centred. I've tried putting another div
> in at *** this point and centring the text within that but it then
> dropped down below the image.
>
> I know its simple, it usually is, but how can I centre the text
> *within the remaining clear space* to one side of the image?

The problem is that #branding is a float with auto-width. It therefore
gets its shrink-to-fit width, which is just wide enough for the image
and the text. The text is "centered" in that space, but since the space
is only just big enough for the text anyway, the effect is negligible.

The problem can be solved by adding width: 100% or with: 760px to the
selector for #branding.

But dorayme's suggestion is better. Why make #branding a float at all?

Re: Basic question. Centre text in the remaining space to right of image?

On Thu, 03 May 2007 10:52:49 +1000, dorayme
wrote:

Hi Do.

>> In a pages 'branding' area I want a logo on the left and a textual
>> title centred in the remaining clear space to its right. At the

>Not quite sure what you want? Will this sort of thing do?

>#toptitle{
>text-align: center;
>color: #fd834b;
>font-size: 200%;

>margin-left:260px;

>}

Yes, it's what I want to do. I was hoping there was a way that I
could centre the text within a div which was next to the image rather
than laying out with padding/margins etc.

As I can't include binaries in this group...

www.thunderin.co.uk/examplepic

This is where my basic knowledge is no good. I need to learn (again)
about block level elements and the document flow. Know any good
tutorials?

Thanks for replying.

Re: Basic question. Centre text in the remaining space to right of image?

On Thu, 03 May 2007 02:16:05 -0500, Ben C wrote:

>On 2007-05-02, Mike Barnard wrote:
>> Hi.
>>
>> This is such a basic question, I know. I can't seem to get my thick
>> head around the way browsers lay out blocks and elements.

I've been researching!

>The problem is that #branding is a float with auto-width. It therefore
>gets its shrink-to-fit width, which is just wide enough for the image
>and the text. The text is "centered" in that space, but since the space
>is only just big enough for the text anyway, the effect is negligible.

>The problem can be solved by adding width: 100% or with: 760px to the
>selector for #branding.

>But dorayme's suggestion is better. Why make #branding a float at all?

Good questions and all is now changed. I had been cut and pasting
without really understanding what was happening, but I have spent most
of today reading about the normal flow of an HTML document. I believe
I now have a handle on it.

I hope.

Thanks for taking the time to reply.