PDA

View Full Version : Correctly positioning elements without absolute?



NeoMoon
Apr 26th, 2009, 04:59 PM
So, through all of my noob webpage-creating, I've always centered a "position: relative" div in the middle of the page with its inside divs being absolutely positioned. Now, since I'm trying to make my homepage look like the forum, this isn't cutting it. Does anybody know what I'm doing wrong, and even better how I could fix it?

The main problem is that the bodyarea div doesn't get bigger with the absolutely positioned divs.

The divs I'm positioning are the linksDiv and the lastPostsDiv.

Thanks in advance,
NeoMoon

abduraooft
Apr 26th, 2009, 05:33 PM
Does anybody know what I'm doing wrong, and even better how I could fix it?We can't guess the issue, we need your complete code or a link would be better.

NeoMoon
Apr 26th, 2009, 05:43 PM
We can't guess the issue, we need your complete code or a link would be better.

Ha, thought I had included the link. Sorry about that.

http://runecosmic.throstware.com/

Excavator
Apr 26th, 2009, 06:41 PM
Hello NeoMoon,
By positioning those element absolutely you take them out of the normal flow of the document. Try floating them instead -
#bodyarea {
position: relative;
overflow: auto;
}
#lastPostsDiv {
float: right;
margin: 0 177px 0 0;
width: 190px;
}
#linksDiv {
float: left;
margin: 0 0 0 50px;
width: 190px;
}

That overflow:auto; clears the floats. Here is a description of how that works. (http://www.quirksmode.org/css/clearing.html)

I don't use AP unless there is no other way to do it. Some people use it more often but it can cause more problems than it cures. Have a read of this - Absolute positioning pitfalls (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

NeoMoon
Apr 26th, 2009, 06:48 PM
That worked perfectly! Thanks -- and those links were helpful as well.

oldcrazylegs
Apr 26th, 2009, 08:18 PM
You should learn to validate your source code while writing it. Currently you have 34 XHTML errors and 4 CSS errors.

I suggest you download CSE HTML Validator Lite (Free Version) http://www.htmlvalidator.com/ and write your code in it and use it to validate it to.

With this editor/validator you don't have to be online to validate your code.

The Web Developer Addon for Firefox is very handy to have as well. But you have to be online to use the Validators in it. But still you would be wise to also use this toolbar.

NeoMoon
Apr 26th, 2009, 08:38 PM
You should learn to validate your source code while writing it. Currently you have 34 XHTML errors and 4 CSS errors.

I suggest you download CSE HTML Validator Lite (Free Version) http://www.htmlvalidator.com/ and write your code in it and use it to validate it to.

With this editor/validator you don't have to be online to validate your code.

The Web Developer Addon for Firefox is very handy to have as well. But you have to be online to use the Validators in it. But still you would be wise to also use this toolbar.

I might look more into that program later on; use the trial. Does it also check for cross-browser issues?

And, just came across another small problem. Adding my 'content area' ('Welcome to RuneCosmic') onto the page, it screwed up the 2 divs I had fixed with float.

Can anybody spot waldo? http://runecosmic.throstware.com/

Excavator
Apr 26th, 2009, 08:59 PM
Re-order you markup so the floats come first.
Like this -
<div id="bodyarea">
<div id="linksDiv">
<span class="SubArea_Top"><b>Navigation</b></span>
<span class="SubArea_Border">
<a href="http://runecosmic.throstware.com/"><span class="linkRow">&nbsp;Main Page</span></a>
<a href="http://runecosmic.throstware.com/forums"><span class="linkRow">&nbsp;Forums</span></a>
</span>
</div>
<div id="lastPostsDiv">
<span class="SubArea_Top"><b>Last 5 Posts</b></span>
<span class="SubArea_Border" style="padding: 5px; width: 178px;">
<a href="forums/index.php?topic=4.msg11#msg11">Re: Not sure where to post this...</a> by <a href="forums/index.php?action=profile;u=4">Conor</a><br><center><hr style="opacity: 0.3;" color="#333333" width="100"></center><a href="forums/index.php?topic=4.msg10#msg10">Re: Not sure where to post this...</a> by <a href="forums/index.php?action=profile;u=3">_Jc</a><br><center><hr style="opacity: 0.3;" color="#333333" width="100"></center><a href="forums/index.php?topic=3.msg9#msg9">Re: xd</a> by <a href="forums/index.php?action=profile;u=3">_Jc</a><br><center><hr style="opacity: 0.3;" color="#333333" width="100"></center><a href="forums/index.php?topic=4.msg8#msg8">Not sure where to post this...</a> by <a href="forums/index.php?action=profile;u=13">Jake</a><br><center><hr style="opacity: 0.3;" color="#333333" width="100"></center><a href="forums/index.php?topic=2.msg7#msg7">Re: Setting things Up</a> by <a href="forums/index.php?action=profile;u=12">Nick</a> </span>
</div>
<div id="contentDiv">
<span id="contentDivTop"><center><b>Welcome to RuneCosmic</b></center></span>
</div>
</div>

NeoMoon
Apr 26th, 2009, 09:04 PM
Oh, thanks again. Worked like a charm.