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

547

    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. Hengenvaaralliset kiihdytysajot päättyivät karmealla tavalla, kilpailija kuoli

      Onnettomuudesta on aloitettu selvitys. Tapahtuma keskeytettiin onnettomuuteen. Tapahtumaa tutkitaan paikan päällä yhtei
      Kauhava
      195
      6808
    2. Ootko rakastunut?

      Kerro pois nyt
      Ikävä
      159
      2006
    3. Onhan sulla nainen parempi mieli

      Nyt? Ainakin toivon niin.
      Ikävä
      113
      1668
    4. Ujosteletko tosissaan vai mitä oikeen

      Himmailet???? Mitä pelkäät?????
      Ikävä
      51
      1370
    5. Suureksi onneksesi on myönnettävä

      Että olen nyt sitten mennyt rakastumaan sinuun. Ei tässä mitään, olen kärsivällinen ❤️
      Ikävä
      55
      1218
    6. Möykkähulluus vaati kuolonuhrin

      Nuori elämä menettiin täysin turhaan tällä järjettömyydellä! Toivottavasti näitä ei enää koskaan nähdä Kauhavalla! 😢
      Kauhava
      48
      1074
    7. Älä mies pidä mua pettäjänä

      En petä ketään. Älä mies ajattele niin. Anteeksi että ihastuin suhun varattuna. Pettänyt en ole koskaan ketään vaikka hu
      Ikävä
      99
      1045
    8. Reeniähororeeniä

      Helvetillisen vaikeaa työskennellä hoitajana,kun ei kestä silmissään yhtään läskiä. Saati hoitaa sellaista. Mitä tehdä?
      Kouvola
      6
      967
    9. Tarvitsemme lisää maahanmuuttoa.

      Väestö eläköityy, eli tarvitsemme lisää tekeviä käsiä ja veronmaksajia. Ainut ratkaisu löytyy maahanmuutosta. Nimenomaan
      Maailman menoa
      251
      934
    10. Kävit nainen näemmä mun

      Facessa katsomassa....
      Ikävä
      41
      909
    Aihe