Jump to content

3 Column Layout


bulba
 Share

Recommended Posts

Could someone give me the code for a 3 column layout. It looks like this:________________|-------------------------||-------------------------||----|---------------|----||----|---------------|----||----|---------------|----||----|---------------|----||-------------------------||-------------------------|err, thats a crap drawing but you can kinda see what I want right?

Link to comment
Share on other sites

Try this, I have the style part along with the divs, you can have it seperate. If you want the 3 bottom divs to stretch to the bottom, then change the "height:80%".

<html><head></head><body style="margin:0; padding:0;"><div style="height:100%; border:1px solid yellow;"><div style="width:100%; height:20%; border: 1px solid red;">HEADER PART</div><div style="width:20%; float:left; height:60%; border:1px solid green;">LEFT COLUMN</div><div style="width:60%; float:left; height:60%; border:1px solid black;">CENTER COLUMN</div><div style="width:20%; float:left; height:60%; border:1px solid navy;">RIGHT COLUMN</div></div></body></html>

You can modify the "width" and "height". important part is "float:left" places the 3 divs side by side. and border just to show the divs.Hope this is what you are looking for....

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...