zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zwei Divs in äußerem mitwachsen lassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.12.2014, 15:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2014
Beiträge: 1
Daispro befindet sich auf einem aufstrebenden Ast
Standard Zwei Divs in äußerem mitwachsen lassen

Hallo alle zusammen!

Es geht darum, dass ich zwei div's innerhalb eines anderem habe.

Das innere div hat eine feste Breite und eine min-height. Die beiden inneren div's haben ebenfalls eine min-height und feste Breite.

Das eine innere div soll links angeordnet sein und quasi als Navigation dienen. das zweite, rechte ist für den Inhalt.

Mein Problem nun ist, dass ich vorher nicht weiß wie hoch die inneren div's werden, und das äußere mitwachsen soll. Das nebeneinander Anordnen funktioniert perfekt mit float-Angaben. Allerdings nur solange, bis eines der inneren div's die Größe des äußeren übersteigt. Ist ja bei den float-Angaben eigentlich auch klar.

Wenn ich display: inline-block benutze ist es zwar auch nebeneinander, allerdings von der Hoehe so versetzt, dass der rechte Div auf der Höhe anfängt, wo der linke div seinen letzten Link der Navigation stehen hat. (Ich benutze unordered lists um mehrere Navigationselemente einzufügen.)

Hier auch noch mein CSS:

Code:
#content { /* this is the outer div */

	width: 1150px;
	min-height: 700px;
	
	background-color: rgb(255,255,255);
	
	margin: 200px auto;
	margin-bottom: 20px;
	padding: 10px;
}

.inhaltmitnavi {  /* this is the left inner div */

	width: 800px;
	
	min-height: 700px;
	
	float: left;
	
	background-color: rgb(255,255,255);
	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
  
	border-top: 3px solid black;
	border-right: 3px solid black;
	border-bottom: 3px solid black;
	
	padding-bottom: 10px;
}



.unternavi { /* this is the right inner div */

	width: 350px;
	min-height: 700px;
	
	float: left;
	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
  
	border: 3px solid black;
	
	font-family: impact;
	font-size:25px;
}
Der HTML-Code vom Prinzip her so:

Code:
<div id="content">

<div class="unternavi">
<ul>
<!-- Navieinträge -->
</ul>
</div>

<div class="inhaltmitnavi">

Inhalt

</div>

</div>

Geändert von Daispro (29.12.2014 um 15:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.12.2014, 21:04
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Höhen ganz weglassen. Vereinfachtes Beispiel:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
		font: 100%/1.5 sans-serif;
	}
	html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	.content {
		width: 1150px;
		margin: 0 auto;
		background: #ccc;
	}
	.widebox {
		width: 70%;
		float: left;
		background: #FF8080;
		border: 3px solid #f00;
	}
	.smallbox {
		width: 30%;
		float: left;
		background: #80FF80;
		border: 3px solid #004000;
	}
	.cf:after {
		content: " ";
		display: table;
		clear: both;
	}
	p {
		padding: 10px 15px;
	}
	</style>
</head>
<body>
	<div class="content cf">
		<div class="widebox">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus fugiat quo hic similique tenetur cumque explicabo laudantium nihil cupiditate necessitatibus!</p>
			<p>A molestiae sapiente deleniti quibusdam ratione, quia ex voluptas tenetur ipsum totam officiis esse nulla officia odio, dolorem suscipit quam!</p>
			<p>Minus quidem accusantium necessitatibus animi nemo placeat accusamus quisquam, quo dicta ipsa pariatur odit possimus cupiditate distinctio nulla officiis quasi?</p>
		</div>
		<div class="smallbox">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eaque nihil porro quisquam nisi, consectetur commodi praesentium consequuntur numquam at, illo tenetur laborum tempore quaerat ratione, reiciendis quae excepturi libero!</p>
			<p>Delectus accusamus quis, aliquid quaerat vitae similique ipsa blanditiis a officiis aperiam suscipit repellat possimus corporis odit obcaecati. Esse enim ab fuga voluptatibus modi non inventore magnam obcaecati facilis laudantium?</p>
		</div>
	</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
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
Script nur für Inhalt eines bestimmten DIVs Kipperdesign Javascript & Ajax 8 11.02.2013 14:03
DIVs wollen nicht in Container Echnotron CSS 4 22.02.2012 09:46
n Div's in eine Zeile Mustangore CSS 9 20.08.2009 16:19
Leidiges Thema: 2 Divs sollen mitwachsen ChOpSueY! CSS 3 14.12.2007 17:03
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32


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