[HTML+CSS] Dziwnie rozciągnięty border

pytanie zadane 26 kwietnia 2018 w HTML i CSS przez Hiskiel Pasjonat (22,830 p.)
zmienione kategorie 27 kwietnia 2018 przez Hiskiel

Witam.

Kolejny problem z szablonem, który chciałem kontynuować. Tutaj kod:

<html><head><style id="__web-inspector-hide-shortcut-style__" type="text/css">
.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ *, .__web-inspector-hidebefore-shortcut__::before, .__web-inspector-hideafter-shortcut__::after
{
    visibility: hidden !important;
}
</style></head><body>
    <style>
        #header{
            background-color: #7dc9f2;
            width: 100%; 
            height: 30px;
            border-radius: 15px 15px 0px 0px;
            font-family: Verdana, sans-serif; 
            text-align: center;
        }
    	#header-text{
            position: relative;
            top: 3px;
    	}
        #info{
            position: relative;
            background-color: #7dc9f2;
            width: 100%; 
            height: 30px;
            border-top: 2px solid #5f5ce8;
            border-radius: 0 0 15px 15px;
            font-family: Verdana, sans-serif; 
        }
        #content{
            background-color: white;
            width: 100%;
            height: 100%;
            border: 2px solid #5f5ce8;
            border-bottom: 0;
            font-family: Verdana, sans-serif; 
            text-align: center; 
            box-sizing: border-box;
        }
    </style>
<div id="wrapper">
        <div id="header">
            <b id="header-text">T e k s t   n a g ł ó w k a</b>
        </div>   
        <div id="content">
            Siema! 
            elo<br>
            elo<br><br>
            elo<br>
            Witam
            <div id="info"></div>        </div>
</div>
</body></html>

border z #content jest rozciągnięty na całą stronę, nie wiem dlaczego.

Prosiłbym o pomoc.

Pozdrawiam.

1 odpowiedź

odpowiedź 26 kwietnia 2018 przez shotokan Nałogowiec (39,660 p.)
edycja 26 kwietnia 2018 przez shotokan

A czego się spodziewałeś, jeśli dałeś width: 100%. Div z #content znajduje się w divie z #wrapper, ale ten div nie jest stylizowany więc przyjmuje 100% szerokości a div z #content rozciąga się na 100% szerokości diva #wrapper.

Edit: A jeśli chodzi Ci o wysokość to dałeś height: 100% więc div rozciąga się na całą wysokość body.
A jak chcesz, aby wszystko działało tak, jak należy to należałoby zadeklarować wersję html, czyli: