Center div

[shapper]

Hello,

I have two div's:

<div class="container">
<div class="message">message</div>
</div>

I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.

How can I do this?
I tried the following CSS but it is not working:

..container
{
border: solid 1px red;
text-align: center;
}

..message
{
border: solid 1px blue;
clear: both;
margin: 20px auto;
text-align: left;
width: 100%;
}

Thanks,
Miguel

[dorayme]

In article
<11**********************@i56g2000hsf.googlegroups .com>,
"shapper" <md*****@gmail.comwrote:

Hello,

I have two div's:

<div class="container">
<div class="message">message</div>
</div>

I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.

How can I do this?

Have you tried:

..container {

border: solid 1px red;
text-align: center;
}

..message {

border: solid 1px blue;
margin: 20px;
}

--
dorayme

[shapper]

Yes,

In Firefox and Opera the message div gets outside the container to the
right and in IE the container gets bigger then the defined width.

Any idea?

Thanks,
Miguel

dorayme wrote:

In article
<11**********************@i56g2000hsf.googlegroups .com>,
"shapper" <md*****@gmail.comwrote:

Hello,

I have two div's:

<div class="container">
<div class="message">message</div>
</div>

I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.

How can I do this?

Have you tried:

.container {

border: solid 1px red;
text-align: center;
}

.message {

border: solid 1px blue;
margin: 20px;
}

--
dorayme

[dorayme]

In article
<11*********************@k58g2000hse.googlegroups. com>,
"shapper" <md*****@gmail.comwrote:

>
dorayme wrote:

In article
<11**********************@i56g2000hsf.googlegroups .com>,
"shapper" <md*****@gmail.comwrote:

Hello,
>
I have two div's:
>
<div class="container">
<div class="message">message</div>
</div>
>
I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.
>
How can I do this?

Have you tried:

.container {

border: solid 1px red;
text-align: center;
}

.message {

border: solid 1px blue;
margin: 20px;
}

Yes,

In Firefox and Opera the message div gets outside the container to the
right and in IE the container gets bigger then the defined width.

Any idea?

Best not to top post, fixed here. You tried it exactly? you took
out your auto? and you used my code? And in FF it had the faults
you mention? Can you please post a URL showing this.

--
dorayme

[CatBones]

shapper;671546 Wrote:

Hello,

I have two div's:

<div class="container">
<div class="message">message</div>
</div>

I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.

How can I do this?
I tried the following CSS but it is not working:

..container
{
border: solid 1px red;
text-align: center;
}

..message
{
border: solid 1px blue;
clear: both;
margin: 20px auto;
text-align: left;
width: 100%;
}

Thanks,
Miguel

Without looking at the actual design and what you want to do, I'd say
this might work for you.

.message {border:solid 1px blue;margin:20px;margin-left:
auto;margin-right:auto;text-align:left;width:100%}

with this, I'd change the width to something, can't remember right at
this point of 100% width won't bring it from left to right full size.
Try giving it a width if the 100% doesn't seem to do anything.

Hope it helps. :) Lemme know.
--
CatBones

XHTMLIT.COM - PSD TO
XHTML/CSS CONVERSION SERVICE (\"HTTP://WWW.XHTMLIT.COM\")
Get your Design (.PSD or .PNG) converted into valid XHTML & CSS fast
and easy.
We cut, crop and professionally hand code it within 24 hours or your
money back guaranteed.
Visit http://www.hostingforum.ca today

[shapper]

CatBones wrote:

shapper;671546 Wrote:

Hello,

I have two div's:

<div class="container">
<div class="message">message</div>
</div>

I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.

How can I do this?
I tried the following CSS but it is not working:

..container
{
border: solid 1px red;
text-align: center;
}

..message
{
border: solid 1px blue;
clear: both;
margin: 20px auto;
text-align: left;
width: 100%;
}

Thanks,
Miguel

Without looking at the actual design and what you want to do, I'd say
this might work for you.

.message {border:solid 1px blue;margin:20px;margin-left:
auto;margin-right:auto;text-align:left;width:100%}

with this, I'd change the width to something, can't remember right at
this point of 100% width won't bring it from left to right full size.
Try giving it a width if the 100% doesn't seem to do anything.

Hope it helps. :) Lemme know.
--
CatBones

XHTMLIT.COM - PSD TO
XHTML/CSS CONVERSION SERVICE (\"HTTP://WWW.XHTMLIT.COM\")
Get your Design (.PSD or .PNG) converted into valid XHTML & CSS fast
and easy.
We cut, crop and professionally hand code it within 24 hours or your
money back guaranteed.
Visit http://www.hostingforum.ca today

Sorry about top post but I am kind of new to this type of posting.

Anyway, I am working with ASP.NET and I am developing a control which
generates the HTML code. In this moment the generated code is as
follows:

<div id="container" class="container" style="width: 100%; text-align:
center;">
<div id="message" class="message" style="margin: 20px;">
<img id="icon" src="Warning.jpg" style="border-width: 0px;">
<span id="messageText" style="display: block; text-align:
left;">Text</span>
</div>
</div>

In both FF and Opera I don't get the top and bottom margin.
In IE I don't get the bottom margin.

Note that the class "container" and "message" are just this:
.container {background-color:red}
.message {background-color:blue}

I added display:block to messageText because I want it to appear after
the Icon.

Any idea what I am doing wrong?

Thanks,
Miguel

[shapper]

shapper wrote:

CatBones wrote:

shapper;671546 Wrote:

Hello,
>
I have two div's:
>
<div class="container">
<div class="message">message</div>
</div>
>
I need to center the div "message" inside the div "container".
But I also want the div "message" to have a constant margin of 20px
around it.
>
How can I do this?
I tried the following CSS but it is not working:
>
..container
{
border: solid 1px red;
text-align: center;
}
>
..message
{
border: solid 1px blue;
clear: both;
margin: 20px auto;
text-align: left;
width: 100%;
}
>
Thanks,
Miguel

Without looking at the actual design and what you want to do, I'd say
this might work for you.

.message {border:solid 1px blue;margin:20px;margin-left:
auto;margin-right:auto;text-align:left;width:100%}

with this, I'd change the width to something, can't remember right at
this point of 100% width won't bring it from left to right full size.
Try giving it a width if the 100% doesn't seem to do anything.

Hope it helps. :) Lemme know.
--
CatBones

