Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

why doesnt my div absolute positioning work? 1

Status
Not open for further replies.
bookouri

bookouri

IS-IT--Management
Feb 23, 2000
1,464
US
I am just getting started with css and can't figure out what's going on with this simple positioning example.

<code>
<html>
<head>
<style>
div.sidebar {position:absolute; background-color:cornflowerblue; top:50; left:50; width:200px; height: 75%; padding-left: 6px; padding-right:4px; padding-top: 6px; font-size:16pt;}

div.maintext {position:absolute; background-color:blue; top:50px; left: 255px; height: 75%; width: 75%;}
img.relative {position:relative; left=30%; top=20% }
div.mytest {position:absolute; background-color:cornflowerblue; top:50; left:50; width:200px;
height: 75%; padding-left: 6px; padding-right:4px; padding-top: 6px; font-size:16pt;}
</style>
</head>

<body>

<div class="sidebar"> HERE is a sidebar. You can fill it with links, text, whatever...</div>

<div class="maintext"> <img class="relative" height="400" width="475" src="house.jpg"></div

<div style="position:absolute;background-color:green; top:100px; left:100px;"> DIV green </div>
<div style="position:absolute;background-color:red; top:500px; left:100px;"> DIV red </div>

</body>
</html>

</code>

When i pull this up in firefox or IE the div with "DIV green" has no styles applied and the div "DIV red" does. However, if I reverse the order of these two divs the "DIV green" works and the "DIV red" does not. Why does the order matter in this case? Why don't they both work no matter what order they are in?

thanks for any help

 
Sort by date Sort by votes
Hi

bookouri said:
top:50; left:50;
Click to expand...
Wrong. Length values must contain a unit of measurement. The only exception is the 0 value, which may lack the unit.
bookouri said:
</div
Click to expand...
Close that [tt]div[/tt] tag and the following green [tt]div[/tt] will not be compromised.

Use an editor with syntax highlighting capability. Not all of them will act identically, but for example in MCEdit that unclosed tag error was clearly visible.

Next time please post your code between [tt][ignore]
Code: 
[/ignore][/tt] and [tt][ignore]
[/ignore][/tt] TGML tags.

Feherke.
 
Upvote 0 Downvote
Your maintext div is not properly closed so it makes the following div be part of it, and as such it does not get properly displayed.


With that said, if you are just starting out ere are a few tips:

[ol]
[li]Do not abuse absolute:positioning like that. In normal circumstances you should probably never need to absolutely position anything. If you do need to position something its going to be for a very specific purpose. If you are absolutely positioning your entire layout then there's something very wrong and its just going to make things very complex.
[/li]
[li] Always give your pages/websites a doctype.
[/li]
[li] You can use the Developers console in different Browsers to help you pint point errors. In FF its the Error Console.
[/li]
[li]Try to validate your code in a validator so you know there aren't any other mysterious errors lingering around and so you can be reasonably certain your page should display as similar as possible in any browser. [/li]
[/ol]


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thanks, I went through the DIV lines over and over and I was so convinced that the error had to be in them I just got tunnel vision and missed the real error.

i guess i do need to switch to a real editor though. I thought i didnt need anything else on these simple examples but i guess i was wrong.

How should objects like these be positioned in the "real" world?

thanks again
 
Upvote 0 Downvote
i really hate being ignorant, but i havnt ever heard of any "panel" objects in html or css or anything. What am i missing?

 
Upvote 0 Downvote
Sorry, panel is not a HTML expression just my explanation.

Split the page into divs ie. Header, left column, page content, footer etc. It really depends on what your layoout requires.
You will find that these elements position naturally without the use of any absolute positioning.

I would suggest you have a play at setting up a basic page before trying to set up your whole website at once.

Keith
 
Upvote 0 Downvote
Thanks thats kind of what i had in mind playing with the divs to start with, but i assumed the best way would be using absolute positioning for those div "panels" otherwise i figured they'd run all down the page..

 
Upvote 0 Downvote
The first thing to learn should be the difference between block level elements and inline elements. divs are block so by default they do stack one on top of the other. Inline elements on the other hand stay on the same line provided there is enough room for
them otherwise they drop down.


If you need to position divs next to each other use floats rather than absolute positioning.

Code: 
<div style="float:left;">Div 1</div><div style="float:left;">Div 2</div><div style="float:left;">Div 3</div>

This would place 3 divs next to each other.

Spans will lay side by side without any extra styling.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thanks, that inline vs block idea was something i missed. Well, I read over it but didnt think about it in terms of setting up the "panels" of the page.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
170
lmcate
lmcate
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
544
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
157
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
105
tyutghf
tyutghf
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
148
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top