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

615

    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ä.

    Luetuimmat keskustelut

    1. Kaipaamasi miehen nimi?

      Ja maakunta tai kaupunki?
      Ikävä
      43
      7515
    2. Oletko keskustellut kaivatustasi muiden

      Kanssa lähiaikoina? Jos, onko keskustelu ollut positiivista tai negatiivista? Vaikuttaako keskustelut mielipiteeseesi ka
      Ikävä
      54
      3723
    3. Ennen ei ollut persuja ja työttömyyttä, lääkäriinkin pääsi

      Ennen oli kaikilla töitä Kauppiaille kelpasi kun saivat voittoa Yritystukia ei ollut Lääkäriin pääsi kaikki haluklaat Nu
      Maailman menoa
      53
      3613
    4. Millaista läheisyyttä

      Toivoisit ikävästi kohteesi kanssa?
      Ikävä
      85
      3397
    5. Tulipalossa henkilövahinkoja, itsenäisyyspäivä alkoi huonosti, poliisi tiedottaa lisää

      Savonlinna https://www.como.fi/uutiset/savonlinna-henkilovahinkoja-tulipalossa-poliisi-tiedottaa-lisaa/
      Savonlinna
      53
      3361
    6. 51
      3044
    7. Kyllä on Vasemmistoliitosta Koskelan johdolla tullut todellinen ääripuolue

      se on niin tulipunainen kuin olla voi, ja selvästi haluaa jatkuvasti eripuraa, ja repiä kansaa kahtia. Siinä on jo vuod
      Maailman menoa
      36
      2842
    8. Antifasismi - mitä se on?

      Se on äärivasemmistolaista anarkistista toimintaa joka käyttää fasisminvastaisuutta keppihevosena oikeuttaakseen toimint
      Maailman menoa
      30
      2494
    9. IL- KELA:n pääjohtaja, lääke- ja oikeustieteen tohtori Lasse Lehtonen sekavassa tilassa Brysselissä!

      "Iltalehden tietojen mukaan Lehtosen käytös Brysselin lentokentällä on herättänyt huomiota, ja hänen olemuksensa on tulk
      Maailman menoa
      197
      1958
    10. Heräsin taas ikävään

      Ja aivan valtavaan haluun. Tahdon sinua R. ❤️
      Ikävä
      47
      1571
    Aihe