⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Auto Adjusting Stretch Fit Website Layout Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn to code auto adjusting stretch fit web site layouts. You can use all of the space in the window if you like using CSS that has been around for years. You can also apply the same stretchy effect to your graphics and images. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<style>
body{ margin:0px }
div#top{ background:url(topSliver.png) repeat-x; height:73px; font-size:36px; padding:20px 0px 0px 20px;  }
div#middle{ min-width:800px; }
div#middle > div{ float:left; width:25%; }
div#middle > div > div{ border:#000 1px solid; padding: 20px; }
div#middle > div > div > img{ width:100%; }
div#bottom{ clear:left; background:#666; height:200px; }
</style>
</head>
<body>
<div id="top">My Website</div>
<div id="middle">
  <div>
    <div>
      <img src="exampleimage.jpg" alt="example">
      Dummy text goes here ...
    </div>
  </div>
  <div>
    <div>
	  <img src="exampleimage.jpg" alt="example">
      Dummy text goes here ...
    </div>
  </div>
  <div>
    <div>
	  <img src="exampleimage.jpg" alt="example">
      Dummy text goes here ...
    </div>
  </div>
  <div>
    <div>
	  <img src="exampleimage.jpg" alt="example">
      Dummy text goes here ...
    </div>
  </div>
</div>
<div id="bottom"></div>
</body>
</html>
▲