margin not working

#1

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>

#2

In article <2008031409494775249-raj@nospamcom>,
raj <raj (AT) nospam (DOT) com> wrote:

Quote:

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)

--
dorayme

#3

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

Quote:

In article <2008031409494775249-raj@nospamcom>,
raj <raj (AT) nospam (DOT) 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

#4

On 2008-03-14, raj <raj (AT) nospam (DOT) com> wrote:

Quote:

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.

Quote:

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.

Quote:

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

#5

On 2008-03-14 10:15:21 +0000, Ben C <spamspam (AT) spam (DOT) eggs> said:

Quote:

On 2008-03-14, raj <raj (AT) nospam (DOT) 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

#6

Ben C wrote:

Quote:

On 2008-03-14, raj <raj (AT) nospam (DOT) 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

#7

On Mar 17, 10:08*am, Harris Kosmidhs
<hkosm... (AT) remove (DOT) me.softnet.tuc.gr> wrote:

Quote:

Ben C wrote:
On 2008-03-14, raj <r... (AT) nospam (DOT) 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 (AT) hotmail (DOT) com
contact form:
http://theodorakis.net/contact.html

#8

On 2008-03-17, Harris Kosmidhs <hkosmidi (AT) remove (DOT) me.softnet.tuc.gr> wrote:

Quote:

Ben C wrote:
On 2008-03-14, raj <raj (AT) nospam (DOT) 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

#9

Ben C wrote:

Quote:

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