By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,868 Members | 1,991 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,868 IT Pros & Developers. It's quick & easy.

Making my page 3 column CSS

TheServant
Expert 100+
P: 1,168
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
Share this Question
Share on Google+
7 Replies


harshmaul
Expert 100+
P: 490
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
Expert 100+
P: 1,168
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
Expert 5K+
P: 7,435
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
Expert 100+
P: 490
sounds like something tommy would say from rugrats.
Mar 12 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Your favorite show, too?! :)
Mar 12 '08 #6

TheServant
Expert 100+
P: 1,168
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
Expert 5K+
P: 6,050
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.