kaksi div boxia samalla rivillä

yung

Miten saadaan css:llä kaksi div boxia samalle rivillä, että nämä olisivat kiinni toisissaan (ja riippuvaisia selaimen leveydestä).

20% ja 80% pituuksista ei ole tässä vaiheessa hyötyä - ainakaan yksinään.

Eli mitä tyylejä nämä div boxit tarvitsevat, jotta ne olisivat kiinni toisissaan?

Alla on lähdekoodi, jota käytän tulevilla sivuillani (jotka eivät ole vielä netissä).


Moikka
Jotain tekstiä



Moikka
Lisää tekstiä

5

604

Äänestä

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Ridge

      Olisko näin..?

      #leftbox {
      width: 20%;
      float:left;
      background-color: #eee;
      }
      #rightbox {
      width: 80%;
      float:right;
      background-color: #ddd;
      }

      • weppimasteri_web

        Kaikki selaimet eivät näytä tuota oikein; jos yhteisleveydeksi määritellään 100%, saatetaan toinen boksi heittää ensimmäisen alle. Kannattaa määritellä yhteisleveydeksi 99%, jolloin pitäisi toimia kaikilla selaimilla.

        Eli näin:

        #leftbox {
        width: 20%;
        float:left;
        background-color: #eee;
        }
        #rightbox {
        width: 79%;
        float:left;
        background-color: #ddd;
        }


        Sitten laitat vaikka body-elementille saman taustavärin kuin rightboxille.

        Itse en juuri näistä toimivuus syistä käytä div-elementtejä. Kun selaimet näyttävät ne eri tavalla. Tarvitaan hyvin laaja tietämys, jotta saisi diveillä monimutkaiset sivut (rakenteeltaan) juuri niin kuin pitäisi. Siksipä itse tyydyn tableihin, sanoi muut mitä haluaa. Varsinkin nyt nopeiden internet-yhteyksien aikakautena niiden käyttö on mielestäni aivan OK.

      • yung
        weppimasteri_web kirjoitti:

        Kaikki selaimet eivät näytä tuota oikein; jos yhteisleveydeksi määritellään 100%, saatetaan toinen boksi heittää ensimmäisen alle. Kannattaa määritellä yhteisleveydeksi 99%, jolloin pitäisi toimia kaikilla selaimilla.

        Eli näin:

        #leftbox {
        width: 20%;
        float:left;
        background-color: #eee;
        }
        #rightbox {
        width: 79%;
        float:left;
        background-color: #ddd;
        }


        Sitten laitat vaikka body-elementille saman taustavärin kuin rightboxille.

        Itse en juuri näistä toimivuus syistä käytä div-elementtejä. Kun selaimet näyttävät ne eri tavalla. Tarvitaan hyvin laaja tietämys, jotta saisi diveillä monimutkaiset sivut (rakenteeltaan) juuri niin kuin pitäisi. Siksipä itse tyydyn tableihin, sanoi muut mitä haluaa. Varsinkin nyt nopeiden internet-yhteyksien aikakautena niiden käyttö on mielestäni aivan OK.

        Taidan itsekin harkita taulukkojen käyttöä. Kokeilin tuota koodia itse (tosin rightbox oli right floatilla) ja huomasin selkeän eron heti firefoxilla ja operalla. firefox heitti rightboxin leftin alle kun tämä laitettiin koko näytön kokoiseksi mutta opera laittoi sen sivulle (mutta selainta kaventaessa tällöin rightbox työntyi heti leftin alle).

      • Ridge
        weppimasteri_web kirjoitti:

        Kaikki selaimet eivät näytä tuota oikein; jos yhteisleveydeksi määritellään 100%, saatetaan toinen boksi heittää ensimmäisen alle. Kannattaa määritellä yhteisleveydeksi 99%, jolloin pitäisi toimia kaikilla selaimilla.

        Eli näin:

        #leftbox {
        width: 20%;
        float:left;
        background-color: #eee;
        }
        #rightbox {
        width: 79%;
        float:left;
        background-color: #ddd;
        }


        Sitten laitat vaikka body-elementille saman taustavärin kuin rightboxille.

        Itse en juuri näistä toimivuus syistä käytä div-elementtejä. Kun selaimet näyttävät ne eri tavalla. Tarvitaan hyvin laaja tietämys, jotta saisi diveillä monimutkaiset sivut (rakenteeltaan) juuri niin kuin pitäisi. Siksipä itse tyydyn tableihin, sanoi muut mitä haluaa. Varsinkin nyt nopeiden internet-yhteyksien aikakautena niiden käyttö on mielestäni aivan OK.

        Voihan sen näinkin laittaa, toimii bordereillakin ja leveys on 100%...

        #leftbox {
        width: 20%;
        float:left;
        background-color: #eee;
        border: 1px solid #000;
        }
        #rightbox {
        margin-left: 20%;
        background-color: #ddd;
        border: 1px solid #000;
        }

      • Teme__
        weppimasteri_web kirjoitti:

        Kaikki selaimet eivät näytä tuota oikein; jos yhteisleveydeksi määritellään 100%, saatetaan toinen boksi heittää ensimmäisen alle. Kannattaa määritellä yhteisleveydeksi 99%, jolloin pitäisi toimia kaikilla selaimilla.

        Eli näin:

        #leftbox {
        width: 20%;
        float:left;
        background-color: #eee;
        }
        #rightbox {
        width: 79%;
        float:left;
        background-color: #ddd;
        }


        Sitten laitat vaikka body-elementille saman taustavärin kuin rightboxille.

        Itse en juuri näistä toimivuus syistä käytä div-elementtejä. Kun selaimet näyttävät ne eri tavalla. Tarvitaan hyvin laaja tietämys, jotta saisi diveillä monimutkaiset sivut (rakenteeltaan) juuri niin kuin pitäisi. Siksipä itse tyydyn tableihin, sanoi muut mitä haluaa. Varsinkin nyt nopeiden internet-yhteyksien aikakautena niiden käyttö on mielestäni aivan OK.

        " Tarvitaan hyvin laaja tietämys, jotta saisi diveillä monimutkaiset sivut (rakenteeltaan) juuri niin kuin pitäisi."

        Ei se divien käyttö nyt niin monimutkaista ja vaikeaa ole. Omilla sivuillani (www.skitta.net) niitä käytän ja ei ole mitään ongelmaa

    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Takaisin ylös

    Luetuimmat keskustelut

    1. Sannalla tänään vuorossa The Daily Show

      Eli nyt mennään jo satiirin puolelle. Tuohan on vähän kuten Lindströmin ohjelma Suomessa.
      Maailman menoa
      56
      7835

    2. Tanskassa lain vaatimana Bovaer tappanut nautoja ja sairastuttanut

      Samaa myrkkyä myös Suomen lehmiin ollut tuloillaan, miten teidän tilalla? https://www.agriland.ie/farming-news/bovaer-m
      Maailman menoa
      67
      5931

    3. Ruotsalaisuuden Päivän virallinen liputuspäivä poistettava VÄLITTÖMÄSTI!

      Suomen valtion ja suomalaisuuden kannalta ei ole minkäänlaisia perusteita liputtaa virallisesti ruotsalaisuuden päivää,
      Maailman menoa
      67
      5426

    4. Täysi ryöpytys Sanna Marinille ulkomailla.

      https://www.iltalehti.fi/ulkomaat/a/f699d84f-fa53-4dba-8718-2c395017fc55 Sanna Marinin kirja saa todella tylyn vastaanot
      Maailman menoa
      51
      5323

    5. Minja Koskelan "istumista" kertovassa uutisessa ei sanottu persuista mitään

      eli jälleen kerran äärivasemmistolainen valehtelee, hän kun väittää että juuri persut ovat lähetelleet Koskelalle vähemm
      Maailman menoa
      108
      4642

    6. Pekka Visuri: "Suomen on aika irrottautua Ukrainan sodasta"

      Slava Ukraina-mölinät eivät enää auta. Ukraina on sotansa hävinnyt. Nyt tarvitaan poliittista selvänäköisyyttä, reaalipo
      Maailman menoa
      108
      2359

    7. Ei välimatka meitä erottanut

      Vaan välirikko ja väärinymmärrykset. Oikeastaan henkinen välimatka on meidän välillä pieni, näin uskon. Näen koko ajan e
      Ikävä
      4
      1261

    8. Maajussi-Villen morsioehdokas Maarit ei halunnut Villeä - Tämä totuus valkeni kuvauksissa!

      Ohhoh, tekikö Maarit mielestäsi oikean ratkaisun Villen suhteen? Maajussi-Ville on herättänyt voimakkaita tunteita puol
      Maajussille morsian
      5
      1203

    9. Kohta taas mesikämmeneen

      Onneksi kaupunki ostaa mesikämmenen, niin päästään taas tekemään rahaa
      Ähtäri
      38
      1056

    10. Olin ihan varma että sä olet se oikea

      Tunteet kuitenkin kuoli käyttäytymisesi johdosta. Hyvin tehty jos oli tarkoituskin. Oppia ikä kaikki ja jotkut ei opi ko
      Ikävä
      47
      1042
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt