Making my wrapper adjust height

Hello.

So basically in my wrapper I have 3 div’s. One div for a slider, and under this I have two divs, one floated to the left and the other one to the right. And what I want is when I insert more text in the div the wrapper is gona adjust the height, now it’s just like the wrapper has overflow:hidden and ignoring the fact that the div #col1 height is increasing.

HTML:

<div id="wrapper">

<div id="slider"><img src="images/Test.png" width="980" height="300" /></div>


<div id="col1">

<h1 class="inledning">Välkommen till WBM!</h1><br /><br />

<p class="text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,<br /><br /> id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br /><br />
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.<br /><br /> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. <br /><br />Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias<br /><br />
consequatur aut perferendis doloribus asperiores repellat.</p>



 </div>

<div id="col2"><img src="images/Gallery.png" width="500" height="492" /></div>



</div>

CSS:

body {background-color:#006;   }

#wrapper {width:980px; height:950px; margin:0 auto; margin-top:6px;  }

#upper {width:1610px; height:200px;background-image:url(../images/Slider1.jpg); margin:0 auto;background-position:60%}
#iupper {width:980px; height:200px; margin:0 auto; }

#slider {height:300px; width:980px;  }

#col1 {
	float:left;
	width:420px;

}

.överskrift {color:#000; font-size:25px; text-transform:uppercase; font-family:oswald; font-weight:300; margin-top:20px; margin-bottom:20px;}

#col2 { float:right; width:530px; height:500px; margin-top:50px;  }

#logo {margin-top:30px;  margin-left:20px;}
.inledning {color:#666; font-weight:bold; font-size:30px; font-family:Open Sans; margin-top:20px; }

.text {color:#999; font-family: "Times New Roman", Times, serif; font-size:15px;  }

#footer {
	height:250px;
	background-color:#FFFFFF;
	margin-top:70px;
	border-top-width: 7px;
	border-top-style: solid;
	border-top-color: #666666;
}

#footeri { width:980px; height:250px;  margin: 0 auto; }

.footercol {
	float:left;
	height:250px;
	width:315px;
}





html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/Kevin

Remove the height from the wrapper.

#wrapper {height:950px;}

It’s rarely a good idea to set a height. Avoid it like the plague.

Thanks. I came in to another problem.

Take a look at http://www.kwpwebdesign.se

If you zoom out as much as you can you can see that a column is moving, that’s #col2.
How do I prevent that so it stays in the same position?

html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/demo.css"></head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/anythingslider.css">
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    
    	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\\/script>')</script>

	<script>
		// DOM Ready
		$(function(){
			$('#slider').anythingSlider();
		});
	</script>

	<script src="js/jquery.anythingslider.js"></script>



<body>


<div id="upper">

<div id="bgupper"><div id="iupper"><img id="logo" src="images/logo.png" width="142" height="126" /></div></div>




</div>

<div id="header-wrapper">
  <div class="wrapper">
		  <ul class="nav">
		    <li class="navigation"><a href="#home">WBM-Fleninge</a></li>
				<li class="navigation"><a href="#about">ATV</a></li>
				<li class="navigation"><a href="#blog">Sortiment</a></li>

				<li class="navigation"><a href="#credits">AC</a></li>
                <li class="navigation"><a href="#credits">Finanser</a></li>
                   <li class="navigation"><a href="#credits">Begagnat</a> </li>
                   
                      <li class="navigation"><a href="#credits">Service</a></li>
                
                <li class="navigation"><a href="#credits">Kartor</a></li>

		  </ul>
  </div>
</div>



<div id="wrapper">


<div id="slider1">
<ul id="slider">


	<li><img src="images/Test1.png" width="980" height="300px" /></li>
		<li><img src="images/Test.png" width="980" height="300px" /></li>
        
            	<li><img src="images/Test2.png" width="980" height="300px" /></li>


</ul></div>

<div id="om">

<div id="col1">

<h1 class="inledning">Välkommen till WBM!</h1><br /><br />

<p class="text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,<br /><br /> id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br />
  <br />
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.<br /><br /> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. <br /><br />Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias<br /><br /> 
consequatur aut perferendis doloribus asperiores repellat.</p>

 <div class="pics"></div>
  <div class="pics2"></div>
   <div class="pics3"></div>

 </div>
 
 
 
 

<div id="col2">


<div id="öppettider">
<p class="oppet">Öppettider</p><br />

<p class="text">Mån-fre: 11:00-18:00<br><br>
Telefon: 0521-25 52 52<br><br>
Fax: 0521-25 52 57
</p>

</div>



<img id="ar" src="images/samarbete_40ar.png" width="200" height="150" />
<div id="öppettider">
  
  
  <p class="text">
</p>

</div>

</div>
</div>

</div>


</div>


<div id="footer">

<div id="footeri">
<div class="footercol"><p class="överskrift">KONTAKT</p>

<p class="para">Mobil. 070 123 123 123<br />
  <br />
E-post: abm-fleninge@hotmail.com<br />
<br />
Kontaktperson Abm Fleninge<br />
<br />
</p><br />





</div>
<div class="footercol">
  <p class="överskrift">HITTA OSS</p>

<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.se/maps?f=q&amp;source=s_q&amp;hl=sv&amp;geocode=&amp;q=Fleningev%C3%A4gen,+Helsingborg&amp;aq=0&amp;oq=FLENINGE&amp;sll=61.606396,21.225586&amp;sspn=37.146142,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Fleningev%C3%A4gen,+260+35+%C3%96d%C3%A5kra,+Sk%C3%A5ne+l%C3%A4n&amp;t=m&amp;z=14&amp;ll=56.108623,12.79027&amp;output=embed"></iframe><br />
</div>
<div class="footercol">
 <p class="överskrift">SORTIMENT</p>
 
 <img src="images/Untitled-3 copy.png" width="272" height="167" />
 
 
 
 
 </div>


</div>




</div>



</body>
</html>


css


body {background-color:#000017}

#wrapper {width:980px; margin:0 auto; margin-top:6px;  }

#upper {height:200px;background-color:#000000; margin:0 auto;}
#iupper {width:980px; height:200px; margin:0 auto; }

#bgupper { height:200px; margin:0 auto; background-image:url(../images/Slider1.jpg) }

#slider1 {height:300px; width:980px; clear:both  }

#col1 {
	float:left;
	width:680px;
	margin-top: 30px;
	padding-right: 30px;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #333;


}

#ar {display:block; margin-left:30px; margin-top:30px; }


#öppettider {width:238px; margin-left:30px; }

#random {width:238px; margin-left:30px; margin-top:40px;  }

.oppet { color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; }

#om {width:980px; overflow:hidden }

.överskrift {color:#000; font-size:25px; text-transform:uppercase; font-family:oswald; font-weight:300; margin-top:20px; margin-bottom:20px;}

#col2 {
	float:left;
	width:268px;
	margin-top:50px;
	float:right
	
 
}

#logo {margin-top:30px;  margin-left:20px;}
.inledning {color:#fff; font-weight:bold; font-size:30px; font-family:Open Sans; margin-top:20px; }

.text {color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size:14px;  }

#footer {
	height:250px;
	background-color:#FFFFFF;
	margin-top:70px;
	border-top-width: 7px;
	border-top-style: solid;
	border-top-color: #666666;
	clear:both
}

#footeri { width:980px; height:250px;  margin: 0 auto; }

.footercol {
	float:left;
	height:250px;
	width:315px;
}

.pics { width:210px; height:170px; float:left;margin-top:30px; background-image:url(../images/mini1.jpg)}
.pics2 { width:210px; height:170px;  float:left;margin-top:30px; margin-left:25px; background-image:url(../images/mini2.jpg) }
.pics3 { width:210px; height:170px;  float:right ;margin-top:30px; background-image:url(../images/mini3.jpg) }




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


Close this thread I’ll make a new one since its a new problem.

From now on every new problem, if it isnt a really small problem, ill make a new thread.