<div> runt hela sidan, sen en float i denna?

SjodahlMedlem sedan maj 20033 218 inlägg

Frågan23 juni 2006 06:38#1

Hej!

Vill göra en siteBox runt hela sidan
och i denna vill jag sen ha 3st boxar, och att siteBox ändrar sin storlek beroende på innehållet i det andra så ingen av dem kommer längre ner än själva mainBox.

Gör jag så här så stannar innehållet i boxen (eller inte ha med float)

#leftColumn { 

	float: auto;
	width: 145px;
	background-color: white;
}

Sätter jag left så stannar den inte kvar i boxen.

#leftColumn { 

	float: left;
	width: 145px;
	background-color: white;
}

HTML SIDAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Foretagsnamn </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>
<!--
----------------------------------------------------------------------------------------------------------
siteBox
----------------------------------------------------------------------------------------------------------
!-->
<div id="siteBox">

	<!--
	----------------------------------------------------------------------------------------------------------
	siteHeader
	----------------------------------------------------------------------------------------------------------
	!-->
	<div id="siteHeader">
		<h1>Foretagsnamn AB</h1> - Högre kompetens och produktivitet i ditt företag
	</div>

	<!--
	----------------------------------------------------------------------------------------------------------
	#leftColumn
	----------------------------------------------------------------------------------------------------------
	!-->
	<div id="leftColumn">
		<ul>
			<li>Huvudsida</li>
			<li>Utrustning</li>
			<li>Dataprogram</li>
			<li>Utbildning</li>
			<li>Kontakta</li>
		</ul>
	</div>

	<!--
	----------------------------------------------------------------------------------------------------------
	siteInfo
	----------------------------------------------------------------------------------------------------------
	!-->
	<div id="siteInfo">
		Här kommer det att presenteras en hel del information om sidan!
	</div>
<!--
----------------------------------------------------------------------------------------------------------
siteBox ends
----------------------------------------------------------------------------------------------------------
!-->
</div>
</body>
</html>


CSS MALL
/*
----------------------------------------------------------------------------------------------------------
BODY
----------------------------------------------------------------------------------------------------------
*/
body {
	font-family: arial;
	color: black
	background-color: white;
	font-size: 11pt;
}
table header{
	border: 1 solid #004080;
}
/*
----------------------------------------------------------------------------------------------------------
#siteBox
----------------------------------------------------------------------------------------------------------
*/
#siteBox {
	float: auto;
	background-color: #F3F3F3;
	width: 98%;
	padding: 4px;
	border: 2px solid #004080;
}

/*
----------------------------------------------------------------------------------------------------------
#siteHeader
----------------------------------------------------------------------------------------------------------
*/
#siteHeader {
	color: red;
}
/*
----------------------------------------------------------------------------------------------------------
#leftColumn
----------------------------------------------------------------------------------------------------------
*/
#leftColumn { 

	float: auto;
	width: 145px;
	background-color: white;
}
/*
----------------------------------------------------------------------------------------------------------
#siteInfo
----------------------------------------------------------------------------------------------------------
*/
#siteInfo { 

	float: right;
	width: 145px;
	background-color: white;

}

tantenMedlem sedan nov. 20051 596 inlägg

23 juni 2006 07:06#2

float: auto finns inte...så det kan du ta bort...
Som jag kan se så ska left-boxen ligga kvar under företagsnamnet . Sätter du float:left på den så lämnar du plats till höger om den så siteinfo kan komma upp på samma höjd och lägga sig längst bort till höger... och siteboxen anpassar höjden till det.
Hittar ingen mainbox!?

SjodahlMedlem sedan maj 20033 218 inlägg

23 juni 2006 07:13#3

#siteHeader, menar jag ;)

Men får inte till 3st kolumnar i denna riktigt.

tantenMedlem sedan nov. 20051 596 inlägg

23 juni 2006 07:20#4

Sjodahl skrev:

#siteHeader, menar jag ;)

Men får inte till 3st kolumnar i denna riktigt.

Sätt float left på den också så kommer alla tre vara bredvid varandra.
Float left betyder egentligen. "Jag lämnar plats åt annat på min högra sida"...
så du kan prova med left på den sista diven också ;)
anpassa sedan avstånden med margin och eller padding...

tantenMedlem sedan nov. 20051 596 inlägg

23 juni 2006 07:47#5

Glömde titta hur siteboxen såg ut... :r
Sätt in en ny div kalla den för t.ex wrapper... vanligt i de här sammanhangen.
#wrapper{ width: 98%; } Placera den först och avsluta den sist i html-koden.
Ändra sedan

#siteBox {
	background-color: #F3F3F3;
	width: 100%;
	padding: 4px;
	border: 2px solid #004080;
	float: left;
}

så ska bakgrunden följa med även i FF

SjodahlMedlem sedan maj 20033 218 inlägg

23 juni 2006 08:34#6

Får testa på måndag ;)

Tackar!