zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Beide DIV-Container auf gleicher Höhe ohne Layout-Wechsel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.11.2009, 13:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.11.2009
Beiträge: 2
Elkhaiat befindet sich auf einem aufstrebenden Ast
Standard Beide DIV-Container auf gleicher Höhe ohne Layout-Wechsel

Und zwar möchte ich beide Boxen immer gleich hoch haben, nicht abhängig von dem Inhalt der Boxen... So sieht es momentan aus:


Ich möchte die linke BOX gleich weit nach unten haben, wie die rechte Box.
Wie ist das möglich OHNE Layout Änderungen?

Hier die beiden Codes:

index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Lerchenfeld Maturaball ist wieder da</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta name="keywords" content="Gymnasium, Lerchenfeld, Ball, Schule, Matura, Maturaball, Klagenfurt, Messearena, Eintrittskarte, Eintrittskarten" />
<meta name="description" content="Nach 4 jahren ist er wieder da! Der Maturaball des BG/BRG Lerchenfelds mit dem Motto: Black or White! Jetzt Tische und Eintrittskarten sichern!"/>
<meta name="content-language" content="de"/>
<meta name="distribution" content="global"/>
<meta http-equiv="Content-Script-Type" content="type"/>
<!-- Die Website basiert auf PHP, MYSQL, Javascript und Ajax. Der Programmcode stammt von Mag. Otto Dolinsek.-->
<link rel="stylesheet"  type="text/css" href="screen.css" media="screen"/>

</head>
<body>

	<div id="container">
		<div id="row1">&nbsp;</div>
		<div id="row2">&nbsp;</div>
		<div id="col1">
			<a href="formular.html">Formulare</a>
		</div>
		<div id="col2">Col2</div>
		<div id="footer">Footer</div>
	</div>
</body>
</html>
und die screen.css:
Code:
body{
	background: #000000 url() no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000000;
}
#container{
	width: 980px;
	background: #DDD;
	position: relative;
	min-height: 100%;
	height: auto;
	height: 100%;
}
#row1{
	position: relative;
	float: left;
	width: 980px;
	border: 0px solid #457576;
	height: 216px;
	padding-top: 0px;
	padding-bottom: 0px;
	background: #000000 url(images/header.png) no-repeat;
}
#row2{
	position: relative;
	float: left;
	width: 980px;
	border: 0px solid #457576;
	text-align: left;
	height: 42px;
	padding: 0px;
	font-style: bold;
	font-size: 1em;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: #000000 url(images/row1.png) no-repeat;
	clear: both;
}
#col1 {
	position: relative;
	border: 0px solid #FF0000;
	float: left;
	width: 180px;
	padding: 10px;
	background: #ffffff url(images/col1.png) repeat-y;
	clear: both;
}
#col2 {
	position: relative;
	border: 0px solid #00FF00;
	float: left;
	width: 760px;
	padding: 10px;
	background: #ffffff url(images/col2.png) repeat-y;
}
#footer {
	position: relative;
	float: left;
	width: 960px;
	border: 0px solid #457576;
	text-align: left;
	height: 22px;
	padding: 10px;
	font-style: bold;
	font-size: 1em;
	background: #ee0000 url(images/footer.png) no-repeat;
	clear: both;
}
form br {
clear: both;
}
form.left {
 border: 0px solid #cccccc;
 margin: 0.5em 0em 0.5em 0em;
}
fieldset.left {
 padding:0.5em 0.5em 0.5em 0.5em;
 border:1px solid #cccccc;
 color:#000000;
 background-color:#ffffff;
}
legend.left {
 border: 1px solid #cccccc;
 background-color:#ffffff;
 color: #ff0000;
 padding:0.5em;
 font-weight: 600;
 font-size: 1em;
 margin: 0em 0em 1em 0em;
}
label.left {
 float: left;
 padding-left: 0.5em;
 padding-right: 0.5em;
 text-align: left;
 width: 18em;
}
input[type=submit].left {
 background-color:#eeeeee;
 color:#ff0000;
 font-size: 0.9em;
}
input[type=reset].left {
 background-color:#eeeeee;
 color:#ff0000;
 font-size: 0.9em;
}
Danke schon im voraus, für Ihr bemühen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.11.2009, 16:35
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Das sollte recht einfach mit der faux-columns Technik gehen.
Siehe Nr. 1 vermute ich mal. (geändert ;) )
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, hilfe

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div container Höhe anpassen funktioniert nicht! hopaba CSS 4 21.02.2010 18:23
Div Layout (überlagerte Divs mit auto. höhe) Rijndael CSS 0 29.11.2008 15:52
100% div höhe virtualia CSS 5 19.11.2007 03:41
div Container nimmt automatisch die Höhe des Eltern-div an fidelio CSS 3 12.04.2006 16:34
3 Spalten Layout - Div Höhe aneinander angleichen Simsi CSS 3 01.01.2006 19:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:48 Uhr.