PDA

Click to See Complete Forum and Search --> : <div> centrally positioned?

andkhl
04-18-2007, 05: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, 06:48 PM
div.container {
height:100%;
width: 80%;
position: absolute;
left: 10%;
}
Taschen
04-18-2007, 06:53 PM
position absolute is an interesting way, a more appropriate way is
div.container {
width: 80%;
margin: auto;
}
drhowarddrfine
04-18-2007, 11:23 PM
In most cases, Taschen's way is the preferred way.
andkhl
04-19-2007, 11: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, 11:57 AM
put text-align:center; in the body css. that usually fixes some problems with margin: 0 auto;
gil davis
04-19-2007, 01:49 PM
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, 02: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, 04: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, 03:37 AM
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, 10:27 AM
Thank you guys for your replies. Could anybody answer my question about <span> width please?
roondog
04-20-2007, 10: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, 10:45 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.

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.
roondog
04-20-2007, 10:55 AM
float one left and one right.
e.g
<div style="width:50%;float:left;"></div>
this should work
ray326
04-20-2007, 01:29 PM
Thank you guys for your replies. Could anybody answer my question about <span> width please?Span is an inline element which means it has no width other than the width of its content.
bubbisthedog
04-20-2007, 01:42 PM
Span is an inline element which means it has no width other than the width of its content.
Not a cool way of doing it (because, as you said, it's an inline element), but span can be floated and then have a width applied to it.
ray326
04-20-2007, 01:54 PM
A "floated" span is a block element.
bubbisthedog
04-20-2007, 03:35 PM
A "floated" span is a block element.
I understand. My point was that it is possible to apply a width to a span.
sitehatchery
04-20-2007, 05:33 PM
You might disagree with this method, but here's a fun way:


<ul style='width:100%; list-style-type:none; padding:0;'>
<li style='width:50%; float:left;'>
<h3>Some Text</h3>
<p>Here is the beginning of a paragraph that has text</p>
<p>Here is another paragraph</p>
<p><cite>The third paragraph</cite></p>
</li>
<li style='width:50%; float:left;'>
<h3>Some More Text</h3>
<p>Here is the beginning of a paragraph that has text</p>
<p>Here is another paragraph</p>
<p><cite>The third paragraph</cite></p>
</li>
</ul>
Taschen
04-20-2007, 08:01 PM
As long as there isn't any other content destined for the dead space.

This is a perfectly valid way even where there is content destined for "the dead space". Any dead space content can be positioned using absolute. The question is, why would you have dead space content if you want to position everything centre?

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.

You can use "display: inline". This may be in preference to float left/right depending on what you are trying to do.
roondog
04-21-2007, 12:44 PM
So to sort the problem you put display:block; correct? Or just use divs.