Höhe der äußeren Box nach Höhe der inneren bestimmen

**atomwilli** · 28.05.2008 20:10

Moin,

ich hab ein kleines CSS-Problem: Ich habe zwei ineinander verschachtelte Boxen, die äußere ("Content") und recht dadrin eine mit drei Bildern.

Nun möchte ich erreichen, dass die äußere Box die innere immer umschließt, sprich auch mindestens so hoch ist wie die innere.

Das könnte man ja generell mit min-height lösen, aber die innere Box taucht nicht auf jeder Seite auf. Und dort, wo sie nicht erscheint, sieht's doof aus, wenn der Content-Bereich 800px hoch ist aber nur zwei Sätze drin stehen.

In der angehängten Grafik wird vielleicht deutlicher, was ich meine.

Im IE geht's übrigens prima, der interpretiert das anscheinend von alleine richtig. Nur im Firefox leider net.

Hat jemand eine Idee?

**Typochonder** · 28.05.2008 20:33

wenns "richtig" gemacht ist richtet sich die höhe des umschließende divs eigentlich immer nach dem inhalt. ob es in deinem fall der ie richtig macht halte ich für fraglich.

so und jetzt die übliche frage: wie siehts denn dein dazu gehörender quellcode und css aus?

**Typochonder** · 28.05.2008 20:40

ach da fällt mir ein. den bereich rechts lässt du doch bestimmt rechts floaten? dann musst du auch nach den beiden bereichen das floaten aufheben, z.b. mit dem footer.

**atomwilli** · 28.05.2008 20:52

Mhm, ich hab im Footer schon "clear:both" stehen, um das Floaten aufzuheben. Daran liegt's glaub ich nicht

Hier mal der Code:

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><title>
	Willkommen bei Immostar
</title><link rel="stylesheet" type="text/css" href="formate.css" /></head>
<body id="startseite">
    <form method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDY0NjIzMTE3D2QWAgIED2QWAgIBDxYCHglpbm5lcmh0bWwFKDxoMj5JaHJlIFN1Y2hlcmdlYm5pc3NlPC9oMj48aHIgLz48YnIgLz5kZHmt07XAEC8DznNXhxRNoGyvaZAc" />
</div>

	<div id="navigation">

		<a href="default.aspx"><img src="img/logo_immostar.jpg" alt="Immostar Logo"/></a>
		<ul>
			<li id="n1"><a href="default.aspx" title="Startseite">Startseite</a></li>
			<li id="n2"><a href="unternehmen.aspx" title="Über uns">Unternehmen</a></li>
			<li id="n3"><a href="regionensuche.aspx" title="Regionensuche">Regionensuche</a></li>
			<li id="n4"><a href="kontakt.aspx" title="Kontakt">Kontakt</a></li>
			<li id="spacer"></li>

			<li id="n5"><a href="login/admin.aspx" title="Login">Login</a></li>
		</ul>
	</div>          
	             
	         <div id="content">
                <div id="content-right">
                    <h2>TOP-ANGEBOTE</h2>
                    <br />
                    <img src="img/objekte/dummy3_top-angebote.jpg" alt="Top-Angebot 1"/>

                    <p class="angebotstext">
                    Wundersch&ouml;ne Villa in Blankense <br />Ab 1.790 Euro
                    <a href="default.aspx">[mehr]</a>
                    </p>
                    <img src="img/objekte/dummy4_top-angebote.jpg" alt="Top-Angebot 2"/>
                    <p class="angebotstext">
                    Wohnung mit Elbblick <br />Ab 890 Euro
                    <a href="default.aspx">[mehr]</a>

                    </p>
                    <img src="img/objekte/dummy3_top-angebote.jpg" alt="Top-Angebot 3"/>
                    <p class="angebotstext">
                    Großes Haus in Eimsbüttel <br />Ab 890 Euro
                    <a href="default.aspx">[mehr]</a>
                    </p>
                </div>
                    <h1>Willkommen bei der Nr.1</h1>

                    <p class="p_standard">Wir bieten Ihnen eine große Auswahl an traumhaften Immobilien. Ob als Miet- oder Kaufobjekt - Wir haben die passende Immobilie für Sie im Angebot. Nutzen Sie jetzt unsere komfortable Suchfunktion.</p>
                         <div id="suchmaske"><h2>Ihre Suchergebnisse</h2><hr /><br /></div>
                    <p class="p_standard">Nicht das passende gefunden? Vielleicht hilft Ihnen unsere Regionen-Suche.</p>
             </div>
              
              <div style="clear:both;width:940px;height:30px;margin:0 auto;padding-top:10px;text-align:center;font-family:Arial;font-size:.7em;color:#032465;">
    &copy; 2008 Immostar GmbH &amp; Co. KG - <a href="mailto:x.y@z.de?subject=Immostar%20Website-Mail">eMail</a> - <a href="impressum.aspx">Impressum</a>

</div>


</form>
    
</body>
</html>

**Typochonder** · 28.05.2008 21:41

ok ohne deine css-datei zu kennen schwierig. aber wenn ich content und den content-right links floaten lassen und mit dem footer cleare, dann sind beide gleich lang und content passt sich der höhe des rechten bereichs an.

**atomwilli** · 28.05.2008 21:57

Okay, dann geht's! Nur sitzt dann meine Seite auch links am Bildschirmrand, oder lässt sich das umgehen?

Hier nochmal die drei "Haupt-Divs" der Seite:

Code:

#navigation {
	background: #5182bd;
	height:70px;
	width: 940px;
	margin: 30px auto 0 auto;}

#content
{
	clear: both;
	background-color:#DEE2E7;
	width: 850px;
	margin: 0px auto;
	border-style:solid;
	border-color:white;
	border-width:15px;
	padding:50px 30px 30px 30px;}

#content-right
{
    width:230px;
    height:100%;
    float:right;
    background-color:White;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:0px;
    margin-left:70px;}

**max.m** · 28.05.2008 22:06

Du kannst noch ein Container-Div um alles legen und diesem ein

margin-left:auto;
margin-right:auto;

geben.

**Maekkez** · 29.05.2008 09:45

Bzw. weil die auto funktion nicht jeder Browser kann....

position: absolute;
left: 50%;

margin-left: -300px;
width: 600px;

Kommt auf die Gesamtbreite deines layouts an... margin-left: Breite/2 px;

zur Startseite vom TP

Thema: Höhe der äußeren Box nach Höhe der inneren bestimmen

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Höhe der äußeren Box nach Höhe der inneren bestimmen

...

Aktive Benutzer

Aktive Benutzer