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

Seite mit <div> auffüllen

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
 
Werbung:
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:
Werbung:
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

Positiion absolute ist wie meistens absolut unnötig.
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

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
 
vwewende doch margin mal richtig.
Code:
nav { width:220px;}
#content {margin-left:220px}
 
Werbung:
Zurück
Oben