nie działa width:50%;

Question

Cześć,

od razu przejdę do sedna: mam taki kod https://jsfiddle.net/0Ln7xnbr/ w którym są dwa divy które powinny być obok siebie przy uzyciu float:lefta. Jednak z jakiegoś powodu to nie działa. Zauważyłem że jak włożę diva w dodatkowego diva to działa tak jak tutaj: https://jsfiddle.net/a8pdb7oj/1/. Problem w tym że nie mam pojęcia dlaczego to działa a poprzednie nie.

Answer 1

Przecież wszystko działa; zapominasz o tym, że padding i border również zajmują jakąś ilość pikseli. Zwyczajnie ustawiasz zbyt szerokie divy, przez co nie mieszczą się one obok siebie i zaczynają się układać pod sobą. Spróbuj zmienić np. wartość width dla #prawy na 55% - #prawy znajdzie się teraz obok #lewy.

Answer 2

Nie dziala poniewaz to:

div>div
{
  margin: 3px;
  padding: 2px;
  border: 2px solid black;
}

Uzasadnil Ci to tls01

Polecam tez stosowac tryb devloperski przegladarki, mozna miedzy innymi podgladnac sobie ile rzeczywiscie pixeli ma dany element.

A jesli potrzebujesz pomocniczego bordera to stosuj outline - nie powieksza on elementow.

Answer 3

#rodzic {
  background: orange;
  height: 300px;
  width: 600px;
  display:inline-block;
}
#lewy {
  background: red;
  width: 40%;
  float:left;
}

#prawy {
  width: 60%;
  background: green;  
}
div>div
{
  margin: 3px;
  padding: 2px;
}

 

Tym sposobem działa.
Ogólnie okazało się, że problem leżał w tym, że miałeś w dwóch divach float: left ;)
Jak z jednego się usunie, to już jest ok.