Hi everyone,

I'm a newbie and can;t get this code to work. It is supposed to center
the text block within the wrap, but the centering won't work. I'm quite
new to CSS and have tried to fix this now for a long time. Can anyone
see where I'm going wrong?

Thank you in advance.

Raj


#wrap{
background: #faf1d4 url(../images/bg.gif) repeat-x;
}

#text{
float: left;
width: 1000px;
padding-left: 20px;
padding-right: 20px;
background-color: #f5e9cc;
margin-left: auto;
margin-right: auto;
}


the relevant html code is:

<div id="wrap">
<div id="text">
<p>abcdef</p>
</div>
</div>

On 2008-03-14 09:54:54 +0000, dorayme <doraymeRidThis@optusnet.com.au> said:

> In article <2008031409494775249-raj@nospamcom>,
> raj <raj@nospam.com> wrote:
>
>> Hi everyone,
>>
>> I'm a newbie and can;t get this code to work. It is supposed to center
>> the text block within the wrap, but the centering won't work. I'm quite
>> new to CSS and have tried to fix this now for a long time. Can anyone
>> see where I'm going wrong?
>>
>> Thank you in advance.
>>
>> Raj
>>
>>
>> #wrap{
>> background: #faf1d4 url(../images/bg.gif) repeat-x;
>> }
>>
>> #text{
>> float: left;
>> width: 1000px;
>> padding-left: 20px;
>> padding-right: 20px;
>> background-color: #f5e9cc;
>> margin-left: auto;
>> margin-right: auto;
>> }
>>
>>
>> the relevant html code is:
>>
>> <div id="wrap">
>> <div id="text">
>> <p>abcdef</p>
>> </div>
>> </div>
>
> Have you tried #text{
> float: left;
> width: 1000px;
> background-color: #f5e9cc;
> text-align: center;
>
> ?
>
> (1000px is a lot to be expecting on a webpage, not usually
> advisable)

Hi dorayme,

I have just tried that, but it doesnt accomplish what I want to do. I
want to center the enter text block within the wrap block. The wrap
block should go across the enter width of the screen and the text block
should be centered within the wrap block.

Raj

On 2008-03-14, raj <raj@nospam.com> wrote:
> Hi everyone,
>
> I'm a newbie and can;t get this code to work. It is supposed to center
> the text block within the wrap, but the centering won't work.

You can't centre a float. It floats to one side or the other.

> I'm quite
> new to CSS and have tried to fix this now for a long time. Can anyone
> see where I'm going wrong?
>
> Thank you in advance.
>
> Raj
>
>
> #wrap{
> background: #faf1d4 url(../images/bg.gif) repeat-x;
> }
>
> #text{
> float: left;
^^^^^^^^^^^

Just get rid of this line and it should centre OK.

> width: 1000px;
> padding-left: 20px;
> padding-right: 20px;
> background-color: #f5e9cc;
> margin-left: auto;
> margin-right: auto;
> }
>
>
> the relevant html code is:
>
><div id="wrap">
> <div id="text">
> <p>abcdef</p>
> </div>
></div>

On 2008-03-14 10:15:21 +0000, Ben C <spamspam@spam.eggs> said:

> On 2008-03-14, raj <raj@nospam.com> wrote:
>> Hi everyone,
>>
>> I'm a newbie and can;t get this code to work. It is supposed to center
>> the text block within the wrap, but the centering won't work.
>
> You can't centre a float. It floats to one side or the other.
>
>> I'm quite
>> new to CSS and have tried to fix this now for a long time. Can anyone
>> see where I'm going wrong?
>>
>> Thank you in advance.
>>
>> Raj
>>
>>
>> #wrap{
>> background: #faf1d4 url(../images/bg.gif) repeat-x;
>> }
>>
>> #text{
>> float: left;
> ^^^^^^^^^^^
>
> Just get rid of this line and it should centre OK.
>
>> width: 1000px;
>> padding-left: 20px;
>> padding-right: 20px;
>> background-color: #f5e9cc;
>> margin-left: auto;
>> margin-right: auto;
>> }
>>
>>
>> the relevant html code is:
>>
>> <div id="wrap">
>> <div id="text">
>> <p>abcdef</p>
>> </div>
>> </div>

