div der grösse des übergeordneten divs anpassen

Dragooni

ja ich schon wieder...

Wenn ich zwei div's nebeneinander in einem anderen div habe, kann ich ja mit "*" festlegen, dass sich die höhe dem inhalt anpasst.
Wie mache ich es jetzt, dass das div daneben gleichgross ist?
ich dachte mal das müsste mit "100%" gehen dass es sich der maximalen grösse des übergeordneten div's anpasst, aber geht ned...

Irgendwer vorschläge?
merci

hier Quelltext:
css:

Zitat

#over {
background-color: blue;
padding: 5px;
float: left;
}

#ab {
background-color: green;
width: 50px;
height: 150px;
float: left;
}

#ba {
background-color: yellow;
width: 50px;
height: "100%";
float: left;
}

Alles anzeigen

html:

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <meta http-equiv="content-language" content="de" />
         <title>Testi</title>
         <link rel="stylesheet" href="probe.css" type="text/css" />
</head>
<body>
	<div id="over">
	<div id="ab">



text 1</p>
	</div>
	<div id="ba">



text 2</p>
	</div>
	</div>
</body>
</html>

Alles anzeigen

K.Y.L.T.

ähm, liegt das nur in deiner Veranschaulichung, oder willst du wirklich für den ersten div nen festen Pixelwert haben? - Dann wäre es aber wohl zu einfach

Also wenn, dann müssen ja beide 100% gesetzt werden.

Ansonsten lies mal hier http://xhtmlforum.de/32115-netscape…-spaltigem.html
das müsste dir helfen

Dragooni

hmmm okey, es funktioniert, wenn ich dem übergeordneten div eine feste grösse gebe.
Aber kann ich es jetzt auch machen, dass das übergeordnete div die höhe annimmt, welche das div mit text darunter hat?
Ich meine dass sich das ganze anpasst, je mehr text es hat?
weil sonst ist es ein wenig mühsam

sejuma

Der übergeordnete div nimmt die Höhe der untergeordneten an, sofern dessen Höhe nicht durch einen height-Wert begrenzt wird.
begrenzt wird.

Bei variablem Text zweier div's kannst du mit Faux columns arbeiten.

Eine weitere Möglichkeit bietet dieser Code:
CSS

Code

body
{margin:0;
padding:0;}




#wrapper
{
width:900px;
margin:0 50px;
background: #CAFF70;
border-right: 210px solid #98F5FF;
}


#innenbox
{
margin-left: -50px;
margin-right: -160px;
padding: 5px;


}


#rechtsbox
{
position: relative;
left:5px;
float: right;
width: 200px;
margin-right: -200px;
}


#contentbox
{
width:px;
height: 1%;
margin-left:50px;


}


.clear
{
clear:both;
}

Alles anzeigen

HTML

Code

<body><h1 style="text-align:center;">header</h1>
<div id="wrapper">
        <div id="innenbox">




                <div id="rechtsbox">


erste Zeile Rechtsbox</p>


zweite Zeile Rechtsbox</p>


dritte Zeile Rechtsbox</p></div>


                <div id="contentbox">


erste Zeile Contentbox</p>


zweite zeile Contentbox</p>




erste Zeile Contentbox</p>


zweite zeile Contentbox</p>


                </div>


                <div class="clear"></div>


</div>
</body>

Alles anzeigen

Dragooni

Ich habe das ganze jetzt mal anders gelöst...
einfach dem übergeordneten div die farbe des rechten div's zugeordnet.
Jetzt muss man einfach schauen, dass das linke div immer länger ist *gg*
(wobei das wohl kaum ein problem sein wird)

Aber zu deinem Vorschlag sejuma, da habe ich noch nicht gerade den durchblick
Denn was ist zum beispiel das "clear:both;"?

sejuma

Probier's nochmal damit:

Code

body
{margin:0;
padding:0;}




#wrapper
{
width:700px;
margin:0 50px;
background: #CAFF70;
border-right: 210px solid #98F5FF;
}


#innenbox
{
margin-left: -50px;
padding: 5px;


}


#rechtsbox
{
position: relative;
left:10px;
float: right;
width: 200px;
margin-right: -200px;
}


#contentbox
{


height: 1%;
margin-left:50px;


}


.clear
{
clear:both;
}
</style>


</head>
<body><h1 style="text-align:center;">header</h1>
<div id="wrapper">
        <div id="innenbox">




                <div id="rechtsbox">


erste Zeile Rechtsbox</p>


zweite Zeile Rechtsbox</p>


dritte Zeile Rechtsbox</p></div>


                <div id="contentbox">


erste Zeile Contentbox</p>


zweite zeile Contentbox</p>




erste Zeile Contentbox</p>


zweite zeile Contentbox</p>


                </div>


                <div class="clear"></div>


</div>

Alles anzeigen

Wichtig ist, dass die Seite einen doctype hat.

Das clear brauchst du, wenn du unter den div's z.B. noch einen footer anbringen möchtest, da vorher mit float gearbeitet wurde. http://css-technik.de/css-examples/219_9/

Dragooni

danke, ich werds mir nochmals in ruhe angucken

Dragooni

lol, über ein Jahr später und ich finde mit dem gleichen Problem meinen eigenen Post xD
Page komplett überarbeitet, aber wieder mal zum gleichen Problem gefunden...
Das letzt mal konnte ich das Problem umgehen, wie ich gerade im Quelltext der alten Datei gemerkt habe...

-----------------------------------------------------------

Fast gleiches Problem...
ein div für den Inhalt wird je nach Text grösser oder kleiner.
in diesem div hats 2 divs auf der gleichen ebene, die halt so gross sein sollen wie das übergeordnete div...

Code

<div id="content">
  <div id="txt">
    blabla
  </div>
  <div id="border">
  </div>
</div>

Oder was natürlich auch toll wäre, ist, wenn man einen rahmen per css erstellen könnte, der aus einer grafik aufgebaut ist, das würde mein problem auch lösen...

Wer eine idee?
Ich danke jetzt schon

Dragooni

ou... falscher Alarm xD
konnte mein problem mit dem Rahmen lösen...
Habe bei google nichts gefunden, aber dann fiels mir was ein, was geht xD
Natürlich die Grafik im div als Hintergrund-grafik einfügen...
und im css entsprechend formatieren xD

Ich schreibe die Lösung mal hier rein, vielleicht kanns ja jemand brauchen oder ich selbst stosse wieder drüber xD

css:

Code

#content {
  background-image: url(media/images/border.png);
  background-repeat: repeat-y;
  background-position: right;
  }

und html:

Code

<div id="content">
  blabla
</div>

dann brauchts die anderen zwei divs auch ned mehr...

Grüsse und gut Nacht

Tags