[Erledigt] Saubere Lösung gesucht: DIVs auf gleicher Höhe

WasserDragoon · 11.09.2009, 16:17

Hallo,

habe 2 Eltern-DIVs (untereinander), die je 2 weitere DIVs (nebeneinander) enthalten, um alles auf eine gleiche Höhe zu bringen...

Nun verrückt sich aber mein unterer rechter DIV ein kleines Stück nach oben.
Ich habe zwar bereits eine Lösung gefunden, jedoch finde ich, dass die nicht sauber ist.

Hier der relevante Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<style rel="stylesheet" type="text/css">
		div#cnav {
			padding-bottom: 40px;
		}
		
		/*div#cdata {
			padding-top: 0.1px; /* nur ein workaround - keine saubere loesung */
		}*/
		
		div#ad-1, div#cnav, div#cdata {
			margin-left: 160px;
			width: 620px;
		}
		
		div#cnav-0, div#cdata-0 {
			position: relative;
			height: 100%;
			width: 290px;
			float: left;
			left: -10px;
		}
		
		div#cnav-1, div#cdata-1 {
			margin-left: 285px;
			height: 100%;
			width: 326px;
		}
		
		div#cdata-0 div.dhead, div#cdata-1 div.dhead {
			background: #002c73;
			font-weight: bold;
			color: #ffffff;
			padding: 2px;
			margin: 5px;
			width: 95%;
		}
	</style>
</head>
<body>
	<div id="content">
		<div id="cnav">
			<div id="cnav-0">top left (cnav-0)</div>
			<div id="cnav-1">top right (cnav-1)</div>
		</div>
		<div id="cdata">
			<div id="cdata-0">
				<div class="dhead">headline 1</div>
				bottom left (cdata-0)
			</div>
			<div id="cdata-1">
				<div class="dhead">headline 2</div>
				bottom right (cdata-1)
			</div>
		</div>
	</div>
</body>
</html>

Bitte um Hilfe.
Danke im voraus.

Mit freundlichen Grüßen,
Danny.

EDIT: Das seltsame ist, dass alles auf der gleichen Höhe ist, sobald ich den beiden Eltern-DIVs (cnav und cdata) eine Umrandung gebe. Eine Umrandung benötige ich aber auch nicht

nikosch · 11.09.2009, 16:26

Warum baust Du das so sonderbar auf? Floating und Positioning ist für so einen einfachen Anwendungsfall imho much to much. Besagtes Div wird bei mir übrigens links in den Rahmen eingezogen.

Das mit den borders hat imho hiermit zu tun: http://onhavinglayout.fwpf-webdesign.de/

Ich würde Dir nahelegen, das Layout-CSS umzubauen. Da das sicher nur ein Test für Dein ganzes Layout ist, müßtest Du aber mal darstellen, wo Du letzten Endes hin möchtest.

PS: Für Headlines gibt es HTML-Elemente.

WasserDragoon · 11.09.2009, 16:29

Danke für die rasche Antwort.
Hatte ziemlich viel überlegt und mir fiel eben nur dieses eine Modell ein.
Was sollte ich ändern, wie sollte ich es aufbauen?

nikosch · 11.09.2009, 16:34

Wie genau soll es denn aussehen?

[edit]

Kannst Du damit was anfangen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Untitled Document</title>


  <style rel="stylesheet" type="text/css">

    #cnav div , #cdata div {
      float:left;
      }

    #cdata {
      clear:left
      }

    #cnav-0 , #cdata-0 {
      width: 285px;
      margin-right:5px;
      }

    #cnav-1 , #cdata-1 {
      width: 326px;;
      }

    #cnav div div , #cdata div div {
      float:none;
      }

    h2 {
      background: #002c73;
      font-weight: bold;
      color: #ffffff;
      padding: 2px;
      margin: 1em 0;
      }

  </style>

</head>
<body>
  <div id="content">

    <div id="cnav">
      <div id="cnav-0">top left (cnav-0)</div>
      <div id="cnav-1">top right (cnav-1)</div>
    </div>

    <div id="cdata">

      <div id="cdata-0">
        <h2>headline 1</h2>
        bottom left (cdata-0)
      </div>

      <div id="cdata-1">
        <h2>headline 2</h2>
        bottom right (cdata-1)
      </div>

    </div>

  </div>
</body>
</html>

[edit 2]
Code geändert, IE hatte Probleme damit.

WasserDragoon · 11.09.2009, 16:46

Ja super, Danke vielmals!

nikosch · 11.09.2009, 16:57

Gerne. Bitte noch browserübergreifend testen. Ist jetzt nur aus der hohlen Hand zusammengeklöppelt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Lösung gesucht: Upload mehrere Dateien per input	hehe94	PHP Tipps 2009	9	08.09.2009 13:21
[Erledigt] DIvs passen sich nicht automatisch der höhe an im Firefox und Opera	litterauspirna	HTML, Usability und Barrierefreiheit	4	09.10.2008 13:08
PHP Entwickler für Liveshop Lösung gesucht	eyedive	Beitragsarchiv	0	02.10.2008 00:07
MySQL: Datenbank-Suche: Lösung gesucht	SvenLittkowski	Datenbanken	0	14.07.2008 17:51
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
[CSS] dynamische höhe von divs	me	HTML, Usability und Barrierefreiheit	9	06.04.2006 13:11
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
php scripe offline testen die einfachste lösung gesucht	Newsscript	PHP Tipps 2006	3	17.01.2006 13:34
[Erledigt] (XHTML) 100% Höhe eines DIV's im FF & IE - Wie?		HTML, Usability und Barrierefreiheit	2	20.10.2005 14:22
Template System oder Lösung gesucht		PHP Tipps 2005	14	21.05.2005 22:07


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

11.09.2009, 16:26
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Warum baust Du das so sonderbar auf? Floating und Positioning ist für so einen einfachen Anwendungsfall imho much to much. Besagtes Div wird bei mir übrigens links in den Rahmen eingezogen. Das mit den borders hat imho hiermit zu tun: http://onhavinglayout.fwpf-webdesign.de/ Ich würde Dir nahelegen, das Layout-CSS umzubauen. Da das sicher nur ein Test für Dein ganzes Layout ist, müßtest Du aber mal darstellen, wo Du letzten Endes hin möchtest. PS: Für Headlines gibt es HTML-Elemente. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (11.09.2009 um 16:33 Uhr).

11.09.2009, 16:29
WasserDragoon Benutzer Registriert seit: 18.02.2009 Beiträge: 53	Danke für die rasche Antwort. Hatte ziemlich viel überlegt und mir fiel eben nur dieses eine Modell ein. Was sollte ich ändern, wie sollte ich es aufbauen?

11.09.2009, 16:46
WasserDragoon Benutzer Registriert seit: 18.02.2009 Beiträge: 53	Ja super, Danke vielmals!

11.09.2009, 16:57
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Gerne. Bitte noch browserübergreifend testen. Ist jetzt nur aus der hohlen Hand zusammengeklöppelt. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --