Linke und rechte spalte laufen nicht mit

DaZaRt · #1 (**permalink**) 14.05.2008, 16:19

Gutan tag ich habe mir ein CSS layout gebastelt doch leider fließen die rechte und linke leiste nicht mit der mitteleren mit wie könnte ich dies ändern ?
also anstatt (skize) :

| | |
| | |
| | |
| | |

nur:

| | | <--- soll mitlaufen
|
|
|
|
Ich hoffe ihr versteht was ich meine

es handelt sich in der datei um

Code:

  <div class="content_middle">
    <div class="content_middle_left"></div>
    <div class="content_middle_right"></div>
    <div class="content_middle_middle"></div>
  </div>

und

Code:

.content_middle {
	width: auto;
	height: auto;
	clear: both;
}
.content_middle_left {
	float: left;
	width: 30px;
	background-color: #0000FF;
	height: 100%;
}
.content_middle_right {
	float: right;
	width: 30px;
	background-color: #0000FF;
	height: 100%;
}
.content_middle_middle {
	background-color: #00CC33;
	float: none;
	width: auto;
	height: auto;
	left: 30px;
	right: 30px;
	top: 0px;
	margin-top: 0px;
	margin-right: 30px;
	margin-left: 30px;
}

Aber hier nochmal die kompletten dateien :
.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="content">

  <div class="content_top">
    <div class="content_top_left"></div>
    <div class="content_top_right"></div>
    <div class="content_top_middle"></div>
  </div>
  
  <div class="content_middle">
    <div class="content_middle_left"></div>
    <div class="content_middle_right"></div>
    <div class="content_middle_middle"></div>
  </div>

	<div class="content_foot">
    <div class="content_foot_left"></div>
    <div class="content_foot_right"></div>
    <div class="content_foot_middle"></div>
  </div>
 
</div>
</body>
</html>

CSS:

Code:

.content {
	height: auto;
	width: auto;
}
.content_top {
	padding: 0px;
	width: auto;
	height: auto;
}
.content_top_left {
	float: left;
	width: 30px;
	height: 50px;
	background-color: #FF0000;
}
.content_top_right {
	float: right;
	width: 30px;
	height: 50px;
	background-color: #FF0000;
}
.content_top_middle {
	background-color: #000000;
	float: none;
	width: auto;
	height: 50px;
	left: 30px;
	top: 0px;
	right: 30px;
}
.content_middle {
	width: auto;
	height: auto;
	clear: both;
}
.content_middle_left {
	float: left;
	width: 30px;
	background-color: #0000FF;
	height: 100%;
}
.content_middle_right {
	float: right;
	width: 30px;
	background-color: #0000FF;
	height: 100%;
}
.content_middle_middle {
	background-color: #00CC33;
	float: none;
	width: auto;
	height: auto;
	left: 30px;
	right: 30px;
	top: 0px;
	margin-top: 0px;
	margin-right: 30px;
	margin-left: 30px;
}
.content_foot {
	width: auto;
	height: 30px;
	clear: both;
}
.content_foot_left {
	float: left;
	width: 30px;
	background-color: #333333;
	height: 30px;
}
.content_foot_right {
	float: right;
	width: 30px;
	height: 30px;
	background-color: #666666;
}
.content_foot_middle {
	background-color: #996699;
	float: none;
	width: auto;
	height: 30px;
	left: 30px;
	right: 30px;
	top: 0px;
	margin-top: 0px;
	margin-right: 30px;
	margin-left: 30px;
}

Solacanea · #2 (**permalink**) 14.05.2008, 18:50

Also in dem Codebeispiel sieht man die unterschiedliche Spaltenlänge noch nicht, aber sobald Du da Content reinpackt, wirst Du mit Faux Columns arbeiten müssen, denk ich mal.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Lexible rechte und linke Spalte - Feste Mittlere Spalte	Senga	CSS	2	18.04.2009 18:45
div ist im IE weg, linke spalte in zwei zeilen teilen...	unicorn	CSS	5	22.12.2006 11:35
Rechte Spalte genauso lang wie linke Spalte	RalfEggert	CSS	11	25.01.2005 17:02
Zweispaltiges Layout - rechte Spalte gleichgroß wie linke	Krieju	CSS	28	22.08.2004 14:44
Nachtrag: rechte Spalte z.T. durch Fuss-div überdeckt	Savigny	CSS	2	04.05.2004 19:36