Align + Widthproblem med divar

6 svar · 303 visningar · startad av MickeA.com 1 aug. 2005

MickeA.comMedlem sedan feb. 20034 441 inlägg

Frågan1 aug. 2005 09:50#1

Tja!
Med följande kod bör jag uppnå det jag vill, att få en div ligga överst, med två stycken olika stora under, men totalt få samma bredd på de två undre som på den övre.

Problemet är att anger jag den bredd det ska vara för att det ska gå ihop, får jag en oönskad radbrytning, vad kan det bero på?

Har försökt med flera olika saker, men får hur jag än gör ca 3px för liten bredd på den nedre högra.

Här är min kod:

<html>
<head>
<title></title>
<style type="text/css">
body
{
	text-align:	center;
}
#container
{
	padding:	0px;
	width:		750px;
	border:		1px #000 solid;
	margin-left:	auto;
	margin-right:	auto;

}
#pTop
{
	width:		750px;
	height:		300px;
	border:		1px #000 dashed;
}
#pLeft
{
	width:		145px;
	height:		200px;
	border:		1px #000 dashed;
	margin-top:	5px;
	margin-left:	0px;
	margin-right:	5px;
	float:		left;
}
#pRight
{
	width:		600px;
	height:		200px;
	border:		1px #000 dashed;
	margin-top:	5px;
	margin-left:	0px;
	margin-right:	0px;
	float:		left;
}
</style>
</head>
<body>
<div id="container">
	<div id="pTop"></div>
	<div id="pLeft"></div>
	<div id="pRight"></div>
</div>
</body>
</html>

Tack sålänge!

silfverMedlem sedan apr. 200312 679 inlägg

1 aug. 2005 09:56#2

Det första jag tänker på när jag ser din kod är doctype. Varför har du ingen sån? Det kanske inte är lösningen på ditt problem, men pröva att använda en.

icaaqMedlem sedan okt. 20005 273 inlägg

1 aug. 2005 10:33#3

Valid doctypes:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Jag hade nog brukat:

[red]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[/red]

eller

[red]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/red]

mv icaaq

MickeA.comMedlem sedan feb. 20034 441 inlägg

1 aug. 2005 12:55#4

Hmm, jo, vet att den saknas, det är med flit, eftersom koden ovan bara är "det viktigaste" av min eg. kod, som finns hemma.

Dock återstår problemet, att det är ngt som tar upp 4-6pixlar, som inte finns med i koden eller som inte syns, eftersom jag får den här oänskade radbrytningen jag inte vill ha.

Fler tips?

icaaqMedlem sedan okt. 20005 273 inlägg

1 aug. 2005 13:09#5

Händer det i alla webbläsare?

mv icaaq

icaaqMedlem sedan okt. 20005 273 inlägg

1 aug. 2005 13:17#6

Om du kollar in http://tantek.com/CSS/Examples/boxmodelhack.html så kommer du inse att vidden av dina två undre divar blir 749 och den övre diven blir 752

övre diven:

border +witdh + border = total
1px + 750px + 1px = 752px

undre diven

border + width + border + border + width + border = total
1px + 145px + 1px + 1px + 600px + 1px = 749px

mv icaaq

MickeA.comMedlem sedan feb. 20034 441 inlägg

1 aug. 2005 14:48#7

Tack för hjälpen, jag hade redan räknat med bredden på mina fyra borders, det jag hade glömt var padding-right: 5px; på den vänstra diven.

Tack Tack!