3 st kolumner med css

12 svar · 760 visningar · startad av eddy1 26 feb. 2007

eddy1Medlem sedan aug. 2001969 inlägg

Frågan26 feb. 2007 16:48#1

Hej

jag vill ha tre kolumner och den i mitten ska ha fast mått medans högra och vänstra kolumnen får dela på övrigt utrymme..

har fått det att fungera som det ska i firefox men inte i IE..
Så här ser koden ut:

body {
	display: table;
	width: 100%;
	height: 100%;
	margin: 0;
	position: relative;
	border-collapse: collapse;
	background-color: #E7E7E7;
}

.leftbox {
	display: table-cell;
	position: relative;
	float: left;
	width: auto;
}
.rightbox {
	display: table-cell;
	position: relative;
	float: right;
	width: auto;
}
.middlebox {
	display: table-cell;
	width: 800px;
	background-color: White;
	border-right : 1px solid Black;
	border-left: 1px solid Black;
}

cayaMedlem sedan aug. 20051 448 inlägg

26 feb. 2007 19:06#2

ta bort position:relative

eddy1Medlem sedan aug. 2001969 inlägg

26 feb. 2007 19:47#3

Jag provade det men det fungerade inte...

Firefox blir kanon men i IE är det inte ens i närheten. Höjden stämmer inte och inte bredden, inte heller placeringen...

Tacksam för alla förslag?

Mvh

cayaMedlem sedan aug. 20051 448 inlägg

26 feb. 2007 19:52#4

får jag se mer kod än sådär?
har du något som bryter av floats efter de båda flytande divarna?
du har inte övervägt en omslutande div som har ungefär samma egenskap som body har nu, som sas håller samman de tre?

zcorpanMedlem sedan dec. 20042 245 inlägg

26 feb. 2007 19:54#5

IE saknar stöd för display:table.

Med detta fungerar det väl lite halvt i IE. Sidokolumnerna blir så smala som deras innehåll och mittenkolumnen blir därför inte centrerad.

body {
	display: table;
	width: 100%;
	margin: 0;
	position: relative;
	border-collapse: collapse;
	background-color: #E7E7E7;
}

.leftbox {
	display: table-cell;
	!float: left;
}
.rightbox {
	display: table-cell;
	!float: left;
}
.middlebox {
	display: table-cell;
	width: 800px;
	!float:left;
	background-color: White;
	border-right : 1px solid Black;
	border-left: 1px solid Black;
}

Det går nog få det bra i IE också om man vill...

zcorpanMedlem sedan dec. 20042 245 inlägg

26 feb. 2007 19:55#6

caya skrev:

du har inte övervägt en omslutande div som har ungefär samma egenskap som body har nu, som sas håller samman de tre?

Vad är det för fel på <body>?

cayaMedlem sedan aug. 20051 448 inlägg

26 feb. 2007 20:04#7

jag övervägde möjligheterna och gillade att de ökades med en omslutande div.
;)

eddy1Medlem sedan aug. 2001969 inlägg

27 feb. 2007 09:16#8

Jag vet inte med mer kod, jag har inte mer, skulle vara html koden och då skrev jag bara så här..

<body>
<div class="leftbox">fsd</div>
<div class="middlebox">fsdfs</div>
<div class="rightbox">fsd</div>
</body>
</html>

Förstår nte riktigt hur du menar med detta?

har du något som bryter av floats efter de båda flytande divarna?
du har inte övervägt en omslutande div som har ungefär samma egenskap som body har nu, som sas håller samman de tre?

Zcorpan:
Provade att lägga till

!float: left;

Men det gjorde ingen skillnad, kolumnerna blir bara så höga som den mängd text som finns i och samma gäller det bredd..

Jag är väldigt novis på detta, har bara suttit och provat lite i topstyle..

Men jag provar allt, så har ni några fler ideer så?

Mvh

eddy1Medlem sedan aug. 2001969 inlägg

27 feb. 2007 09:34#9

Kom på en grej nu..
Vet inte varför jag skulle ha kolumner, jag var ju igentligen bara ute efter mitt kolumnen.
Jag gjorde en centrerad box istället :)

Ibland är man inte ens i närheten av att inte vara dum...

voigtann1Medlem sedan juni 20019 519 inlägg

27 feb. 2007 09:36#10

Problemet kvarstår ändå om några månader kanske du är ute efter 3 kolumner ;)

eddy1Medlem sedan aug. 2001969 inlägg

27 feb. 2007 10:40#11

visst kan det vara så... jag är fortfarande öppen för lösningar ideer att prova..

Fick ett nytt problem nu..

har två boxar eller container , vad det nu kallas. Dessa ligger vid sidan om varandra under dessa har jag en ny box som är lika bredd som dom två övre..

Detta blir bra i IE men i firefox hamnar den nedre boxen på dom övre kolumnerna??
Så här ser koden ut:

#topleft	{
	width: 98px;
	height:86px;
	float: left;
}

#topright	{
	width: 702px;
	height: 86px;
	background-image: url(../images/bg_top.jpg);
	background-position: top;
	background-repeat: no-repeat;
	float: right;
}
#top_bord	{
	height: 19px;
	width: 800px;
	background-image: url(../images/top_bord.jpg);
	background-repeat: no-repeat;
	float: none;
}

och html koden

<div id="centrering">
<div id="topleft" align="center"><img src="images/smalllogo.gif"></div><div id="topright"></div>
<div id="top_bord"></div>
</div>

kaxigtMedlem sedan okt. 2004636 inlägg

27 feb. 2007 12:02#12

#top_bord	{
[red]clear:both;[/red]
	height: 19px;
	width: 800px;
	background-image: url(../images/top_bord.jpg);
	background-repeat: no-repeat;
	
}

Om det nu är denna som ska ligga under de andra två boxarna.

zcorpanMedlem sedan dec. 20042 245 inlägg

27 feb. 2007 22:35#13

Först och främst vill du nog ha en bra doctype så du inte testar i quirks mode...