Ustawienie pozycji i szerokości divów na dole strony

0

Witam dopiero zaczynam programowanie więc prosze o wyrozumiałość otóż chciałem uzyskać taki efekt jak w załączniku lecz nie moge sobie poradzić z divami które chce ustawić na dole.
Czy ktos mógłby mi pomóc podać odpowiednie wymiary aby uzyskać efekt jak w zalączniku?
Poniżej moja praca

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>...</title>
  </head>
  <body>
    <div id="top">
    <div style="width:300px;height:500px;background:red;float:left"></div>
	<div style="width:500px;height:400px;background:blue;float:left"></div>
	<div style="width:300px;height:600px;background:yellow;float:right"></div>
	<div style="width:163px;height:300px;background:green;float:right"></div>
	<div style="width:300px;height:400px;background:black;float:left"></div>
	
    </div>
  </body>
</html>
0

Nie wiem czy to poprawne, ale zrobiłbym to mniej więcej tak:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>...</title>
  </head>
  <body>
    <div style="width: 800px; height: 800px;">
      <div style="float: left; width: 400px; height: 800px;">
        <div style="float: left; width: 200px; height: 800px;">
          <div style="width: 200px; height: 500px; background-color: yellow;"></div>
          <div style="width: 200px; height: 300px; background-color: green;"></div>
        </div>
        <div style="float: right; width: 200px; height: 800px;">
          <div style="width: 200px; height: 450px; background-color: red;"></div>
          <div style="width: 200px; height: 350px; background-color: blue;"></div>
        </div>
      </div>
      <div style="float: right; width: 400px; height: 800px;">
        <div style="float: left; width: 200px; height: 800px;">
          <div style="width: 200px; height: 100px; background-color: black;"></div>
          <div style="width: 200px; height: 700px; background-color: pink;"></div>
        </div>
        <div style="float: right; width: 200px; height: 800px;">
          <div style="width: 200px; height: 650px; background-color: gray"></div>
          <div style="width: 200px; height: 150px; background-color: violet"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Czyli pogrupowałbym sobie wszystkie kolumny (a jest ich cztery) i w każdej zrobił po dwa divy - górny i dolny, o odpowiednich rozmiarach; Miniaturka rezultatu:

site.png

Ewentualnie dostosuj rozmiar divów do Twoich potrzeb - zamiast na sztywno wpisywać ilość pikseli, wypada skorzystać z procentowych proporcji.

1 użytkowników online, w tym zalogowanych: 0, gości: 1