✔ Bei nebeneinanderliegenden divs einmal Pixel und einmal Prozent möglich?

Status
Nicht offen für weitere Antworten.
M

mofl

Grünschnabel
Hallo,

ich bin relativ neu in dem css-Gebiet. Bis jetzt konnte ich mir selbst ganz gut helfen, aber jetzt verstehe ich was nicht mehr:

Ich will zwei divs nebeneinander haben, wobei das linke eine feste Größenangabe hat (weil es ein Bild/Logo ist), und das rechte den Rest des Browser-fensters ausfüllen soll (welches die Farbe des Bildes "weitermalt").

Jedesmal wenn ich nun width=100% für den zweiten div angebe, interpretiert er das als 100% vom gesamten Fenster, nicht als 100% vom Rest des Fensters (weil ja rechts schon ein Bild ist). Ich habe es auch schon in ein anderes Div eingebettet, aber leider ohne Erfolg.

Vielleicht kann mir ja jemand helfen...
mofl
 
HTML: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#wrapper {
    overflow:hidden;
    background:#eee;
}
#left {    
    float:left;
    width:300px;
    height:300px;
    background:#eee;
}
</style>
</head>

<body>

<div id="wrapper">

    <div id="left">Logo</div>

    Hier kann deine Farbe weiter laufen.
    
</div>

</body>
</html>


Du kannst doch einfach dem umschließenden div die Farbe zuweisen?


Gruß
 
In diesem zweispaltigen Layout nimmt die rechte Spalte den in der Horizontalen zur Verfügung stehenden Platz ein:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#leftCol {
width: 200px;
height: 100px;
background: #e1e1e1;
float: left;
}

div#rightCol {
margin-left: 200px;
background: #f5f5f5;
}

div.clear {
clear: left;
}
-->
</style>

</head>
<body>

<div id="leftCol">leftCol</div>

<div id="rightCol">rightCol</div>

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

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück