Page 1 of 1

Need help with CSS

PostPosted: Sat Nov 26, 2011 11:44 am
by 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.

Re: Need help with CSS

PostPosted: Sat Nov 26, 2011 8:10 pm
by 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.

Re: Need help with CSS

PostPosted: Sat Nov 26, 2011 11:10 pm
by 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.

Re: Need help with CSS

PostPosted: Mon Nov 28, 2011 10:12 am
by 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