|
|||
Browser-Problem bei Positionierung von DIVs
Hallo,
ich hab ein problem mit der positionierung von divs. am besten einfach mal den unten stehenden code kopieren und testen. problemstellung: ich möchte gerne zwei divs (A und B) nebeneinander platzieren. die beiden betroffenen divs sind im beispiel gelb hinterlegt. unterhalb dieser beiden divs befindet sich ein "footer"-div (C), im beispiel orange hinterlegt. nun geht es darum, dass div C abhängig von der höhe von div A und div B variabel positioniert wird. hierbei kann mal die höhe von A größer sein, aber auch die höhe von B. ich denke, soweit ist das verständlich... die gängigen browser stellen dies auch korrekt dar. als negatives beispiel kann ich hier nur den mac ie 5.2 nennen, der die divs A und B vertikal versetzt darstellt. d.h. B liegt unterhalb von A und nicht auf der selben x-Position, wie es eigentlich sein sollte. dass es nicht am browser liegen kann, zeigt mir www.mezzoblue.com, die von der positionierung der divs ähnlich aufgebaut und im mac ie 5.2 korrekt angezeigt wird. vielleicht könnt ihr mir ja helfen, wäre auf jeden fall sehr dankbar für nützliche tipps... mfg michael PS: hier der code-schnipsel Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Titel</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- html, body { margin: 0px; min-width: 780px; text-align: center; font-family: verdana, arial, sans-serif; font-size: 10px; background-color: #666; } a { text-decoration: none; } #container { width: 740px; margin: 0px auto; text-align: left; background-color: #fff; } #pageHeader { position: relative; margin: 0px 8px 0px 8px; } #pageBody { position: relative; margin: 0px 8px 0px 8px; clear: both; } #content { width: 511px; float: left; background-color: #ff0; } #sideBar { width: 190px; margin-left: 533px; background-color: #ff0; } #pageFooter { margin: 0px 8px 0px 8px; text-align: center; clear: both; background-color: #f90; } #pageHeader ul { margin: 0px; padding: 8px 0px 0px 0px; } #pageHeader ul li { margin: 0px 10px 0px 0px; font-weight: bold; display: inline; } #imageBar { margin: 0px; width: 724px; height: 120px; background-color: #999; } #pageFooter p { margin: 0px; } .subhead { text-align: right; } --> </style> </head> <body> <div id="container"> <div id="pageHeader"> <ul>[*]hier[*]kommt[*]dann[*]die[*]navigation[/list] <div id="imageBar"></div> </div> <div id="pageBody"> <div id="content"> <div> hier kommt dann der inhalt </div> </div> <div id="sideBar"> <div>sidebar</div> </div> </div> <div id="pageFooter"> Hier kommt der Footer</p> </div> </div> </body> </html> |
Sponsored Links |
|
|||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Titel</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> <!-- html, body { margin: 0px; min-width: 780px; text-align: center; font-family: verdana, arial, sans-serif; font-size: 10px; background-color: #666; } a { text-decoration: none; } #container { width: 740px; margin: 0px auto; text-align: left; background-color: #fff; } #pageHeader { position: relative; margin: 0px 8px 0px 8px; } #content { width: 511px; float: left; margin-left: 8px; background-color: #ff0; } #sideBar { width: 190px; margin-left: 22px; float: left; background-color: #ff0; } #pageFooter { margin: 0px 8px 0px 8px; text-align: center; clear: both; background-color: #f90; } #pageHeader ul { margin: 0px; padding: 8px 0px 0px 0px; } #pageHeader ul li { margin: 0px 10px 0px 0px; font-weight: bold; display: inline; } #imageBar { margin: 0px; width: 724px; height: 120px; background-color: #999; } #pageFooter p { margin: 0px; } .subhead { text-align: right; } --> </style> </head> <body> <div id="container"> <div id="pageHeader"> <ul>[*]hier[*]kommt[*]dann[*]die[*]navigation[/list] <div id="imageBar"></div> </div> <div id="content"> <div> hier kommt dann der inhalt </div> </div> <div id="sideBar"> <div>sidebar</div> </div> <div id="pageFooter"> Hier kommt der Footer</p> </div> </div> </body> </html> mfg michael |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Hintergrund + Positionierung | deepy | (X)HTML | 2 | 27.07.2010 12:33 |
Problem mit relativer Positionierung | wahn_nau | CSS | 2 | 19.03.2009 08:45 |
a:hover Problem über Browser Zurück-Schaltfläche ! | un_titled | CSS | 3 | 15.09.2006 09:10 |
Problem mit Divs, Floating und Positionierung | scavenger | CSS | 13 | 11.07.2006 21:15 |
Horizontales Listenmenü: problem bei positionierung von li | toppo | CSS | 2 | 05.02.2006 19:55 |