No Tables Anymore Help - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

No Tables Anymore Help

quozt

9:47 am on Apr 18, 2004 (gmt 0)

10+ Year Member

im trying to design a website without tables at the moment here is my html code
<div id="content">
Welcome
</div>
<div id="buttons">
<p>
<a href="http://validator.w3.org/check/referer"> <img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>

<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
<a href="http://www.mozilla.org/products/firefox/"
title="Get Firefox - The Browser, Reloaded"><img
src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png"
style="border:0;" alt="Get Firefox" /></a>
</p>
</div>

and here is my css code

#content{
position: absolute;
display: block;
border: 2px dotted #000000;
color: #000000;
text-align: center;
background:#ECEAE6;
left:2%;
top:200px;
width: 92%;
padding:.3em;
}

#buttons{text-align: center;

}
the problem i am facing is that i want the buttons to be directly under the content div but it appears half way down the page...i could use absolute posisioning but i dont know how far down the page my content will be (it will be different on each page) can anyone give an idea to a css newbie :)

D_Blackwell

1:34 am on Apr 19, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Does #content need to be absolutely postitioned? This is why the buttons aren't where you want them. The absolute positioning already in place works outside the normal flow of the document. The buttons, which are in the normal flow of the document, are right where they should be.

Think of these buttons as being set up in their own footer div, and it might be easier to visualize.

but it appears half way down the page

You specified 200px;

Try this:
<html>
<head>
<style>
#content{
border: 2px dotted #000; color: #000; text-align: center; background-color: #eceae6;
margin: 200px 0 0 2%; width: 92%; padding: .3em;
}
#buttons{
text-align: center;

}
</style>
</head>
<body>
<div id="content">
Welcome
</div>
<div id="buttons">
<p>
<a href="http://validator.w3.org/check/referer"> <img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>

<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
<a href="http://www.mozilla.org/products/firefox/"
title="Get Firefox - The Browser, Reloaded"><img
src="http://www.mozilla.org/products/firefox/buttons/getfirefox_large2.png"
style="border:0;" alt="Get Firefox" /></a>
</p>
</div>

css newbie

When I first started with CSS, I used absolute: for everything becuase I could make things go where I wanted them. This turned out to be a short-term view (for me). Now, I use absolute: only when I have a specific reason for doing so.