Layout diva

Dla specjalistów Webmastering
#1

Hej :slight_smile:

Mam mały problem. Robię prostą stronę.

Mój plik index.html:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="generator" content="Bluefish 2.2.4" >
<meta name="date" content="2014-01-29T20:57:43+0100" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta charset="UTF-8">
<link href="style-plan.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<div class="menu">
Dummy
</div>
<div class="plan">
Foo Bar
</div>
</div>
</body>

oraz style.css

div.content {
	background-color: #fbfbfb;
	width: 1000px;
	margin: 0 auto;
	}
div.menu {
	background-color: whitesmoke;
	text-decoration: none;
	text-align: center;
	width: 250px;
	height: inherit;
	position: inherit;
	left: 0;
	}
div.plan {
	text-decoration: none;
	text-align: center;
	width: 750px;
	height: inherit;
	position: inherit;
	float: right;
	}

Chcę, żeby w divie “content” wyświetlał się div menu i div plan. Niestety tak to wygląda w przeglądarce:

Zrzut_ekranu.jpg

Jak zrobić, żeby w “content” zawierał się i “menu” i “plan”?

#2

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

#3

Do div.menu trzeba dodać float: left;

#4

@Up

#5

 

poszukaj w google, takich trików jest cała masa

 

np 

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

 

i wiele wiele wiele innych artykułów…

#6

@knyku

#7

float: left w menu i float: right w plan. Wtedy nie ma znaczenia co jest pierwsze w pliku html, bo i tak atrybut float ustala, z której będzie strony.

 

P.S. kostek nie rozumiem dlaczego uważasz to rozwiązanie bez sensu, skoro sam w swoim przykładzie używasz float: left w warstwie menu :smiley:

#8

@Cyr4x

#9

Ściągnąłem sobie css z drugiego linku i przecież tam jak byk jest dla obydwu kolumn obok siebie zastosowany atrybut float. Inaczej być nie może. Dla obydwu float: left, tak też zadziała. Obydwie kolumny są okolone zbiorczym divem, to oczywiste. Z tą różnicą, że wymiary podane są w procentach. Ja stosuję podobną metodę, ale zwykle podaję stałe wymiary w pikselach.

#10

Nie jednym, a dwoma (EDIT: chodziło mi o twoje zdanie “Obydwie kolumny są okolone zbiorczym divem, to oczywiste”, dopisane, bo było mało czytelne do czego sięodniosłem, ale taka godzina =)). Zastanów się dla czego. Zresztą nawet jak nie dojdziesz do tego wniosku, wystarczy zobaczyć, że ten model zachowuje się inaczej (to jest kolumny zawsze są równe). Dlatego mój post (#4) ma treść, która odpowiada na post (#3), że sama zmiana: