<div> centrally positioned?

**andkhl** · 04-18-2007, 04:48 PM

Very easy quesion, but I can't find an answer...

How do I position a <div></div> centrally? I have the following css stylesheet, where div.container is to be positioned centrally on the page:

html {
height : 100%;
}
body {
height: 100%;
background-color : #ffffff;
margin : 0;
font-family: Verdana;
font-size: 11px;

}
div.container {
height:100%;
width: 80%;
}

Thank you.

**gil davis** · 04-18-2007, 05:48 PM

Code:

div.container {
height:100%;
width: 80%; 
position: absolute;
left: 10%;
}

**Taschen** · 04-18-2007, 05:53 PM

position absolute is an interesting way, a more appropriate way is

Code:

div.container {
width: 80%;
margin: auto;
}

**drhowarddrfine** · 04-18-2007, 10:23 PM

In most cases, Taschen's way is the preferred way.

**andkhl** · 04-19-2007, 10:52 AM

Thanks. It worked!

I still have one question: why is my <div.container> still positioned left in Design Mode in FrontPage, whereas, when being viewed in a browser, the DIV is positioned centrally???

Thanks.

**roondog** · 04-19-2007, 10:57 AM

put text-align:center; in the body css. that usually fixes some problems with margin: 0 auto;

**gil davis** · 04-19-2007, 12:49 PM

Originally Posted by drhowarddrfine

In most cases, Taschen's way is the preferred way.

As long as there isn't any other content destined for the dead space.

**WebJoel** · 04-19-2007, 01:04 PM

...I still have one question: why is my <div.container> still positioned left in Design Mode in FrontPage, ...

Does this page have a valid !doctype statement before the opening "<html>"? If not, this may be why..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

**andkhl** · 04-19-2007, 03:55 PM

Is there a way to control <span> width? I am trying to do away with tables and cells, and so I have something like this:

<div style="width:100%;">
<span style="width:50%;">hello</span>
<span style="width:50%;">hello</span>
</div>

Unfortunately, <span> width doesn't work that way, but I need a way to have control over that. Please advise!

Thank you.

**disgracian** · 04-20-2007, 02:37 AM

Originally Posted by andkhl

I still have one question: why is my <div.container> still positioned left in Design Mode in FrontPage, whereas, when being viewed in a browser, the DIV is positioned centrally???

Like Dreamweaver, the Frontpage design view isn't an exact science. Pay very little attention to it. If it validates and displays correctly in browsers, that's all that matters.

Cheers,
D.

**andkhl** · 04-20-2007, 09:27 AM

Thank you guys for your replies. Could anybody answer my question about <span> width please?

**roondog** · 04-20-2007, 09:35 AM

In your example i would use two more divs rather than the two spans. Span should be used for styling short bits of text i.e a line in a paragraph.

**andkhl** · 04-20-2007, 09:45 AM

Originally Posted by roondog

In your example i would use two more divs rather than the two spans. Span should be used for styling short bits of text i.e a line in a paragraph.

I've tried using two DIVs, but the problem is they do not stay in place side by side (on one line visually), but rather the second DIV jumps below the first one. There has to be a way to keep them in horizontally aligned visually speaking, it it just I don't know how to do that. Would you explain how to do that? Thank you.