✔ Spalte mit mehreren Zeilen!?

Status
Nicht offen für weitere Antworten.
Bandit_profi

Bandit_profi

Erfahrenes Mitglied
Hallo,
habe ein kleines (!?) Problem. Ich möchte ein Design aufbauen, mit einer linken Spalte, einer mittigen Spalte mit zwei (oder mehr) Zeilen und ein rechte Spalte. Siehe hierfür die angehängt Grafik.

Die 3 Spalten habe ich halt (ganz normal) über Faux Columns gelöst. Allerdings schaffe ich es überhaupt nicht, mehrere Zeilen in der Mitte zu erstellen.
Bisher habe ich versucht es über Float und Clear zu lösen, aber ich denke das klappt wohl nicht. Dabei wird nämlich so gut wie immer die rechte Spalte verschoben.

Hat von euch villeicht jemand ne Idee oder gar die Lösung für das Problem?

Danke euch,
Gruß Bandit
 

Anhänge

  • 26260attachment.gif
    26260attachment.gif
    2,9 KB · Aufrufe: 10
HTML
Code: 
 <div class='main'>
	<div class='boxleft'>
         Linke Spalte
	</div>
	<div class='boxcenter'>
         Mittlere Spalte
	</div>
	<div class='boxright'>
         Rechte Spalte
 	</div>
 </div>

CSS
Code: 
.main {
	border-top: 1px #F0F0F0 solid;
	border-bottom: 1px #F0F0F0 solid;
	margin: 0 auto 0 auto;	width: 990px;
	background: url(../images/main2_bg.gif) repeat-y;
	font-size: 11px;
}

.main:after {
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.main .boxleft {
	float: left;
	width: 160px;
	padding: 0 20px 10px 20px;
}

.main .boxcenter {
	float: left;
	width: 550px; height: auto;
	padding: 0 20px 20px 20px; 
	column-count: 2;
	column-gap: 20px;
	
}

.main .boxright {
	float: left;
	width: 160px;
	padding: 0 20px 10px 20px; 
}


Hab überlegt, ich könnte das ganze auch "grafisch" lösen. Wäre aber nicht so die tolle Lösung. Dann also in die boxcenter-div noch zwei einfügen.

In die oberste Zeile kommt ein kurzer Begrüßungstext, darunter werden sich "Neuigkeiten" befinden.
Problem wäre halt dann das die Zeilen so verschachtelt sind und ich mich schwer tun würde, den Begrüßungstext und die News in einem anderen Design wieder zu trennen - Bzw. halt nur durch umschreiben des HTML-Codes.

Ich hoffe man kann verstehen was ich meine, ist villeicht ein bisschen umständlich geschrieben. ;)

Gruß, Bandit
 
Ehrlich gesagt verstehe ich nicht, wo das Problem liegt:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
.main {
        border-top: 1px #F0F0F0 solid;
        border-bottom: 1px #F0F0F0 solid;
        margin: 0 auto;
        width: 990px;
        background: url(../images/main2_bg.gif) repeat-y;
        font-size: 11px;
}

.main .boxleft {
        float: left;
        width: 160px;
        padding: 0 20px 10px 20px;
}

.main .boxcenter {
        float: left;
        width: 550px;
        padding: 0 20px 20px 20px;
        column-count: 2;
        column-gap: 20px;
}

/* Zeilen in der mittleren Spalte */
.main .boxcenter .content {
background: #efefef;
margin-top: 5px;
}

.main .boxright {
        float: right;
        width: 160px;
        padding: 0 20px 10px 20px;
}

.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
-->
</style>

</head>
<body>

<div class="main">
        <div class="boxleft">Linke Spalte</div>
        <div class="boxright">Rechte Spalte</div>
        <div class="boxcenter">Mittlere Spalte
             <div class="content">content 1</div>
             <div class="content">content 2</div>
        </div>
        <div class="clear">&nbsp;</div>
 </div>

</body>
</html>
 
Jap, genau das habe ich versucht in meinem letzten Beitrag zu erklären. Ich würde eine Lösung begrüßen in der die beiden Zeilen nicht so sehr von einander abhängen.

Wenn ich die Lösung wie unten übernehme, stehen "Content1" und "Content2" in ständiger "Verbindung", auch wenn ich mal das Layout ändern möchte.
Mittlerweile denke ich aber fast, es gibt keine andere Lösung.

Ich danke aufjedenfall mal.
Gruß, Bandit
 
Okay..., jetzt ist bei mir der Groschen gefallen ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
.main {
        border-top: 1px #F0F0F0 solid;
        border-bottom: 1px #F0F0F0 solid;
        margin: 0 auto;
        width: 990px;
        background: url(../images/main2_bg.gif) repeat-y;
        font-size: 11px;
}

.main .boxleft {
        float: left;
        width: 160px;
        padding: 0 20px 10px 20px;
}

.main .boxcenter {
        padding: 0 20px 20px 20px;
        column-count: 2;
        column-gap: 20px;
        margin: 0 200px;
        border: 1px solid #f0f0f0;
}

.main .margin {
margin-top: 5px;
}

.main .boxright {
        float: right;
        width: 160px;
        padding: 0 20px 10px 20px;
}

.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
-->
</style>

</head>
<body>

<div class="main">
        <div class="boxleft">Linke Spalte</div>
        <div class="boxright">Rechte Spalte</div>
        <div class="boxcenter">boxcenter 1
             <p>dummy text 1</p>
        </div>
        <div class="boxcenter margin">boxcenter 2
             <p>dummy text 2</p>
        </div>
        <div class="clear">&nbsp;</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück