✔ mit float:left und width:..% Seite ausfüllen?

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich wollte mit folgenden Text eine Seite oben ausfüllen, so das 0 Pixel Abstand bleiben recht und links, aber irgendwie klappt es nicht, wenn ich die beiden Prozentzahlen für width zusammenzähle einmal 83% und 17 % dann fällt auf der rechten Seite ein Kästchen runter und wenn ich 16 % nehme einmal dann ist es zu kurz, kann mir mal jemand kurz erzählen wieso das so ist, p.s. ich will das auch in verschiedenen Browsern nutzen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
<style type="text/css" media="screen">
<!--
body
{
margin: 0px;
padding: 0px;
}
#head
{
width: 100%;
border: 1px solid #000000;
text-align: center;
clear: both;
}
#boxtitel1, #boxtitel2
{
float: left;
margin: 0 0px 0 0px;
border: 1px solid #000000;
}
#boxtitel1
{
width: 83%;
}
#boxtitel2
{
width: 16%;
}
//--></style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout</title>
</head><body>
<div id="head">
<div id="boxtitel1"> 1</div>
<div id="boxtitel2"> 2</div>
 
</div>
</body>
</html>
 
Erkundige dich mal nach dem "Boxenmodell"
Dort wird beschrieben dass die Witdh angaben entweder die Breiten zwischen den 2 Rahmen oder die Breite des eigentlichen Inhaltes sind...

Dementsprechend ist die gesammte Box (div) etwas breiter als in width angegeben.
P.s. Im normalfall sollten 2 Texte dennoch eine Lücke dazwischen haben, sieht besser aus und ist besser lesbar.
 
Hi Feh :)

Also ... Bei mir funktioniert es mit den 17% ... ich hab allerdings im Moment nur IE 5.5 (bin auf der Arbeit) Ich schau aber heute Abend mal mit MoZ/FF/Opera/Avant ...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html lang="de">
<head>
<style type="text/css" media="screen">
<!--
body
{
margin: 0px;
padding: 0px;
}
#head
{
width: 100%;
border: 1px solid #000000;
text-align: center;
clear: both;

}
#boxtitel1, #boxtitel2
{
float: left;
margin: 0 0px 0 0px;
border: 1px solid #000000;
}
#boxtitel1
{
width: 83%;
}
#boxtitel2
{
width: 17%;
}
//--></style>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout</title>
</head><body>
<div id="head">
<div id="boxtitel1"> 1</div>
<div id="boxtitel2"> 2</div>
 
</div>
</body>
</html>
 
float:left und float:right

Hi feh,

habe dir heute morgen die CSS-Lösung für zwei nebeneinander / horizontal angeordnete DIVs per ZIP-File geschickt. Hierbei wird das linke DIV mit float:left und das rechte mit float:right definiert.

CSS-Code:
Code: 
#head_left /* boxtitel 1 */
{
float: left;
height: 90px;
width: 88%;
background-image: url(jpg/palmen.jpg);
}

#head_right /* boxtitel 2 */
{
float: right;
height: 90px;
width: 12%;
background-image: url(jpg/wueste.jpg);
}
HTML-Code:
Code: 
<div id="head_left"> ... </div>
<div id="head_right"> ... </div>
 
Hallo maik,

ja, vielen Dank nochmal. Ich glaube ich hätte den Fehler ewig weitergesucht und nichts gefunden.

:)
 
float:left und float:right

feh hat gesagt.:
ja, vielen Dank nochmal. Ich glaube ich hätte den Fehler ewig weitergesucht und nichts gefunden.

:)
Zum Vergrößern anklicken....

Kein Problem, und du weisst ja, vier Augen sehen immer mehr, als zwei... ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück