468,316 Members | 2,136 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

Making my page 3 column CSS

TheServant
1,168 Expert 1GB
Hey guys,
I am trying to get my page to be 3 columns, with a liquid center one.

The CSS concerned is:
Expand|Select|Wrap|Line Numbers
  1. div.container {
  2.     width: 100%;
  3.     margin: 0 auto;
  4.     border: 0px;
  5. }
  6. div.center_content {
  7.     background-color:#0033FF;
  8.     position: relative;
  9.     left: 200px;
  10.     float: left;
  11. }
  12. div.left_content {
  13.     background-color:#770000;
  14.     width: 200px;
  15.     left: 0;
  16.     position: relative;
  17.     float: left;
  18. }
  19. div.right_content {
  20.     background-color:#7733FF;
  21.     width: 200px;
  22.     right: 0;
  23.     position: relative;
  24.     float: right;
The html:
[HTML]<div class="container">
<div class="left_content">
<p>Left Content</p>
<some code />
</div>
<div class="center_content">
<p>Center Content</p>
<some code />
</div>
<div class="right_content">
<p>Right Content</p>
<some code />
</div>
</div>[/HTML]

Basically I want the middle column to fill all the space between the left and right (fixed-width) columns, but I can't seem to get the CSS right for center_content.
Mar 12 '08 #1
7 1252
harshmaul
490 Expert 256MB
Your always going to get this problem unless you use fixed sizes for everything.

Either use pixels as the measure or percent. not both.


heres two style for youto see what i mean

Expand|Select|Wrap|Line Numbers
  1. div.container {
  2.     width: 800px;
  3.     margin: 0 auto;
  4.     border: 0px;
  5. }
  6. div.center_content {
  7.     background-color:#0033FF;
  8.     width: 600px;
  9.     float: left;
  10. }
  11. div.left_content {
  12.     background-color:#770000;
  13.     width: 200px;
  14.     float: left;
  15. }
  16. div.right_content {
  17.     background-color:#7733FF;
  18.     width: 200px;
  19.     float: left;
  20. }

Expand|Select|Wrap|Line Numbers
  1. div.container {
  2.     width: 100%;
  3.     margin: 0 auto;
  4.     border: 0px;
  5. }
  6. div.center_content {
  7.     background-color:#0033FF;
  8.     width: 60%;
  9.     float: left;
  10. }
  11. div.left_content {
  12.     background-color:#770000;
  13.     width: 20%;
  14.     float: left;
  15. }
  16. div.right_content {
  17.     background-color:#7733FF;
  18.     width: 20%;
  19.     float: left;
  20. }
Mar 12 '08 #2
TheServant
1,168 Expert 1GB
This guy has done it, but I want to know why you need all the container div's:
Holy Grail 3

His CSS goes like:
Expand|Select|Wrap|Line Numbers
  1. .holygrail {
  2. background:#FFFF99 none repeat scroll 0%;
  3. }
  4. .holygrail .colmid {
  5. background:#FFFFFF none repeat scroll 0%;
  6. float:left;
  7. margin-left:-200px;
  8. position:relative;
  9. right:100%;
  10. width:200%;
  11. }
  12. .holygrail .colleft {
  13. background:#FFD8B7 none repeat scroll 0%;
  14. float:left;
  15. left:400px;
  16. margin-left:-50%;
  17. position:relative;
  18. width:100%;
  19. }
  20. .holygrail .col1wrap {
  21. float:left;
  22. padding-bottom:1em;
  23. position:relative;
  24. right:200px;
  25. width:50%;
  26. }
  27. .holygrail .col1 {
  28. left:200%;
  29. margin:0pt 215px;
  30. overflow:hidden;
  31. position:relative;
  32. }
  33. .holygrail .col2 {
  34. float:right;
  35. position:relative;
  36. right:15px;
  37. width:170px;
  38. }
  39. .holygrail .col3 {
  40. float:right;
  41. left:50%;
  42. margin-right:45px;
  43. position:relative;
  44. width:170px;
  45. }
His html:
[HTML]<div class="colmask holygrail">
<div class="colmid">
<div class="colleft">
<div class="col1wrap">
<div class="col1">
{..code..}
</div>
</div>
<div class="col2">
{..code..}
</div>
<div class="col3">
{..code..}
</div>
</div>
</div>
[/HTML]
Mar 12 '08 #3
drhowarddrfine
7,435 Expert 4TB
Though CSS is the best way to layout a page, when you go for general-purpose and ultimate flexibility, everything must be accounted for. And when you have to include all the "IE fixing", the markup can get pretty big.

iow, a baby's gotta do what a baby's gotta do! (Who can tell me what that line is from?) :)
Mar 12 '08 #4
harshmaul
490 Expert 256MB
sounds like something tommy would say from rugrats.
Mar 12 '08 #5
drhowarddrfine
7,435 Expert 4TB
Your favorite show, too?! :)
Mar 12 '08 #6
TheServant
1,168 Expert 1GB
OK, so all that is necessary. I thought so, but hoped I could find a way to get by the fixes. Thanks for you help guys.
Mar 12 '08 #7
Markus
6,050 Expert 4TB
Your favorite show, too?! :)
I absolutely hated angelica.
Always thwarting tommy n the gangs plans.
>=[
Mar 12 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Nathan | last post: by
4 posts views Thread by Stephan Bour | last post: by
2 posts views Thread by Michael | last post: by
26 posts views Thread by meltedown | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.