Need help with CSS

[The Guardians08]

So i'm currently learning css from http://www.html.net/tutorials/css/lesson10.php, and it seems like the only way to make sure objects don't overlap eachother is by setting their positions as relative. Is there another way to do this? Because i'm trying to set up three columns on the main page of my 'website' but if i put enough text in one, it overlaps the other column instead of wrapping around to a new line like i thought it would.

[tremor77]

no, you can used 'fixed' and 'absolute' as well, just know you have to define them properly. I very rarely define and of the three at all.

for your three column layout you should remember that CSS stands for 'cascading' style sheets.. meaning they really are overlapping. I would make 2 div's inside of a wrapper.. define a static width.. float 1 div left, the other float right.. the content of the center column would actually be the content of the wrapper.

[The Guardians08]

Thanks for the idea. I'll try that out soon.

-- Sun Nov 27, 2011 7:23 am --

I tried your idea and it works well except when i add a new line of text in the middle column or 'wrapper', the other two floated columns get pushed down.

[tremor77]

try something like this then..

html -

Code: Select all

<div id="wrapper">
   <div id="header">
      HEADER
   </div>
   <div id="container">
      <div id="side-a">
         SIDE A
      </div>
      
      <div id="content">
         CONTENT
      </div>
      
      <div id="side-b">
         SIDE B
      </div>
   </div>
   <div id="footer">
      FOOTER
   </div>
</div>


and your CSS

Code: Select all

#wrapper {
   text-align: left;
   margin: 0px auto;
   padding: 0px;
   border:0;
   width: 700px;
}

#header {
   margin: 0 0 15px 0;
}

#side-a {
   float: left;
   width: 150px;
}

#side-b {
   float: right;
   width: 150px;
}

#content {
   float: left;
   width: 56%;
}

#footer {
   clear: both;
}


should do the trick, also gives you a header and a footer