By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
454,632 Members | 1,499 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 454,632 IT Pros & Developers. It's quick & easy.

margin not working

P: n/a
raj
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>

Mar 14 '08 #1
Share this Question
Share on Google+
9 Replies


P: n/a
In article <2008031409494775249-raj@nospamcom>,
raj <ra*@nospam.comwrote:
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
Mar 14 '08 #2

P: n/a
raj
On 2008-03-14 09:54:54 +0000, dorayme <do************@optusnet.com.ausaid:
In article <2008031409494775249-raj@nospamcom>,
raj <ra*@nospam.comwrote:
>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

Mar 14 '08 #3

P: n/a
On 2008-03-14, raj <ra*@nospam.comwrote:
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>
Mar 14 '08 #4

P: n/a
raj
On 2008-03-14 10:15:21 +0000, Ben C <sp******@spam.eggssaid:
On 2008-03-14, raj <ra*@nospam.comwrote:
>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
Mar 14 '08 #5

P: n/a
Ben C wrote:
On 2008-03-14, raj <ra*@nospam.comwrote:
>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
Mar 17 '08 #6

P: n/a
On Mar 17, 10:08*am, Harris Kosmidhs
<hkosm...@remove.me.softnet.tuc.grwrote:
Ben C wrote:
On 2008-03-14, raj <r...@nospam.comwrote:
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
ni**************@hotmail.com
contact form:
http://theodorakis.net/contact.html
Mar 17 '08 #7

P: n/a
On 2008-03-17, Harris Kosmidhs <hk******@remove.me.softnet.tuc.grwrote:
Ben C wrote:
>On 2008-03-14, raj <ra*@nospam.comwrote:
>>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
Mar 17 '08 #8

P: n/a
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
Mar 17 '08 #9

P: n/a
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.)
Mar 17 '08 #10

This discussion thread is closed

Replies have been disabled for this discussion.