Breedte van floating element wordt variabel

Door Guido - op 30-01-2017 10:40

2.083 views

Goedemorgen!

Ik heb een #container die een maximale breedte mag hebben en links uitgelijnd wordt.

Nu merk ik dat de breedte variabel wordt, afhankelijk van de content die erin staat... vervelend.

Ik gebruik momenteel dit:


#container {max-width:1000px; float:left;}

Een extra width invoegen helpt:


#container {width:100%; max-width:1000px; float:left;}

De float weghalen werkt ook:


#container {max-width:1000px;}

Ik vraag me af wat de veiligste manier is om dit op te lossen?

Mvg, Guido

Adoptive Solution

30-01-2017 14:04

Mooi. Je hebt een oplossing gevonden voor een vervelend probleem.

Wat heeft dat met veilig te maken?

Guido -

30-01-2017 14:39

Laat ik het anders formuleren: hoe zou jij het oplossen?
Of: wat is de beste manier om het op te lossen?

Is width én max-width in dezelfde CSS-regel een gebruikelijke manier om zoiets op te lossen?

Guido

Adoptive Solution

30-01-2017 15:35

Als ik een float wil, zodat bijvoorbeeld tekst erom heen loopt, de eerste oplossing.

Waarschijnlijk wel minder breed.

Wil ik dat niet, de derde oplossing.

De tweede oplossing is overbodig, omdat bijvoorbeeld een div al 100% breed is en alleen begrensd wordt door max-width.

Guido -

30-01-2017 16:23 gewijzigd op 30-01-2017 16:24

Het betreft de container van een website, die een div.sidebar (float:left) en een div.content (float:right) omsluit.
Zonder float is de container dus 1000px breed (= max-width) maar met float is container ineens een stuk minder breed.

Zou het te maken kunnen hebben met het uitlijnen van de 2 divs?

Guido

Ozzie PHP

30-01-2017 17:10

Gewoon deze gebruiken:

#container {max-width:1000px;}

Die float heb je in jouw geval niet nodig.

Guido -

01-03-2017 23:32

Hallo Ozzie,

Ik gebruik nu:


#container {max-width:1000px; position:relative;}
#container:after {content:''; display:block; height:0; clear:both;}

Dus inclusief clearfix. Zonder clearfix en met een variabele hoogte wordt het element niet goed getoond.

Guido

Reageren

Inloggen om te reageren