• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite mit <div> auffüllen

Samplatiner

Samplatiner

Neues Mitglied
Hallo

Ich will eine recht schlichte Seite erstellen, aufgeteilt in 2 <div>, links Navigation, rechts Inhalt.

Die Navigation soll hierbei eine feste breite (220px) haben, der Inhalt soll die Seite vollends auffüllen, im Grunde
<div style="width:220px;"></div>
<div style="width: 100%-220px;"</div>
So funktioniert das natürlich nicht. Könnt ihr mir sagen, wie das richtig geht, die Seite mit dem zweiten <div> vollends aufzufüllen?

Vielen Dank

Daniel
 
Ich habe es jetzt nach ner gefühlten Ewigkeit ausprobieren doch hinbekommen:
Das rechte <div> wurde per margin-left einfach um die 200px vom Rand weggeschoben, jetzt passt es.
Dafür muss aber Position:absolute sein

Edit:
Es funktioniert doch nicht.

Was hast du mit "Höhe setzen" gemeint? Floats habe ich bereits verwendet. Aber auch mit einem Float bekomme ich es nicht hin, meiner iframe zu sagen, dass sie "100% vom Rest der Seitenbreite" ausfüllen soll. So wie es jetzt ist steht das iframe 230px über den rechten Rand hinaus

Hier ein mein Code als Minimalbeispiel:

<!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" xml:lang="en" lang="en">
<head>
<title>Titel</title>
<style type="text/css">
body, html {
height: 99%;
margin: 0;
padding: 0;
margin-left: 0px;
margin-right: 0px;
}

.div_nav {
float: left;
width: 220px;
height: 99%;
padding: 0;
margin: 0;
margin-left: 0px;
margin-right: 0px;
position: absolute;
}
.div_content {
float: left;
height: 99%;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
margin-right: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<div class="div_nav">
<h1>Navigation:</h1>
</div>
<hr style="width:1px; height:98%; margin-left:225px; float:left">
<div class="div_content">
<iframe style="margin-left: 230px;" src="irgend_eine_page.htm" width="100%" height="100%" scrolling="yes" name="main" frameborder="0"> </iframe>
</div>
</body>
</html>
 
Zuletzt bearbeitet:
Samplatiner schrieb:
Ich habe es jetzt nach ner gefühlten Ewigkeit ausprobieren doch hinbekommen:
Das rechte <div> wurde per margin-left einfach um die 200px vom Rand weggeschoben, jetzt passt es.
Dafür muss aber Position:absolute sein
Zum Vergrößern anklicken....

Positiion absolute ist wie meistens absolut unnötig.
Samplatiner schrieb:
Was hast du mit "Höhe setzen" gemeint? Floats habe ich bereits verwendet. Aber auch mit einem Float bekomme ich es nicht hin, meiner iframe zu sagen, dass sie "100% vom Rest der Seitenbreite" ausfüllen soll. So wie es jetzt ist steht das iframe 230px über den rechten Rand hinaus
Zum Vergrößern anklicken....

Was erwartest du denn wenn du deinem iframe ein margin-left von 230px gibst.

Ich habe deinen Code mal ein bisschen angepasst:

Code: 
<!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" xml:lang="en" lang="en">
<head>
<title>Titel</title>
<style type="text/css">
body, html {
height: 99%;
margin: 0;
padding: 0;
}

.div_nav {
float: left;
width: 220px;
height: 99%;
padding: 0;
margin: 0;
}
.div_content {
height: 99%;
padding: 0;
margin-right: 0px;
margin-left: 230px;
}
</style>
</head>
<body>
<div class="div_nav">
<h1>Navigation:</h1>
</div>
<hr style="width:1px; height:98%; float:left">
<div class="div_content">
<iframe  src="" width="100%" height="100%" scrolling="yes" name="main" frameborder="1"> </iframe>
</div>
</body>
</html>

Ich würde allerdings den senkrechten Strich mit einem border lösen und den HTML5 Dotype verwenden damit man diese divs entsorgen kann.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben