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

Discussion in 'HTML' started by Mike Barnard, May 3, 2007.

  1. Mike Barnard

    Mike Barnard Guest

    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.




    <div id=mainwrapper>

    <div id="branding">

    <img src="alogo.gif" width="253" height="100" align="left">
    ***
    <h1 id="toptitle">
    Some text to be centred
    </h1>
    ***
    </div><!-- end of div branding -->

    </div><!-- end of div mainwrapper -->


    #mainwrapper{
    width: 760px;
    margin: 0 auto;
    background-color: #F2FAFF;
    text-align: left;
    }

    #branding{
    float: left;
    height: 100px;
    }

    #toptitle{
    text-align: center;
    color: #fd834b;
    font-size: 200%;
    }
     
    Mike Barnard, May 3, 2007
    #1
    1. Advertising

  2. Mike Barnard

    dorayme Guest

    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


    '''
    > <div id=mainwrapper>
    >
    > <div id="branding">
    >

    etc

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <title>Stacked Layers</title>
    <style type="text/css">

    #mainwrapper{
    width: 760px;
    height: 500px;
    margin: 0 auto;
    background-color: #F2FAFF;
    text-align: left;
    border: 1px red solid;
    }

    #branding img {float: left;}

    #toptitle{
    text-align: center;
    color: #fd834b;
    font-size: 200%;
    margin-left:260px;
    }

    </style>

    </head>
    <body>

    <div id="mainwrapper">
    <div id="branding">
    <img src="cope-003.jpg" width="253" height="100" alt="a demo
    image">
    <h1 id="toptitle">Some text to be centred</h1>
    </div>
    </div>

    </body>
    </html>

    --
    dorayme
     
    dorayme, May 3, 2007
    #2
    1. Advertising

  3. Mike Barnard

    Ben C Guest

    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?
     
    Ben C, May 3, 2007
    #3
  4. Mike Barnard

    Mike Barnard Guest

    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.
     
    Mike Barnard, May 3, 2007
    #4
  5. Mike Barnard

    Mike Barnard Guest

    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.
     
    Mike Barnard, May 3, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rhino
    Replies:
    1
    Views:
    528
    Oliver Wong
    Dec 21, 2005
  2. M Hedges
    Replies:
    2
    Views:
    3,812
    M Hedges
    Feb 14, 2004
  3. Anon
    Replies:
    2
    Views:
    936
    Jukka K. Korpela
    Mar 18, 2005
  4. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,914
    Bryan Bullard
    Jul 11, 2003
  5. Replies:
    10
    Views:
    801
    kevinliu23
    Mar 1, 2007
Loading...

Share This Page