devofash Posted April 27, 2007 Share Posted April 27, 2007 hey guys need some help with a css layout rite, below is the code that i've got. it is 3 columns with fixed center (background image) and fluid sidebars (background image). What I need help in is, i want to have equal height columns (100%??) but cant seem to figure it out. actually, say for e.g. if the contents in the center container is longer then the screen size I want the sidebar images to stretch to the right length. can someone please edit the code posted below. i would much appreciate it. thanx to anyone in advance for helping me. <!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 { } #content { position: absolute; left: 50%; margin-left: -355px; width: 710px; background: #FF9966; } #wrapside1 { float: left; width: 50%; } #wrapside2 { float: right; width: 50%; } #side1 { margin-right: 355px; background: #EAEAEA; } #side2 { margin-left: 355px; background: #C8FC98; } #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> Quote Link to comment Share on other sites More sharing options...
devofash Posted April 29, 2007 Author Share Posted April 29, 2007 anyone ?? Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 30, 2007 Share Posted April 30, 2007 you will have to use the faux column method OR use positionion and give you element top: 0 ;bottom: 0; (the container will need some position too. Quote Link to comment Share on other sites More sharing options...
Copyright Posted April 30, 2007 Share Posted April 30, 2007 One way to achive equal height columns is to add a very large padding-bottom in conjunction with a negative margin-bottom value equal with the padding(abs value). #wrapside1 { float: left; width: 50%; padding-bottom:2000px; margin-bottom:-2000px; } #wrapside2 { float: right; width: 50%; padding-bottom:2000px; margin-bottom:-2000px; } edit// I dont understand why do you use 50% width side columns ??? Later. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.