Posted by Ben C on 05/03/07 07:16

On 2007-05-02, Mike Barnard <m.barnard.trousers@thunderin.co.uk> 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?

[Back to original message]