Permalänk

Problem med div element

Hejsan!

Jag går El och Energi första året i gymnasiet, har webbutveckling och nyligen börjat med CSS och box modellen. Jag har testat lite med att göra några boxar med padding, border och margin. Jag försöker få två boxar att ställa sig bredvid varandra, Men jag har problem att få boxar på samma linje, varje gång jag gör en ny box med <div> elementet byter den rad. Jag försöker hitta ett effektivt sätt att åtgärda det utan att behöva massa "fulfixar".

Detta är min HTML kod (XHTML 1.0 strikt)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content = "Text/html ; charset=ISO=8859-1"/> <title>Huvudsida</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <div id="container1"> <h1>Box1</h1> </div> <div id="container2"> <h1>Box2</h1> </div> </div> </body> </html>

Och här är CSS koden

body{ padding: 0; background-color: grey; width: 1000px; height: 1200px; margin: 0 auto; } #container1{ border: 1px solid black; padding: 50px; margin: 50px; text-align: center; background-color: white; } #container2{ border: 1px solid black; padding: 50px; margin: 50px; text-align: center; background-color: white; }

Visa signatur

Intel Core i7 4770K 4.2GHz | Asus Geforce GTX 780 DCU II | A-Data 16GB 1600MHz | Asus Maximus VII Hero Z97 | NZXT H440 Svart/Röd | EVGA Supernova G2 750W | Eizo Foris FS2333 | be quiet! Dark Rock Pro 3 | Samsung SSD EVO 256GB | WD 2TB Red 7200RPM

Permalänk
Medlem
Skrivet av Fille1116:

Hejsan!

Jag går El och Energi första året i gymnasiet, har webbutveckling och nyligen börjat med CSS och box modellen. Jag har testat lite med att göra några boxar med padding, border och margin. Jag försöker få två boxar att ställa sig bredvid varandra, Men jag har problem att få boxar på samma linje, varje gång jag gör en ny box med <div> elementet byter den rad. Jag försöker hitta ett effektivt sätt att åtgärda det utan att behöva massa "fulfixar".

Detta är min HTML kod (XHTML 1.0 strikt)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content = "Text/html ; charset=ISO=8859-1"/> <title>Huvudsida</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <div id="container1"> <h1>Box1</h1> </div> <div id="container2"> <h1>Box2</h1> </div> </div> </body> </html>

Och här är CSS koden

body{ padding: 0; background-color: grey; width: 1000px; height: 1200px; margin: 0 auto; } #container1{ border: 1px solid black; padding: 50px; margin: 50px; text-align: center; background-color: white; } #container2{ border: 1px solid black; padding: 50px; margin: 50px; text-align: center; background-color: white; }

Dold text

Den vanligaste lösningen på alla dina box-bredvid-box-behov är att använda css-attributet float. Floats är till en början luriga och många (80+%) nya utvecklare använder dem fel då de inte fattar alla egenheter.

Med din HTML ovan kommer #container1, #container2 { float: left; } resultera i att boxarna #container1 samt #container2 ligger bredvid varandra till vänster.

edit: ironiskt nog fungerade inte mitt exempel heller, men ska göra det nu.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Menar du såhär, här har du exempel på kod också.

http://jsbin.com/ixuroz/1/

EDIT: Såg att någon svarat en minut innan mig, nåja du har ett litet kodexempel där i alla fall.

Permalänk

Jag testade float och den funkar!! Tack så mycket..!

Visa signatur

Intel Core i7 4770K 4.2GHz | Asus Geforce GTX 780 DCU II | A-Data 16GB 1600MHz | Asus Maximus VII Hero Z97 | NZXT H440 Svart/Röd | EVGA Supernova G2 750W | Eizo Foris FS2333 | be quiet! Dark Rock Pro 3 | Samsung SSD EVO 256GB | WD 2TB Red 7200RPM

Permalänk
Medlem
Skrivet av Teknocide:

Den vanligaste lösningen på alla dina box-bredvid-box-behov är att använda css-attributet float. Floats är till en början luriga och många (80+%) nya utvecklare använder dem fel då de inte fattar alla egenheter.

Fel på vilket sätt? Har inga invändningar, är bara intresserad.

Visa signatur
Permalänk
Medlem
Skrivet av Marie96:

Fel på vilket sätt? Har inga invändningar, är bara intresserad.

Ett klassiskt exempel är att block som bara innehåller flytande block kollapsar: http://jsbin.com/obakac/2/

Många förstår inte vad det är som händer och svarar med att sätta float på det yttre blocket också (http://jsbin.com/obakac/3/) med resultatet att bredden dras åt kring innehållet. Överdrivet användande av float är ett ganska vanligt tecken på att utvecklaren inte har 100 % koll.

En annan vanlig lösning på problemet är att man lägger en clearfix-klass på det kollapsande elementet i stil med http://jsbin.com/obakac/4/. Detta går emot grundtanken med CSS; att den grafiska representationen ska separeras från innehållet.

Jag brukar rekommendera att man istället använder overflow: hidden => http://jsbin.com/obakac/5/
Detta fungerar utan sideffekter och är enligt specifikation (http://www.w3.org/TR/CSS21/visuren.html#block-formatting).

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av Teknocide:

Ett klassiskt exempel är att block som bara innehåller flytande block kollapsar: http://jsbin.com/obakac/2/

Många förstår inte vad det är som händer och svarar med att sätta float på det yttre blocket också (http://jsbin.com/obakac/3/) med resultatet att bredden dras åt kring innehållet. Överdrivet användande av float är ett ganska vanligt tecken på att utvecklaren inte har 100 % koll.

En annan vanlig lösning på problemet är att man lägger en clearfix-klass på det kollapsande elementet i stil med http://jsbin.com/obakac/4/. Detta går emot grundtanken med CSS; att den grafiska representationen ska separeras från innehållet.

Jag brukar rekommendera att man istället använder overflow: hidden => http://jsbin.com/obakac/5/
Detta fungerar utan sideffekter och är enligt specifikation (http://www.w3.org/TR/CSS21/visuren.html#block-formatting).

Tack! Tycker det är lite halvknepigt att få float att funka bra..

Visa signatur