zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden mitwachsende div bei 2 spalten layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.03.2007, 00:07
übermensch
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Beiträge: 32
musmus befindet sich auf einem aufstrebenden Ast
Standard mitwachsende div bei 2 spalten layout

Hallo,

kaum zu glauben, obwohl ich das Problem schon so oft gesehen habe, ergibt die Suche nichts. Folgendes Problem:

Habe ein 2-Spalten div-Layout für eine Kommentarfunktion. Höhe dieser Box sollte mindestens 100 Pixel sein, da in der Linken box fest ein paar Informationen sind. In der rechten DIV befindet sich der Inhalt, diese wächst also. Nun müsste die linke DIV aber auch mitwachsen, da es von den stylesachen (bg- und border-farben) mitwachsen muss.

hier mal mein css-code

Code:
.post_box_wrap {
				overflow: auto;
				border: 1px solid #999999;
				margin-top: 2px;
			}
			
.post_box_left {
				padding-top: 5px;	
				padding-left: 5px;	
				float: left;
				background-color: #E4E4E4;
				border-right: 1px solid #999999;
				width: 104px;
			}
			
.post_box_right {
				padding: 5px;
				float: right;
				width: 370px;
				background-color: #E4E4E4;
			}
dazu html code, was allerdings eher unwichtig sein sollte:

Code:
<div class="post_box_wrap">
	<div class="post_box_left">
               linker inhalt
        </div>
        <div class="post_box_right">
               rechter inhalt
        </div>
<span style="clear:both;"></span>
</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.03.2007, 00:23
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Siehe FAQ Punkt 1.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.03.2007, 00:26
übermensch
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Beiträge: 32
musmus befindet sich auf einem aufstrebenden Ast
Standard

huch, ok hab ich natürlich nich über suche gefunden, werd ma öfter in die faqs sehen!

sry!

hier nochmal die lösung, falls jemand mal wieder auf der suche ist (GELÖST OHNE HINTERGRUNFBILD! nur mit css farben/befehlen)

Code:
.post_box_wrap {
				overflow: auto;
				border: 1px solid #999999;
				margin-top: 2px;
				background-color: #E4E4E4;
				
			}
			
	.post_box_left {
				padding-top: 5px;	
				padding-left: 5px;	
				float: left;
				background-color: #E4E4E4;
				width: 104px;
			}
			
	.post_box_right {
				border-left: 1px solid #999999;
				padding: 5px;
				float: right;
				width: 370px;
				background-color: #E4E4E4;
			}

Geändert von musmus (05.03.2007 um 00:35 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 05.03.2007, 00:58
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Code:
.post_box_wrap {
				overflow: auto;
				border: 1px solid #999999;
				margin-top: 2px;
				background-color: #E4E4E4;
				
			}
			
	.post_box_left {
				padding-top: 5px;	
				padding-left: 5px;	
				float: left;
				background-color: #E4E4E4;
				width: 104px;
			}
			
	.post_box_right {
				border-left: 1px solid #999999;
				padding: 5px;
				float: right;
				width: 370px;
				background-color: #E4E4E4;
			}
Dreimal dieselbe Hintergrundfarbe? Und die Lösung mit der border funktioniert natürlich, aber nur solange rechts höher ist als links. Wenn rechts mal sehr wenig Inhalt steht, klappt es nicht.

Wenn es Dir aber tatsächlich nur um die border geht, kannst Du hier Abhilfe schaffen z.B. durch eine zusätzliche border-right für .post_box_left, und dann .post_box_right per negativem margin oder position: relativ; um 1px nach links schieben, so daß beide borders zu einer "verschmelzen".
Mit Zitat antworten
  #5 (permalink)  
Alt 05.03.2007, 01:18
übermensch
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2006
Beiträge: 32
musmus befindet sich auf einem aufstrebenden Ast
Standard

hi, ja stimmt natürlich, aber durch fest vorgegebene texte in beiden boxen (username, datum des posts) ist die rechte box (auch wenn nichts geschrieben wird, was selten bei kommentaren vorkommt ) mindestens genauso hoch wie die linke!
Mit Zitat antworten
Antwort

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 Layout mit variablem Rand BooKer CSS 0 18.06.2010 03:07
Header entfernen tripple CSS 17 15.06.2010 16:41
zwei Spalten layout, IE Abstandproblem paramit CSS 2 03.07.2008 14:05
IE verschiebt mittleres div bei 3 Spalten Layout bendar CSS 2 19.08.2006 16:33
3 Spalten Layout - Div Höhe aneinander angleichen Simsi CSS 3 01.01.2006 19:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:19 Uhr.