Jak podzielić div-a na pół

pytanie zadane 18 listopada 2015 w HTML i CSS przez damianlxlx5 Obywatel (1,880 p.)

Witam

Chcę stworzyć taki pasek na zasadzie div'a, przykładowo:

Strona Internetowa

Przesunąłem tego całego diva o 20px w prawo i o 20px w lewo żeby nie był tak przy samej krawędzi strony.

Oraz oba te napisy przesunąłem w środku tego div'a o 10px od lewej do prawej strony.

Tak to wygląda w kodzie:

#Kolumna_1 {
		  color: white;
		  background:green;
		  border: 1px solid black;
		  height: 50px;
		  margin-top:20px;
		  margin-left:10px;
		  margin-right:10px;
		  
		  
		 
		  
		  
		  
		  
	  }
	  #Liczba1
	  {
		  padding-left:10px;
		  float:left;
		  width:50%;
		  background:green;
		  height: 50px;
		  
		  
		  
	  }
	  #liczba2
	  (
		  padding-left:10px;
		  width:473px;
		  float:left;
		  background:orange;
		  height: 50px;
		  
	  }

I chciałem żeby ten div podzielił się na pół tak jakby więc zastosowałem instrukcję width:50% w obu przypadkach.

Problem jest jednak taki że jak zrobiłem odstęp tych napisów o 10px względem tego div'a to wtedy te napisy układają się pod sobą.

Co zrobić żeby to poprawnie działało ?

7 odpowiedzi

odpowiedź 19 listopada 2015 przez Schizohatter Nałogowiec (39,600 p.)
wybrane 20 listopada 2015 przez damianlxlx5

Najlepsza

Co do pytania odnośnie marginesów - nie zrobisz tego tak, bez liczenia wymiarów. Skoro używasz wartości procentowych, to można śmiało założyć, że faktycznie wymiary obydwóch divów są nieznane. W związku z tym powinieneś użyć CSS calc():

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Czyli - margines ustawić normalnie, a następnie wyliczyć nową szerokość każdego z divów, biorąc jako wartość bazową 50% (ich szerokość) i odejmując od tego marginesy w px.

komentarz 20 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Czyli mam dodać tą linię w css-ie #Kolumna1, #Liczba1, #Liczba2


Calc (50% - 10 px);

Czy tak to ma wyglądać ?

komentarz 20 listopada 2015 przez Schizohatter Nałogowiec (39,600 p.)

Jeśli lewy+prawy margin = 10px, to tak, tak powinno wyglądać width każdego z tych dzieci.

width: calc(50% - 10px);

Wtedy każdy z nich dostaje 10px do rozdysponowania na marginesy.

komentarz 20 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Tak to powinno wyglądać :

#Liczba1
	  {
		  margin-left:40px;
		  padding-left:10px;
		  float:left;
		  width:50%;
		  background:green;
		  height: 50px;
		  box-sizing: border-box;
		  border: 1px solid black;
		  width: calc(50% - 50px);
		  
		  
		  
	  }
	  #liczba2
	  {
	      
		  margin-left:40px;
		  padding-left:10px;
		  width:50%;
		  float:left;
		  background:brown;
		  height: 50px;
		  box-sizing: border-box;
		  border: 1px solid black;
		  width: calc(50% - 50px);
		  
		  
	  }

komentarz 20 listopada 2015 przez damianlxlx5 Obywatel (1,880 p.)

Bo teraz mam większy margines po lewejj stronie niż po prawej.Dlaczego, skoro margin mam ustawiony tak samo po obu stronach ?

komentarz 20 listopada 2015 przez Schizohatter Nałogowiec (39,600 p.)

Ja w kodzie widzę tylko margin-left: 40px i żadnej wzmianki o margin-right. Dodatkowo padding to nie margin. Jeśli stosujesz box-sizing border-box (a stosujesz), to nie powinieneś go brać pod uwagę przy liczeniu width