Keskustelu: Nettisivujen teko: Elementti vuotaa reunuksen yli

Tähän varmasti löytyy simppeli ratkaisu, mutta itse en vain keksi sitä, eikä html sivun tyylittely ole ihan hanskassa.

Koodi löytyy täältä

Virhe ilmoitus palkki siis ylittää leveydessä sivun oikean reunan rumasti. Lisäksi valikon ja ilmoitus palkin väliin näyttäisi jäävän tyhjä alue, vaikka marginit on nollassa. Haluan ilmoituksen olevan ns. sivun yläreunassa, varsinainsen sivun elementin päällä, jolloin se peittää osan otsikosta.

Note elementin tulisi kuitenkin mahtua leveydessä kokonaan sivun yläreunaan.

Meniskö näin?

#note {
    color: #555;
    margin: 0;
    position: absolute;
    font-family: Tahoma,Geneva,Arial,sans-serif;
    font-size: 11px;
    display: flex;
    float: left;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

Pentu kirjoitti:

Virhe ilmoitus palkki siis ylittää leveydessä sivun oikean reunan rumasti.

Leveys lasketaan oletuksena paddingin sisältä, jolloin 100% on liikaa. Saavutat kuitenkin oikean leveyden esimerkiksi näillä vaihtoehdoilla:

width: 100%;
box-sizing: border-box;

right: 0;
left: 0;
/* width pois */

Pentu kirjoitti:

Lisäksi valikon ja ilmoitus palkin väliin näyttäisi jäävän tyhjä alue, vaikka marginit on nollassa.

Tämä johtuu jollain tavalla yläpalkin nappien kellutuksesta (float). Ota kellutus ja display:block pois napeilta. Nappien raot saat poistettua, kun poistat kaiken white-spacen elementtien välistä <>___<> tai kun rakennat koko navigaation flexboxilla kellutuksen sijaan.

Kaikki kolme tapaa johtaa oikeaan lopputulokseen tuon leveyden suhteen.

Arvelinkin että jotain tämän kaltaista voisi olla ratkaisu, yksinkertaista.

Metabolix kirjoitti:

width: 100%;
box-sizing: border-box;

Tuo rako poistui kun vaihdoin :

display: inline-flex;

muoton :

display: flex;

En ehtinyt koskea edes kellutukseen mitenkään. Täytyykin tutkia tota flexboxia tarkemmin.

Kiitos hyvistä vastauksista!