div til højre

Tags:    css html

<< < 123 > >>
Jeg vil gerne have min div skal være right-aligned, men uden den floater.
Det er fordi der skal ikke være specielt meget tekst til venstre for den, men en masse kasser og forskelligt i en kasse til højre og float:right gør jo at den er "udenfor" den almindelige dom således den ikke flytter min footer-div og andre elementer på siden.



23 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Dan
Se her: http://postimage.org/image/k3gwxnpqd/

Som du kan se så er der noget tekst til venstre i (den grønne) som skal have en relativ størrelse således at når du gør dit browservindue større eller mindre så tilpasser den sig således du ikke får nogen scrollbar på siden.

Den lyserøde til højre er den der oftest vil fylde mest og derfor skal være "indholdet" på denne side og det er derfor vigtigt at den kan flytte mit andet indhold rundt på siden (såsom footer og andre elementer som ikke er float).
Denne lyserøde kasse vil have en fast defineret bredde på ca. 300px og så vil der altid stå information i denne kasse og så vil den grønne kasse "bare" udfylde resten med den tekst der nu er på siden.

Rasmus
Den skal tilpasse sig til den resterende bredde på browseren.
Hvis den lyserøde har en bredde på 300px, og browseren vises på 1024 skærmbredde - så vises teksten på dette, og når du så trækker vinduet mindre eller vises på en mindre skærmstørrelse skal den lyserøde forblive 300px, men den grønne krympe fordi der så er mindre plads til denne.
Altså benytte sig af min-width og max-width.
Mit problem er "bare" at disse skal sættes således at max-width bliver "det resterende" som er tilbage fra skærmbredden minus størrelsen på den lyserøde.

Lidt ligesom hvis den lyserøde er indholdet og har den faste bredde på 300px så skal den grønnes bredde være resten af bredden altid, og så vokse i højden på linierne længere nede hvis det er nødvendigt.



Dan
Tak jeg vil se om jeg kan få det til at fungere når der også er noget indhold nedenunder den pink div :)

http://jsfiddle.net/vaff/GhYMD/3/embedded/result/

Efter test kan jeg desværre kun konstatere at højre kolonne ikke flytter nogle elementer på siden.
Min footer bliver ved med at ligge "indenunder" det til højre.

HAR SELV FUNDET LØSNINGEN

Det virker fordi "left-part" har display:inline-block og så er "right-part" lagt indeni left-part og dermed udvider dens indhold fordi den får det fra ancestor - div'en udenom.

Det er rigtigt smart og vil jeg bruge rigtigt meget i mange andre tilfælde.

Se eksempelet her: http://jsfiddle.net/ceT2j/1/

Fold kodeboks ind/udCSS kode 


Fold kodeboks ind/udHTML kode 




Indlæg senest redigeret d. 05.08.2012 23:15 af Bruger #17215
what? Det var da en mystisk måde, at lave det på.



Det er et "clear float"-hack... :) Fungere på samme måde som overflow: hidden;

http://www.quirksmode.org/css/clearing.html

Jeg ville dog nok bruge overflow: hidden, da det trods alt er en css1 attribut.



@Michael ja ... også det jeg skulle til, at sige. jeg ville hellere have lavet et såkaldt "clearfix". Med fallback:

Fold kodeboks ind/udCSS kode 





Indlæg senest redigeret d. 06.08.2012 08:39 af Bruger #17081
Det er et "clear float"-hack... :) Fungere på samme måde som overflow: hidden;

http://www.quirksmode.org/css/clearing.html

Jeg ville dog nok bruge overflow: hidden, da det trods alt er en css1 attribut.

overflow: hidden?
Forstår ikke helt hvad eller hvor jeg skulle bruge den?

Efter at have fulgt dit link og eksempeler så kommer jeg til nedenstående resultat

clear: both
http://jsfiddle.net/ceT2j/7/

overflow: auto; & width: 100%
http://jsfiddle.net/ceT2j/8/
og det ser desværre ikke helt korrekt ud.

Efter at have prøvet til på min egen løsning giver det stadig problemer da højre skal have en fast bredde på 300px og alt til venstre skal udfylde det "tomrum", og wrappe rundt om det. Dermed kan jeg ikke angive det i procent eller størrelser da venstre side skal være dynamisk størrelse.
Desværre så snart at jeg begynder at fylde en masse data i så får jeg problemer med at right-div rykker ned i dit eksempel.

Fold kodeboks ind/udCSS kode 


Fold kodeboks ind/udHTML kode 


Og ender med dette: http://jsfiddle.net/cae6m/



Indlæg senest redigeret d. 06.08.2012 18:02 af Bruger #17215
Fold kodeboks ind/udKode 

http://jsfiddle.net/3hkvg/

Med den kode du har vist, kan det ikke gøres på andre måder, og det er ikke sundt for seo. :)



Indlæg senest redigeret d. 06.08.2012 21:16 af Bruger #10216
Fold kodeboks ind/udKode 

http://jsfiddle.net/3hkvg/

Med den kode du har vist, kan det ikke gøres på andre måder, og det er ikke sundt for seo. :)

Hvordan skader det SEO? :)
Og kan man ikke få højre-side til altid at fylde hele den ene side for height: 100% gør ikke at den altid fylder hele den ene side for at det til højre får en lige margen og kant?



Prøv at beskrive med een sætning, hvad du vil have. :)

Endvidere hvis du vil have 100% height, er der disse metoder:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/
http://www.savio.no/examples/fluid-css-layout-with-faux-columns-1.asp

mfl.

Mht. seo, så giver tidligere løsning, som jeg beskrev, kun problemer hvis du f.eks. indlæser sidebar indhold i det element der ligger før din brødtekst - altså hvis brødteksten kommer sidst i din htmlstruktur. Jo længere nede din brødtekst findes i HTMLen, des mere triviel finder søgemaskinerne dine side, og derved kommer der et dårligere resultat ud af gennemgangen for dit site.



Indlæg senest redigeret d. 06.08.2012 23:30 af Bruger #10216
<< < 123 > >>
t