Need help with CSS

Need help with CSS

Post by The Guardians08 on Sat Nov 26, 2011 11:44 am
([msg=63059]see Need help with CSS[/msg])

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.
int foo + int bar = int baz
The Guardians08
New User
New User
 
Posts: 14
Joined: Sat Mar 12, 2011 10:10 am
Blog: View Blog (0)


Re: Need help with CSS

Post by tremor77 on Sat Nov 26, 2011 8:10 pm
([msg=63066]see Re: Need help with CSS[/msg])

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.
Image
User avatar
tremor77
Contributor
Contributor
 
Posts: 896
Joined: Wed Mar 31, 2010 12:00 pm
Location: New York
Blog: View Blog (0)


Re: Need help with CSS

Post by The Guardians08 on Sat Nov 26, 2011 11:10 pm
([msg=63069]see Re: Need help with CSS[/msg])

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.
int foo + int bar = int baz
The Guardians08
New User
New User
 
Posts: 14
Joined: Sat Mar 12, 2011 10:10 am
Blog: View Blog (0)


Re: Need help with CSS

Post by tremor77 on Mon Nov 28, 2011 10:12 am
([msg=63095]see Re: Need help with CSS[/msg])

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
Image
User avatar
tremor77
Contributor
Contributor
 
Posts: 896
Joined: Wed Mar 31, 2010 12:00 pm
Location: New York
Blog: View Blog (0)



Return to General design

Who is online

Users browsing this forum: No registered users and 0 guests