SitePoint Sponsor |
|
User Tag List
Results 1 to 18 of 18
-
Jun 13, 2003, 07:40 #1
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Creating three column layout with CSS
Hello,
Can someone please help me figure out how to code a simple three column based layout with CSS? I've been attempting to do this for a couple days now (yes I'm new to most of this, but not stupid), and I have only been able to make small adjustments to my layout.
This is what I'm looking for.
Code:______________ | | | | |---------------------| | | | | | | | | | | | | -----------------------
If anyone can help me with this it would be greatly appreciated.
Jason Baker
www.potatopimps.com
-
Jun 13, 2003, 07:45 #2
- Join Date
- Aug 2000
- Location
- Thailand
- Posts
- 4,810
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
I've added "code" tags to your post so it looks a little better
.
Could you show us what you've got so far Jason? It would be far better to show you where you've gone wrong than just "give" a solution....~The Artist Latterly Known as Crazy Hamster~
922ee590a26bd62eb9b33cf2877a00df
Currently delving into Django, GIT & CentOS
-
Jun 13, 2003, 07:50 #3
- Join Date
- Aug 2000
- Location
- Thailand
- Posts
- 4,810
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
~The Artist Latterly Known as Crazy Hamster~
922ee590a26bd62eb9b33cf2877a00df
Currently delving into Django, GIT & CentOS
-
Jun 13, 2003, 07:54 #4
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for fixing my layout. Everything I have done (not much) is at www.potatopimps.com. Any ideas on what I'm doing wrong would be appreciated.
-
Jun 13, 2003, 09:42 #5
- Join Date
- Jun 2002
- Location
- Riding the electron wave
- Posts
- 372
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Yeavis
What are you trying to achieve?Ducharme's Axiom: "If you view your problem closely
enough, you will recognize yourself as part of the problem."
-
Jun 13, 2003, 16:27 #6
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
top, left, right.
Header, Navigation, Content. Header being on the top, navigation being underneath the header to the left, and content being to the right of navigation. Understand? I'm not sure what I'm doing wrong, maybe I'm missunderstanding this whole CSS stuff.
-
Jun 13, 2003, 16:38 #7
3 columns would be left, center, and right.
Your navigation is top, left, right. Here's a proposed fix:
CSS:
Code:#top { height: 40px; } #left { width: 20%; float: left; } #right { width: 80%; float: left; }
HTML Code:<body> <div id="top"> <p>Top header</p> </div> <div id="left"> <p>Left navigation</p> </div> <div id="right"> <p>Content goes here!</p> </div> </body>
-
Jun 13, 2003, 17:19 #8
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What about if I wanted to have a fixed width site. For example, right now the site is set as 760px wide. I want the left nav to be 150px wide, and the content portion to be 610px wide. I'm not wanting to use %'s because they look weird.
-
Jun 13, 2003, 17:23 #9
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
go to this page: http://www.potatopimps.com/home/index_new.asp
-
Jun 13, 2003, 17:34 #10
Originally Posted by Yeavis
Code:#top { width: 760px; height: 40px; } #left { width: 150px; float: left; } #right { width: 610px; float: left; }
-
Jun 13, 2003, 17:35 #11
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for all your help. I know this is stupid basic stuff, but I just couldn't get it to work. However, now it seems to be working just fine. Thanks again..
-
Jun 14, 2003, 16:53 #12
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here's another question for you. How can I vertically align text inside a box? If you go to the same webpage as before, you'll see a couple boxes that are aligned to the top. I would like the box that says (125X125) to automatically adjust to center from the top. Any help would be greatly appreciated.
-
Jun 14, 2003, 21:49 #13
- Join Date
- Feb 2003
- Location
- Linuxland
- Posts
- 2,788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Yeavis
-
Jun 15, 2003, 04:53 #14
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How can I center the whole page without messing up the layout? I've tried using {margin:0px auto;} but it screws everything up. Any suggestions would be appreciated.
-
Jun 15, 2003, 08:48 #15
- Join Date
- Feb 2003
- Location
- Linuxland
- Posts
- 2,788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Yeavis
-
Jun 15, 2003, 19:50 #16
- Join Date
- Mar 2003
- Location
- Boise
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Okay, I've made some changes to it and it doesn't break anymore. I don't think that the "about us" link will be out of wack anymore, but I only have a few browsers to check it with.
-
Jun 17, 2003, 00:09 #17
- Join Date
- May 2003
- Location
- barcelona
- Posts
- 68
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
float center
here's a little something to help you float center.
Code:body { margin: 0; padding: 0px; background-color: #dcdcdc; /*background-image: url(../media/back_tile.gif);*/ font-size: 100% ; font-family: arial, helvetica, sans-serif; text-align:center; } #frame { background-color: #c0c0c0; margin-top:20px; margin-bottom:20px; margin-right: auto; margin-left: auto; text-align: left; /* Overrides inherited centered value from body */ width: 750px; }
I don't much like designs glued to the top left of the window.
You need to put all your content inside of a div with id="frame"Daiv Mowbray twincascos Barcelona
wordpress pluginswp-superslider.com
portfolio portfolio.daivmowbray.com
personal blogwww.daivmowbray.com
-
Jun 17, 2003, 09:52 #18
- Join Date
- Feb 2003
- Location
- Linuxland
- Posts
- 2,788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Yeavis
Bookmarks