1 reply [Last post]
ezraaa
ezraaa's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT+9
Joined: 2012-08-10
Posts: 1
Points: 2

hi~ im trying to make layout with 3columns that all height 100% and footer stay at the bottom..... (see the example img below...)

layout.gif

its really complicated layout for me... Sad(

here is my html codes.... plz help me CSS

<div id="wrapper">
	<div id="header">header</div> 
    <div id="middle">
    	<div id="leftBar">Left Bar</div> 
         <div id="container">
         	<div id="content">content</div>
            <div id="rightBar">right bar</div>
         </div>  
         <div id="footer">footer</div> 
    </div>  
</div>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

That image only has 2 columns

That image only has 2 columns the same height Wink
You can give the appearence of same length columns with faux columns or use CSS3 flex box, which is not well supported, or give the columns a fixed height.
Otherwise the code is a little complex, see 100% Height in CSS