That's fixed it.

Thanks Ben

Ben C wrote:
> On 2008-03-14, raj <raj@nospam.com> wrote:
>> Hi everyone,
>>
>> I'm a newbie and can;t get this code to work. It is supposed to center
>> the text block within the wrap, but the centering won't work.
>
> You can't centre a float. It floats to one side or the other.
>

Though I know that and I can understand it I was wondering of the
following senario:

I have a div with width 100% (so it goes it fills the whole viewport). I
want a div inside it with some pictures:

<div id="wrap">
<div>
<img src="blah.jpg"> <img src="blah1.jpg"> <img src="blah2.jpg"> <img
src="blah3.jpg">
</div>
</div>

By default #wrap div will also have width:100%. What if I want the div
containing the imgs to be centered. The only way I know is to explicit
set the width like:

#wrap div img {margin-left:2em}
#wrap div {width:50em;margin:0 auto}

But I don't know the overall width of the images, so it's wrong to set a
width. How can I accomplish that?

thanks in advance

On Mar 17, 10:08am, Harris Kosmidhs
<hkosm...@remove.me.softnet.tuc.gr> wrote:
> Ben C wrote:
> > On 2008-03-14, raj <r...@nospam.com> wrote:
> >> Hi everyone,
>
> >> I'm a newbie and can;t get this code to work. It is supposed to center
> >> the text block within the wrap, but the centering won't work.
>
> > You can't centre a float. It floats to one side or the other.
>
> Though I know that and I can understand it I was wondering of the
> following senario:
>
> I have a div with width 100% (so it goes it fills the whole viewport). I
> want a div inside it with some pictures:
>
> <div id="wrap">
> <div>
> <img src="blah.jpg"> <img src="blah1.jpg"> <img src="blah2.jpg"> <img
> src="blah3.jpg">
> </div>
> </div>
>
> By default #wrap div will also have width:100%. What if I want the div
> containing the imgs to be centered. The only way I know is to explicit
> set the width like:
>
> #wrap div img {margin-left:2em}
> #wrap div {width:50em;margin:0 auto}
>
> But I don't know the overall width of the images, so it's wrong to set a
> width. How can I accomplish that?
>
> thanks in advance

Maybe I don't understand exactly what you are looking for, but if you
just want the images centered, why not just put a declaration of text-
align: center on the img's container?

E.g.:

#wrap div {text-align: center}

Nick

--
Nick Theodorakis
nick_theodorakis@hotmail.com
contact form:
http://theodorakis.net/contact.html

On 2008-03-17, Harris Kosmidhs <hkosmidi@remove.me.softnet.tuc.gr> wrote:
> Ben C wrote:
>> On 2008-03-14, raj <raj@nospam.com> wrote:
>>> Hi everyone,
>>>
>>> I'm a newbie and can;t get this code to work. It is supposed to center
>>> the text block within the wrap, but the centering won't work.
>>
>> You can't centre a float. It floats to one side or the other.
>>
>
> Though I know that and I can understand it I was wondering of the
> following senario:
>
> I have a div with width 100% (so it goes it fills the whole viewport). I
> want a div inside it with some pictures:
>
><div id="wrap">
> <div>
> <img src="blah.jpg"> <img src="blah1.jpg"> <img src="blah2.jpg"> <img
> src="blah3.jpg">
> </div>
></div>
>
> By default #wrap div will also have width:100%. What if I want the div
> containing the imgs to be centered. The only way I know is to explicit
> set the width like:
>
> #wrap div img {margin-left:2em}
> #wrap div {width:50em;margin:0 auto}
>
> But I don't know the overall width of the images, so it's wrong to set a
> width. How can I accomplish that?

What you want is "centred shrink-to-fit" for which you need inline-block
(wait for Firefox 3), tables, or JavaScript.

See also dorayme's page:

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

Ben C wrote:

> What you want is "centred shrink-to-fit" for which you need inline-block
> (wait for Firefox 3), tables, or JavaScript.
>
> See also dorayme's page:
>
> http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

exactly!

display:table is just fine
Thanks a lot

Harris Kosmidhs schrieb:
> display:table is just fine

.... until you test it with IE.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)