Help with 3-column CSS

Page 1 of 1

Help with 3-column CSS

by rswebs » Tue Dec 21, 2010 4:20 pm

i want to re-organize my website adding 3 columns with css. the left nav, the body, and the right nav., but when i put float right on the right nav the body box goes shorter and sometimes it moves to the bottom and the footer moves to a different location.

i hope the forum can understand what im trying to say.

thanks

rswebs

Posts: 76
Joined: Wed Nov 24, 2010 6:47 am

--
Thanks Rafael - www.htmltutorialtopics.com

Re: Help with 3-column CSS

by lacroixz » Tue Dec 21, 2010 7:10 pm

Like this? http://mauricet.ma.funpic.org/column/test.html

lacroixz

Posts: 74
Joined: Wed Oct 27, 2010 9:26 pm

Re: Help with 3-column CSS

by nsdeammmae » Fri Dec 31, 2010 2:32 am

Can you post your css code.

nsdeammmae

Posts: 8
Joined: Fri Dec 31, 2010 1:18 am
Location: augesoft.com

--
Free web design tools download
Free software download

Re: Help with 3-column CSS

by howardgreet » Tue Apr 12, 2011 10:54 am

To fix the footer problem, what I do is that i'd place those 3 divs to a container div. On that container div, I'd assign a clearfix class (somekind of solution I got from a nettuts site).

Code: Select all: .clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ .clearfix { display: block; }

For those 3 divs, I'd assign the appropriate widths and a float:left; for each.

howardgreet

Posts: 4
Joined: Tue Apr 12, 2011 10:29 am

E-mail howardgreet

--
Jumpstart your fitness and know how to get better results with perfit personal training

Re: Help with 3-column CSS

by fishtoon » Thu May 19, 2011 5:52 am

Hello rswebs, You may see the tutorial for 3-column CSS
http://www.lazywebdesign.com/cssdiv-3-column-page-layout/104

fishtoon

Posts: 2
Joined: Thu May 19, 2011 5:47 am

E-mail fishtoon

Re: Help with 3-column CSS

by akashtablet » Sat Jan 28, 2012 4:47 pm

Keep all your divs in float left position and make their width to 20% 60% 20% respectively. Now your all three divisions will be aligned to left. You can set the padding to keep the text separated from each other.

akashtablet

Posts: 50
Joined: Fri Jan 27, 2012 8:24 pm
Location: India

--
The computing and fun with click for Micromax fun book

Re: Help with 3-column CSS

by steveelkins » Mon Feb 27, 2012 10:50 pm

I have a hard time getting my padding set on my own website. It's a bit of trial and error when I do it. Is there an easier way to find out how much you need to edit it for the website to look nice? It takes me a dozen or more times to get the padding right and my girlfriend makes fun of me because I build websites for a living.

steveelkins

Posts: 12
Joined: Mon Feb 27, 2012 8:42 am

E-mail steveelkins

--
Is there a certain type of HTML I should be using when trying to create an e-commerce store that sells a survival seed bank supply? I want something that will help me to target gardeners that are interested in my product.

Re: Help with 3-column CSS

by XainPro » Tue Mar 06, 2012 7:55 pm

steveelkins wrote:I have a hard time getting my padding set on my own website. It's a bit of trial and error when I do it. Is there an easier way to find out how much you need to edit it for the website to look nice? It takes me a dozen or more times to get the padding right and my girlfriend makes fun of me because I build websites for a living.

steveelkins
Practice Make Men Perfect