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

Mike Barnard · May 3, 2007

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>

</div>

#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%;
}

dorayme · May 3, 2007

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>

Ben C · May 3, 2007

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?

Mike Barnard · May 3, 2007

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

Hi Do.

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

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

}

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

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.

Image shifts to the right when export the page to pdf	4	May 5, 2023
Align separate li to right	2	Jun 19, 2024
SVG not full width and space	0	Sep 15, 2023
Text does not display correctly to glow	2	Sep 16, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Positioning CSS components	1	Nov 16, 2023

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

Mike Barnard

dorayme

Ben C

Mike Barnard

Mike Barnard

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads