Sæt en minimumbredde på

Siden er opdateret 23.1.2008

I Mozilla og Opera er det fuldt tilstrækkeligt, at indsætte attributten min-width og tildele en passende størrelse til denne. Dette kan gøres i et stylesheet eller med inline-css.

<div style="width: 60%; min-width: 300px;">Noget tekst</div>

Denne boks er sat til en fast bredde på 60%.

Denne boks er sat til 60% bredde med minimum sat til 300px.

Denne boks er sat til en fast bredde på 300px.

Desværre forstår Internet Explorer ældre end 7 ikke min-width, selv om det er en del af css2-standarden. Derfor har jeg lavet et lille 'hack', der virker som ønsket:

<!--[if lt IE 7]>

<style type="text/css" media="screen">

#minw {

	width:60%;

	width:expression(document.body.clientWidth < 685 ? "300px" : "60%");

}

</style>

<![endif]-->

Dette skal indsættes i sidens head og så svares til denne kode i html:

<div id="minw">Noget tekst</div>

Det fungerer på den måde, at scriptet undersøger browservinduets bredde. Er denne mindre end 685 px, sættes boksens bredde til 300px. Ellers begrænses bredden til 60% af den til rådighed værende bredde.

For at lave din egen begrænsning, skal du finde ud af ved hvilken bredde browservindue (685) boksen får den ønskede minimumbredde (300px) ved den ønskede procent (60%).

Man kan eventuelt øge 685 til 800, øge 300px til 800px og udskifte 60% med auto. Så vil du kunne bruge til at definere hele sidebredden til ikke at bliver mindre end 800 px, hvis browservinduet bliver smallere end 800px - men hvis browservinduet bliver bredere end de 800px, vil siden automatisk tilpasse sig denne større bredde.

Du vil så se, at et smallere browservindue end den definerede minimumsidebredde selvfølgelig udløser en vandret scrollbar.

Sæt en minimumbredde på

Valid XHTML og CSS / Copyright © Erik Ginnerskov maj 2005