Fix szélességű div melletti div kitöltse a maradék helyet
Sziasztok, hozzátok fordulnék egy problémával.
Ami az lenne, hogy van bal oldalt egy fix szélességű div és mellette egy másik aminek a szélessége akkora kellene hogy legyen, hogy a maradék helyet kitöltse (tehát a szélessége: vízszintes felbontás-fix szélességű div), persze ha a felbontást állítják akkor is.
Az első gondolatom az volt, hogy egymás mellé floatolom a két divet és mivel a div alapesetben felveszi a szülő elem szélességét, ezért a jobb oldali div kitölti a böngészőt. De nem így történt mert a float miatt a szélessége csak akkora, mint a benne lévő szöveg.
Utána arra gondoltam, hogy megadom neki a width: 100%-ot, de ezzel meg az a baj, hogy a bal oldali divet a floatolása miatt nem veszi figyelembe, hanem a teljes böngésző szélességéhez viszonyítva számolja ki a 100%-ot nem pedig a maradék helyhez, így mivel nem fér el vele egy sorba, ezért a bal oldali alá teszi.
Hogyan lehetne ezt megoldani?
Bedobom a kódot is:
■ Ami az lenne, hogy van bal oldalt egy fix szélességű div és mellette egy másik aminek a szélessége akkora kellene hogy legyen, hogy a maradék helyet kitöltse (tehát a szélessége: vízszintes felbontás-fix szélességű div), persze ha a felbontást állítják akkor is.
Az első gondolatom az volt, hogy egymás mellé floatolom a két divet és mivel a div alapesetben felveszi a szülő elem szélességét, ezért a jobb oldali div kitölti a böngészőt. De nem így történt mert a float miatt a szélessége csak akkora, mint a benne lévő szöveg.
Utána arra gondoltam, hogy megadom neki a width: 100%-ot, de ezzel meg az a baj, hogy a bal oldali divet a floatolása miatt nem veszi figyelembe, hanem a teljes böngésző szélességéhez viszonyítva számolja ki a 100%-ot nem pedig a maradék helyhez, így mivel nem fér el vele egy sorba, ezért a bal oldali alá teszi.
Hogyan lehetne ezt megoldani?
Bedobom a kódot is:
<!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-2" />
</head>
<body style="margin: 0px; padding: 0px">
<div style="background-color: red; width: 300px; float: left;">
dasd asdasd as dasd asdas das das dsdfsdfsdfsdfsdf sdasdasd asdasd as dasd asdas das das dsdfsdfsdfsdfsdf
sdasdasd asdasd as dasd asdas das das dsdfsdfsdas d
</div>
<div style="background-color: green; float: left;">aaaaa aaaaaaaa aaaaaaaa aaaaaaa</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body style="margin: 0px; padding: 0px">
<div style="background-color: red; width: 300px; float: left;">
dasd asdasd as dasd asdas das das dsdfsdfsdfsdfsdf sdasdasd asdasd as dasd asdas das das dsdfsdfsdfsdfsdf
sdasdasd asdasd as dasd asdas das das dsdfsdfsdas d
</div>
<div style="background-color: green; float: left;">aaaaa aaaaaaaa aaaaaaaa aaaaaaa</div>
</body>
</html>
második div, no float..
a második div-ről (a zöld színü) vedd le a float tulajdonságot..
Így most a zöld mindig kitölti a teret.
Nekem úgy ment. Néztem ie-ben és ff-ben is..
Így jó, de akkor nem értek valamit
Röviden: miért nem kell floatolni a jobb oldalit, ha nem adok meg neki szélességet?
(Mondjuk eddig mindig fix szélességű divet használtam, ezért ez eddig fel sem tűnt...)
Köszi a segítséget!
ugyanaz
éstényleg
két lehetőség
ha viszont ezt el akarjátok kerülni, akkor a második (zöld) divnek adjatok meg akkora bal margót, mint amekkora az első (piros) szélessége: