hvordan hindre float i å kollapse wrap?

Tha_Zaynt · 10. juli 2005

jeg driver og lager en side med trekolonners layout. De tre kolonnene bruker jeg

float på for å plassere slik jeg vil ha de. Problemet er at wrappen som er rundt disse tre

kolonnene kollapser. Jeg har laget slike side før og da la jeg bare en hr i bunnen innom wrappen slik at den ikke skulle kollapse, men det hjelper av en aller annen grunn ikke nå. Dessuten skulle jeg tro at footeren som ligger innenfor wrappen gjorde slik at den ikke kollapser, men det gjør den altså likevel.

Slik ser det ut

(Bordersene er der bare for å lettere se hvor kolonnene slutter)

her er koden:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SpillOnline.org</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div id="wrapper">

<div id="header"></div>

<div id="topbar"></div>

<div id="leftcolumn">
<p>Quisque pharetra lobortis risus. Aenean tincidunt, nibh eu pulvinar pharetra, tellus sem sodales mi, non sagittis lorem tellus quis leo. Aliquam feugiat tincidunt odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin tempor dolor. Morbi purus. Fusce venenatis porttitor urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla auctor. Proin venenatis bibendum lacus.</p>
</div>

<div id="midcolumn">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam convallis tortor in arcu. Aenean euismod, lorem eu dictum accumsan, ipsum nulla rutrum augue, ut convallis leo arcu eu velit. Donec quis nunc sed diam mattis molestie. Fusce volutpat fringilla wisi. Suspendisse molestie est in wisi. Cras facilisis, turpis et elementum adipiscing, nunc augue pharetra tortor, a facilisis leo neque eu lorem. Aenean consequat, quam et congue ultricies, sem nisl tempus tortor, at sagittis diam dolor vitae nulla. Ut leo tortor, faucibus id, congue vel, vestibulum at, dui. Proin imperdiet consectetuer dui. Mauris massa. Proin semper leo id odio. Aenean volutpat. Mauris risus. Phasellus a wisi. Ut velit mauris, varius vitae, sagittis nec, ullamcorper ut, erat.</p>

<p>Quisque pharetra lobortis risus. Aenean tincidunt, nibh eu pulvinar pharetra, tellus sem sodales mi, non sagittis lorem tellus quis leo. Aliquam feugiat tincidunt odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin tempor dolor. Morbi purus. Fusce venenatis porttitor urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla auctor. Proin venenatis bibendum lacus.</p>
</div>

<div id="rightcolumn">
<p>Quisque pharetra lobortis risus. Aenean tincidunt, nibh eu pulvinar pharetra, tellus sem sodales mi, non sagittis lorem tellus quis leo. Aliquam feugiat tincidunt odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sollicitudin tempor dolor. Morbi purus. Fusce venenatis porttitor urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla auctor. Proin venenatis bibendum lacus.</p>
</div>

<div id="footer"></div>

</div>

</body>
</html>

style.css

*{
margin: 0;
padding: 0;
}

body{
font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
background-color: #ffffff;
margin: 25px;
}

#wrapper{
margin: 0 auto;
background: url(images/contentbg.jpg) repeat-y;
width: 750px;
}

#header{
background: url(images/header.jpg) no-repeat;
width: 750px;
height: 63px;
}

#topbar{
margin: 0 auto;
background: url(images/contenttopfooter.jpg) repeat-x;
text-algin: left;
height: 13px;
width: 738px;
border: 1px solid #848484;
padding: 2px;
}

#leftcolumn{
margin: 0 0 0 3px;
float: left;
width: 100px;
padding: 10px;
border: 1px solid;
}

#midcolumn{
float: left;
width: 478px;
padding: 10px;
border: 1px solid;
}

#rightcolumn{
margin: 0 3px 0 0;
float: right;
width: 100px;
padding: 10px;
border: 1px solid;
}

#footer{
margin: 0 auto;
background: url(images/contenttopfooter.jpg) repeat-x;
text-algin: center;
height: 13px;
width: 738px;
border: 1px solid #848484;
padding: 2px;
}

p{
padding: .8em 0 .8em 0;
}

Noen som vet hvordan jeg hindrer wrappen i å kollapse?

Endret 10. juli 2005 av Tha_Zaynt

Marvil · 10. juli 2005

clear: both;

på footer i CSS..?

Tha_Zaynt · 10. juli 2005

Det var det jeg hadde glemt ja :blush: Det gjorde susen. Takk skal du ha

Marvil · 10. juli 2005

Det var det jeg hadde glemt ja Det gjorde susen. Takk skal du ha

:thumbup:

Kellendil · 13. juli 2005

Jeg har samme problemet, og jeg fatter ikke hvorfor

Ting jeg har prøvd;

lagt in <hr /> i siste div.

clear:both; på det meste.

Sitter på jobb atm, og har ikke mulighet til å laste opp på webserveren min, men begge filene ligger her i sin helhet, så om du trenger å se hvordan de ser ut er det bare å kopiere og lime inn

Takker for all hjelp jeg kan få

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="standal.css" rel="stylesheet">
<title>Advokat Standal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="container">

<div id="header">

</div>

<div id="informasjon">
<ul id="informasjonliste">
<li>Adresse</li>
<li>Telefon</li>
<li>Faks</li>
<li><a href="mailto:#">Epost</a></li>
</ul>
</div>
<br />
<div id="meny">
<ul id="menyliste">
<li><a href="#">  Meny 1</a></li>
<li><a href="#">  Meny 2</a></li>
<li><a href="#">  Meny 3</a></li>
<li><a href="#">  Meny 4</a></li>
</ul>
</div>

<div id="body">
<!-- Etter ditte, kjem hovedinnhaldet -->

<!-- Footer følger -->

</div>

</div> <!--Container slutt -->

<div id="footer">
Lorem ipsum dolor sit amet.
</div>


</body>
</html>

/* Advokat standal */
html {	margin:20px 0 10px 0; 
 padding:0; }

a  {  text-decoration:none;}


ul  {  list-style-type:none; 
 margin:0; 
 padding:0; }

div#informasjon {	float: left; 
   	margin:0; 
   	border-bottom: 1px groove #000; 
   	position:relative; 
   	width:600px; 
   	background-color:#333; 
   	color:#FFF;}
   	
div#informasjon li {position: relative; 
   	list-style: none; 
   	margin: 0; 
   	float: left; 
   	width:150px; 
   	line-height: 1em; 
   	text-align:center;}
   	
div#informasjon li a { color:#FFF;}

div#container { border:1px groove black; 
   width:600px; 
   position:relative; 
   margin:0 auto; }
   

div#header {  background:url(bilder/header.jpg); 
   width:600px; 
   height:100px;}


div#body {	margin:-5em 0 0 3em; 
 	padding:10px 0 0 10px;
 	clear:left; }

div#footer {width:600px; 
 	position:relative; 
 	margin:0 auto; 
 	text-align:center; 
 	padding-top:5px;}

Logg inn

hvordan hindre float i å kollapse wrap?

Anbefalte innlegg

Tha_Zaynt

Lenke til kommentar

Videoannonse

Marvil

Lenke til kommentar

Tha_Zaynt

Lenke til kommentar

Marvil

Lenke til kommentar

Kellendil

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer