Help required with fluid layout (height 100%?)

**laluuk** · 04-28-2007, 09:08 AM

hey guys, newbiee here, need some help with a css layout, below is the code that i've got. it is 3 columns with fixed center and fluid sidebars . What I need help in is, i want to have equal height columns (100%??) actually, say for e.g. if the contents in the center container is longer then the screen size I want the sidebar images and background image to stretch to the right length.

can someone please modify the code posted below or tell me how i could achieve. i would much appreciate your help. thanx to anyone in advance for helping me.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>

<style>
  body {
   margin: 0px; 
}
  #container {
       background: url('gradient.gif') repeat-y;
      /*image needs to be stretched to the correct length, same as center*/
  }
	#content {
	        position: absolute;
	        left: 50%;
	        margin-left: -355px;
	        width: 710px;
                background: url('content_image.gif') repeat-y;
	}
	#wrapside1 {
	        float: left;
	        width: 50%;
	}
	#wrapside2 {
	        float: right;
	        width: 50%;
	}
	#side1 {
	        margin-right: 355px;
          background: url('left_image.gif') repeat-y;
      /*image needs to be stretched to the correct length, same as center*/

	}
	#side2 {
	        margin-left: 355px;
          background: url('right_image.gif') repeat-y;
      /*image needs to be stretched to the correct length, same as center*/

	}
	#footer {
	        width: 100%;
          height: 90px;
          background: #FDE95E;
  }
</style>
</head>

<body>

<div id="container">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut id tortor eu nisl scelerisque euismod. Nulla facilisi. Nulla facilisi. Proin vel massa eu erat porttitor scelerisque. Aliquam vel massa quis libero convallis viverra. Pellentesque quis nibh eu nibh pulvinar varius. Vivamus elementum porttitor nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras adipiscing pede a velit. Quisque tellus lacus, pellentesque et, nonummy sit amet, adipiscing a, wisi. Nulla quis sem. Nam convallis eleifend sapien.</p>
    <div id="footer"> Footer </div>
  </div>
  
  <div id="wrapside1">
    <div id="side1">
    Side column with fluid size, but equal to that of other side
    </div>
  </div>

  <div id="wrapside2">
    <div id="side2">
    Side column with fluid size, but equal to that of other side
    </div>
  </div>
</div>
  </body>
  
</html>

**xoblivionxfantasyx** · 04-29-2007, 04:14 PM

you should try a border less table for your layout so all the columns can be the same length

**laluuk** · 04-29-2007, 05:03 PM

dont want to use tables ... unless its the only option left. which i doubt coz css can do everything tables can. just need some guidance on this one

**boogyman** · 04-29-2007, 07:37 PM

Code:

<style type="text/css">
<!--
#sidebar {
  background: url(host.ext/pathtoimage.ext) repeat-y;
  float: left;
  width: 30&#37;;
  text-align: left;
}
#content {
  background: url(host.ext/pathtoimage.ext) repeat-y;
  float: right;
  with: 68%;
  text-align: left;
}
/* MAKES THE HEADER TEXT CENTERED */
#header {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
/* CLEARS THE FLOATS AND PUTS THE FOOTER AT THE BOTTOM OF THE PAGE, AND ALSO CENTERS*/
#footer {
  clear: both;
  width: 100%;
  margin: 0 auto;
  text-align: center;
// -->
</style>

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

  <div id="sidebar">
     TEXT
  </div>

  <div id="content">
     TEXT
  </div>

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

that is a two column layout. visit AListApart and search for 3 columns / faux columns and you will see the layout schematics if thats what you want

Thread: Help required with fluid layout (height 100%?)

Thread Tools

Search Thread

Help required with fluid layout (height 100%?)

Bookmarks

Bookmarks

Posting Permissions