onsdag den 25. juli 2012

Få en div til højre uden float:right


Engang i mellem kan man godt have brug for at der skal ligge rigtigt meget til højre, men ikke specielt meget til venstre.
Grunden til jeg siger dette på denne måde er at normalt så hvis du har indhold nok til venstre er det ikke et problem at bruge float:right, fordi indholdet sørger for at footer og andre elementer ikke bliver et problem med float:right.

Jeg står selv i en situation hvor det meste indhold skal stå til højre og derfor stadig skal flytte andre elementer såsom min footer etc.
Så efter lang tids arbejde på problemet fandt jeg en løsning, som gør det men kan være lidt mere omstændig en man lige tror, men desværre er det nødvendigt hvis du vil have den skal være relativ i forhold til dine andre elementer og ikke ligge som et lag "ovenpå" ligesom float:right gør.

Der er så faktisk en løsning som kan ses herunder:
<div style="text-align: right; background-color: gold;">
        <div style="display: inline-block;width: 250px; height: 60px; background-color: red; text-align:left;">LOGO TO THE RIGHT
        </div>
</div>

Fordi din <div> nummer to er display:inline-block så reagerer den på din text-align:right.
Derved kan du få en div som er aligned right uden at være float:right, og fordelen er at du derved har et element som interagerer med resten af dine andre elementer, hvorimod float:right gør at den ligesom står "udenfor" og ikke flytter tekst og andre elementer når den vokser.
Det er problematisk og derfor jeg viser denne løsning.

Ingen kommentarer:

Send en kommentar

Kan du lide mit indlæg, har en kommentar, forslag eller andet på hjerte så skriv venligst