[HTML][DIV] Złe ułożenie strony

[lightinside]

 
#strona {
    margin  : auto;
    border  : ridge;
    padding : 0px;
    width   : 750px;
background-color: #66CCFF;
max-height: 300px;
border-radius: 10px;
}
#naglowek {
width:750px;
background-color: white;
min-height: 70px;
 
text-transform:capitalize;
text-align:center;
font-size:x-large;
font-style:italic;
font-weight:bold;
}
 
#pola {
min-height:230px;
width:500px;
background-color:green;
font-size: large;
color: white;
}
#podglad {
width:248px;
min-height:230px;
background-color:red;
}
 

 

W stronie jest Nagłówek i kolejno po nim pola i podgląd.

 

Co zrobic aby "podgląd" nie wychodził mi za stronę? Kilka razy zmieniałam szerokośc aby razem wychodziło 750 px lub mniej za każdym razem wychodzi... Ba nawet gdy ustawiłam 100 to i tak wychodzi... (dla pola 100)

 

Głowa mnie już od tego boli...

[timikomp]

Daj też zawartość pliku .html. Jak pozycjonujesz elementy?

[leggo]

#strona ma określony max-height, to jego wartość ogranicza rozciąganie się tego elementu. Jeśli usuniesz ten parametr cała zawartość będzie się mieścić wewnątrz tego diva.

 

Div #podglad spada niżej, ponieważ divy są elementami blokowymi - takimi, które są wyświetlane w każdej linii pojedynczo.

[lightinside]

Usunełam max-height

 

Więc co mogę zrobic aby były obok siebie?

 

struktura to

strona w niej naglowek pola podgląd

[BraYneX]

Można jaśniej? Co ma być obok czego? Jeśli wrzucisz kod html oraz dokładnie opiszesz co chcesz osiągnąć będzie nam łatwiej ;)

[leggo]

Najprostszym rozwiązaniem będzie dodanie do #pola i #podglad:

display: inline-block;

[lightinside]

Nadal mi się rozjeżdza, kod wygląda następująco:

 

#strona {
    margin  : auto;
    border  : ridge;
    padding : 0px;
    width   : 750px;
background-color: #66CCFF;

border-radius: 10px;
}
#naglowek {
width:750px;
background-color: white;
min-height: 70px;

text-transform:capitalize;
text-align:center;
font-size:x-large;
font-style:italic;
font-weight:bold;
}

#pola {
min-height:300xp;
width:500px;
background-color:green;
font-size: large;
color: white;
display: inline-block;
}
#podglad {
width:248px;
min-height:300xp;
background-color:red;
display: inline-block;
}

[leggo]

Zastosowanie inline-block sprawia, że elementy z tym parametrem zyskują dodatkowy margines (są większe niż podana szerokość). Jeśli zmniejszysz odrobinę #podglad, będzie się on mieścił obok pierwszego diva.

 

 

Rozmiar odstępu pomiędzy obiektami jest ustalany na podstawie wielkości word-spacing ("z zewnątrz" te elementy są traktowane jak liniowe), dlatego ustawienie, w nadrzędnym elemencie (#strona), font-size: 0em; powinno usunąć odstęp. Więcej na ten temat tutaj.

 

! Rozmiar czcionki jest dziedziczony, jeśli więc ustawiasz go na 0 w nadrzędnym elemencie, musisz nadać mu nową wartość w elementach podrzędnych (w przeciwnym razie nie będą wyświetlane).