Reflektert dagbok – multimediedesign

CSS float – clear (CSS Position)

Jeg fortsatte å eksperimentere med FLOAT og CLEAR under CSS Position. Her har det gule elementet blitt satt til float, right:

Det gule står fortsatt med float, right, men det blå har fått økt bredde fra 200 px til 712 px (som er størrelsen på kontaineren, her usynlig fordi jeg ikke har laget noen border rundt):

Fortsatt samme som forrige bilde, men har i tillegg satt container-elementet (boksen rundt som ikke synes her) til clear, both.
Da legger den brede blå seg pent under den gule:

Her har jeg tilbakestilt størrelsen på det blå til 200px og er tilbake til utgangspunktet. Men har satt både gult (a) element og rosa (b) element til float, right:

Samme som ovenfor, men her er alle tre elementene satt til float, right:

På forrige bilde flyter alle tre elementene ovenfor eller utenfor kontaineren, og dermed kollapser denne. Dette er ikke synlig her, men for å hindre dette kan man sette kontaineren selv til clear. Her har jeg satt kontaineren til clear, left. Fordi jeg ikke har border på kontaineren må det vises i DreamWeaver: (Den stiplede linjen er kontaineren,og den er igjen tilbake rundt elementene).

En annen måte å unngå at kontaineren kollapser er å lage line break og en ny css-rule .clear som legger til et usynlig element i kontaineren. Dette har jeg ikke testet så mye ut denne gang, men skal prøve det senere.

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s