Volledige breedte gebruiken.

Door - SanThe - op 23-01-2016 17:08

2.085 views

Hallo php-ers,

Ik heb een div die 80% van de breedte in gebruik neemt.
Nu zit er in die div een andere div met float:left en width:100px.
Hoe kan ik nu de volledige breedte aangeven die ernaast nog over is?
Dus dat is die 80%-100px maar dat wordt niet geaccepteerd.
Wat gebruiken jullie in zo'n geval?

SanThe.

Jan de Laet

23-01-2016 17:58

Wil je niet 100%-100px? Want die 100% is de breedte van de 80% div.

.calculated-width {
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}?
Is wat ik zo snel op het net vond

Ozzie PHP

23-01-2016 18:03

SanThe, meet de breedte (in pixels)van die 80%. Bepaal vervolgens hoeveel % die 100px daarvan is. Dat percentage haal je van 100% af en wat over blijft is het percentage wat jij zoekt. Die 100px ga je dus ook in een percentage omzetten.

Dus stel de div die nu 80% is, is op jouw beeldscherm 1000px breed, dan zeg je dus 100px van 1000px is 10%. Die div van 100px wordt dus ipv 100px 10%. Het deel daarnaast is dus 100%-10% = 90%.

Alleen moet je dit nu dus even uitrekenen aan de hand van de echte breedte op jouw beeldscherm.

Succes!

- SanThe -

23-01-2016 18:08

@Ozzie: Het moet niet alleen op mijn beeldscherm werken maar overal.

@Jan de Laet: Nooit geweten, maar super bedankt.
Nu ik de termen ken heb ik het ook op w3schools gevonden.
Ik kan weer lekker verder.

SanThe.

Ozzie PHP

23-01-2016 18:23 gewijzigd op 23-01-2016 18:23

@SanThe: dat doet het dan ook omdat je het omzet naar percentages ipv vaste pixel-waarden ;-)

Thomas van den Heuvel

23-01-2016 21:28

Wellicht heb je hier iets aan:

Indien je in een block element naast een float een block element gebruikt, zal dit laatstgenoemde block element de resterende breedte innemen.

Voorbeeld:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body            { margin: 0; padding: 0; }
div.ref         { width: 80%; background-color: #ccff00; }
div.container   { width: 80%; background-color: #ff0000; }
div.float       { float: left; display: block; width: 100px; background-color: #ffcc00; }
div.block       { padding-left: 100px; background-color: #cc00ff; }
</style>
</head>

<body>
<div class="ref">referentie breedte (80%)</div>
<div class="container">
    <div class="float">float</div>
    <div class="block">block<br />sshnshsl<br /> sggeahs<br />lalla</div>
</div>
</body>
</html>

Getest in FF 43.0.4, IE 11, Chrome 47ish.

En als je een achtergrond wilt doortrekken kun je wellicht een achtergrond-afbeelding aan de omvattende container hangen ofzo.

Reageren

Inloggen om te reageren