XHTMLIT.COM - PSD TO
XHTML/CSS CONVERSION SERVICE (\"HTTP://WWW.XHTMLIT.COM\")
Get your Design (.PSD or .PNG) converted into valid XHTML & CSS fast
and easy.
We cut, crop and professionally hand code it within 24 hours or your
money back guaranteed.
Visit http://www.hostingforum.ca today

Sorry about top post but I am kind of new to this type of posting.

Anyway, I am working with ASP.NET and I am developing a control which
generates the HTML code. In this moment the generated code is as
follows:

<div id="container" class="container" style="width: 100%; text-align:
center;">
<div id="message" class="message" style="margin: 20px;">
<img id="icon" src="Warning.jpg" style="border-width: 0px;">
<span id="messageText" style="display: block; text-align:
left;">Text</span>
</div>
</div>

In both FF and Opera I don't get the top and bottom margin.
In IE I don't get the bottom margin.

Note that the class "container" and "message" are just this:
.container {background-color:red}
.message {background-color:blue}

I added display:block to messageText because I want it to appear after
the Icon.

Any idea what I am doing wrong?

Thanks,
Miguel

There is something else I realized:
I placed my container DIV inside a new CONTAINER div.
In IE, my container DIV don't full extend to the new CONTAINER div. Any
idea why?

Thanks,
Miguel

[John Hosking]

shapper wrote:

>>
Sorry about top post but I am kind of new to this type of posting.

Anyway, I am working with ASP.NET and I am developing a control which
generates the HTML code. In this moment the generated code is as
follows:

<div id="container" class="container" style="width: 100%; text-align:
center;">
<div id="message" class="message" style="margin: 20px;">
<img id="icon" src="Warning.jpg" style="border-width: 0px;">
<span id="messageText" style="display: block; text-align:
left;">Text</span>
</div>
</div>

In both FF and Opera I don't get the top and bottom margin.
In IE I don't get the bottom margin.

Note that the class "container" and "message" are just this:
.container {background-color:red}
.message {background-color:blue}

I added display:block to messageText because I want it to appear after
the Icon.

Any idea what I am doing wrong?

Yes. You are asking for help, getting it, and then ignoring it.
Do what dorayme suggested. Do just that. Do not do what CatBones
suggested; it doesn't work. Try dorayme's suggestion, which also worked
for me, despite your claim to the contrary.

>
There is something else I realized:
I placed my container DIV inside a new CONTAINER div.

So, you have changed the problem for us again? In that case, you will
have to restate the new conditions completely and clearly. Provide a URL
next time, too. I no longer understand what problem you want to solve.
It appears that all of the preceding discussion has been for a problem
you no longer care about. Or what?

In IE, my container DIV don't full extend to the new CONTAINER div. Any
idea why?

See above.

--
John

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

CatBones wrote :

.message {border:solid 1px blue;margin:20px;margin-left:
auto;margin-right:auto;text-align:left;width:100%}

with this, I'd change the width to something, can't remember right at
this point of 100% width won't bring it from left to right full size.
Try giving it a width if the 100% doesn't seem to do anything.

width: auto
will make the design scalable (fluid, flexible). Setting width: 100%
contributes to create a rigid, over-constrained design which will not
suit fluid/scalable webpage design.

width: auto
has to be understood as "take as much as you can" from left to right
from its containing block.

Gérard
--
remove blah to email me

[shapper]

Gérard Talbot wrote:

CatBones wrote :

.message {border:solid 1px blue;margin:20px;margin-left:
auto;margin-right:auto;text-align:left;width:100%}

with this, I'd change the width to something, can't remember right at
this point of 100% width won't bring it from left to right full size.
Try giving it a width if the 100% doesn't seem to do anything.

width: auto
will make the design scalable (fluid, flexible). Setting width: 100%
contributes to create a rigid, over-constrained design which will not
suit fluid/scalable webpage design.

width: auto
has to be understood as "take as much as you can" from left to right
from its containing block.

Gérard
--
remove blah to email me

Sorry,

Maybe I didn't explain myself the right way but it was because I
couldn't.
I am using ASP.NET server controls and sometimes they render as not
expected.

At the same time I had a few textboxes which where behaving in a
strange way and that were affecting my interpretation of my problem.

I was setting my textboxes to 100% and it seems that when they are
inside a div they have two behaviors, depending on the browser:
1. Get to the limit of the div as expected
2. Pass the right limit of the div
3. Pass the right limit of the div and pushes further altering the
width.

Because I had textboxes inside my div I didn't realized it was this
that caused the problem.

This textboxes thing is quite strange.

Anyway, in relation to my problem it is solved.

I never posted an URL because I have it in my computer and everything
is integrated in a ASP.NET project which in this moment it would be
hard to place it online.

Thanks,
Miguel

[Johannes Koch]

shapper schrieb:

I never posted an URL because I have it in my computer and everything
is integrated in a ASP.NET project which in this moment it would be
hard to place it online.

Then view your project in a browser, save the rendered code (produced by
your ASP.NET project), reduce it to the minimum and put in on some web
space for us to look at.

It's not that difficult.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)