Forum Moderators: not2easy

Message Too Old, No Replies

new to CSS: help with positioning divs

trying to create 3 column layout for a site

         

jbercute1007

8:37 pm on Aug 13, 2008 (gmt 0)

10+ Year Member



Hello, this is my first post, but Im excited to join! Im in the process of trying to create a site with a 3 column layout. First (left) and third (right) columns will have space for ads of companies that will support the site. These will be a fixed width of about 300px. The left column will begin at the left margin of the page. The second (middle) column will be in the center of the page and will contain most of the information for the site. I want the site to stretch the entire width of the screen depending on the users resolution and screen size if possible. Can this be done?
Also, how do I position the right column to start at the end of the center columns information? Ive tried using float but Im not sure if that is the right route to go. Like I said Im new to this so this is probably a simple question for most of you...please help! Thank you!

londrum

8:59 pm on Aug 13, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



there are a few different ways of doing it, here's one of them...
this will only work if you can position each column with position:absolute (which is not always possible with some layouts)

make the left and right columns 300px wide, and make the center column 100% wide -- but give it 300px of padding each side so it doesn't overlap the others.

#col1 {
position: absolute; top: 0; left: 0; width: 300px;
}

#col2 {
position: absolute; top: 0; left: 0; width: 100%;
padding-left: 300px; padding-right: 300px;
}

#col3 {
position: absolute; top: 0; right: 0; width: 300px;
}

4css

9:33 pm on Aug 13, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Jbercute0007

Welcome to WebmasterWorld!

Try a search on google, there are several sites out there that have different templates on them that you can use.

As Londrum stated, there are several ways in which you can do this.

Search css fixed width layouts. You'll most likely run into tutorials as well, though you can search for those also.

If you are new to css, you might want to look in the Library [webmasterworld.com] as well as do the google search.

Good luck, and once again, welcome!

Marshall

9:52 pm on Aug 13, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



jbercute1007, welcome to WebmasterWorld.

I want the site to stretch the entire width of the screen
depending on the users resolution and screen size if possible.

I (personally) would caution against this. Depending on the amount of content, your page may become very difficult to read on a wide screen, e.g. => 1400px. If you do some research, I believe you will find that the current most popular width is about 1024px.

Marshall