3 Column webpage in CSS

  • kentga
  • Newbie
  • Newbie
  • kentga
  • Posts: 9

Post 3+ Months Ago

I have FINALLY got three columns going - but I cannot seem to control the location of size of my text in the columns

Code: [ Select ]
<style type="text/css">
body {background-color: blue; color: white;}

.heading {
 text-align: center;
 margin-top: 0px;
 margin-bottom: 0px;
 display: block;
 margin-left: auto;
 margin-right: auto;
 color: white;
 background-color:dark blue;
 font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
}
#nav {
margin-top: 0px;
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
padding:5px;
margin:0px;
background-color:#000080;
color:#fff;
border-bottom: 1px solid #6F8C8F;
}

#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}

#container3 {
  float:left;
  width:100%;
  background:#6996AD;
  overflow:hidden;
  position:relative;
}
#container2 {
  float:left;
  width:100%;
  background:white;
  position:relative;
  right:30%;
}
#container1 {
  float:left;
  width:100%;
  background:#42647F;
  position:relative;
  right:40%;
}
#col1 {
  float:left;
  width:26%;
  position:relative;
  left:72%;
  overflow:hidden;
}
#col2 {
  float:left;
  color: black;
  width:36%;
  position:relative;
  left:76%;
  overflow:hidden;
}
#col3 {
  float:left;
  width:26%;
  position:relative;
  left:80%;
  overflow:hidden;
}

</style>


<div class="heading">
<div style='background-color: blue; width: 100%;'>
    <img src="pics/title122207.jpg" alt="url" />
   </div>
</div>  
 
 <div id="nav">
|<a href="http://"url">members</a>|
|<a href="http://"url">join</a>|
 |<a href="mailto:">contact</a>|
  </div>

<div id="container3">
  <div id="container2">
    <div id="container1">
      <div id="col1">Column 1 thuis is a test to see how <br>
      this goes</div>
      <div id="col2">Column 2</div>Test for this
      <div id="col3">Column 3</div>
    </div>
  </div>
</div>
</body>
</html>
  1. <style type="text/css">
  2. body {background-color: blue; color: white;}
  3. .heading {
  4.  text-align: center;
  5.  margin-top: 0px;
  6.  margin-bottom: 0px;
  7.  display: block;
  8.  margin-left: auto;
  9.  margin-right: auto;
  10.  color: white;
  11.  background-color:dark blue;
  12.  font-family: Helvetica, Geneva, Arial,
  13. SunSans-Regular, sans-serif;
  14. }
  15. #nav {
  16. margin-top: 0px;
  17. font-family: Verdana, Arial, sans-serif;
  18. font-size: 18px;
  19. padding:5px;
  20. margin:0px;
  21. background-color:#000080;
  22. color:#fff;
  23. border-bottom: 1px solid #6F8C8F;
  24. }
  25. #nav a {
  26. color:#fff;
  27. text-decoration:none;
  28. }
  29. #nav a:hover {
  30. text-decoration:underline;
  31. }
  32. #container3 {
  33.   float:left;
  34.   width:100%;
  35.   background:#6996AD;
  36.   overflow:hidden;
  37.   position:relative;
  38. }
  39. #container2 {
  40.   float:left;
  41.   width:100%;
  42.   background:white;
  43.   position:relative;
  44.   right:30%;
  45. }
  46. #container1 {
  47.   float:left;
  48.   width:100%;
  49.   background:#42647F;
  50.   position:relative;
  51.   right:40%;
  52. }
  53. #col1 {
  54.   float:left;
  55.   width:26%;
  56.   position:relative;
  57.   left:72%;
  58.   overflow:hidden;
  59. }
  60. #col2 {
  61.   float:left;
  62.   color: black;
  63.   width:36%;
  64.   position:relative;
  65.   left:76%;
  66.   overflow:hidden;
  67. }
  68. #col3 {
  69.   float:left;
  70.   width:26%;
  71.   position:relative;
  72.   left:80%;
  73.   overflow:hidden;
  74. }
  75. </style>
  76. <div class="heading">
  77. <div style='background-color: blue; width: 100%;'>
  78.     <img src="pics/title122207.jpg" alt="url" />
  79.    </div>
  80. </div>  
  81.  
  82.  <div id="nav">
  83. |<a href="http://"url">members</a>|
  84. |<a href="http://"url">join</a>|
  85.  |<a href="mailto:">contact</a>|
  86.   </div>
  87. <div id="container3">
  88.   <div id="container2">
  89.     <div id="container1">
  90.       <div id="col1">Column 1 thuis is a test to see how <br>
  91.       this goes</div>
  92.       <div id="col2">Column 2</div>Test for this
  93.       <div id="col3">Column 3</div>
  94.     </div>
  95.   </div>
  96. </div>
  97. </body>
  98. </html>
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

It would be easier to control the text if you threw it into its own div or even if you put it in paragraph tags. Just giving you another way to control it.

Also if you are having trouble with the layout you might want to start with one from http://www.dynamicdrive.com/style/layouts/category/C10/ or http://www.code-sucks.com/css%20layouts/

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.