Css layout help - 3 column footer

Css layout help - 3 column footer

I'm trying to get the footer in my site to look like this:

  Wilgrove Baptist Church             Home | About | Ministries            1234 S. Main st.  John G. Smith, Sr. Pastor              Contact Us | Site Map           somwhere, ID 55555  

My problem is getting it laid out into the 3 columns. Any suggestions?

Thanks!

Answer by alex for Css layout help - 3 column footer

Try this:

left
  
center
  
right
  

You can adjust the padding, etc. accordingly.

Answer by George Stocker for Css layout help - 3 column footer

Here are a list of three column CSS layouts. Alistapart.com also has an article on it.

I'd recommend reviewing the 'Three Column CSS layouts' list; each link goes into detail about what it looks like from a 'Newspaper Layout' standpoint, as well as the advantages and disadvantages of each. I used it for a three column layout for the site I'm maintaining.

Answer by Jayx for Css layout help - 3 column footer

Quite easily done using floats:

      
Left aligned text here
Next line here
      
Right aligned text here
Next line here
      
Center Text here
Next line here
  
  

and the CSS:

.left{  text-align:left;  float:left;  }  .right{  float:right;  text-align:right;  }  .centered{  text-align:center;  }  

Answer by Xanthir for Css layout help - 3 column footer

  
    
foo
    
bar
    
baz
  
    #footer { display: table; width: 100%; table-layout: fixed; }  #footer > div { display: table-cell; }  

This won't work in IE 7 and prior, though. In that case I recommend serving them (through IE conditional comments) markup similar to alex, where you use simple floats. These won't center properly, but they'll certainly work, and as people upgrade to IE8 or a better browser they'll automatically upconvert to the display:table solution.

Answer by unigogo for Css layout help - 3 column footer

3 column layout generator

Answer by Tabetha Moe for Css layout help - 3 column footer

Actually, the text-align code works other than the fact that you have the text angling toward the end. To fix this, simply apply a margin-top negative value to line up with the left text. Take a look...

#left {      text-align:left;  }    #right {      text-align:right;      margin-top:-35px;  }    #center {      text-align:center;      margin-top:-35px;  }  

Answer by Daze for Css layout help - 3 column footer

To have three columns of almost equal width:

HTML:

      
First section, first line of text
 Second line of text
      
Second section, first line of text
 Second line of text
      
Third section, first line of text
 Second line of text
  
  

CSS:

#footer > p:first-child {      float: left;      text-align: left;      width: 33.3%; }    #footer > p:nth-child(2) {      float: left;      text-align: center;      width: 33.4%; }    #footer > p:last-child {      float: right;      text-align: right;      width: 33.3%; }  

Compared to Jayx's answer, I've simplified the markup and used different selectors in the stylesheet.

Read more about fractional percentage lengths.

Answer by shea for Css layout help - 3 column footer

I used the following code on my own site.

HTML:

      
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.      
        
          Aenean elit ante, ultrices ac vestibulum id, tempor id nisi.      
        
          Integer tincidunt, sem at placerat ullamcorper, urna felis condimentum justo.      
  
  

CSS:

footer [class ^= 'footer-'] {      width: 33.3333%;      display: inline-block;      text-align: center;  }    footer .footer-left {      float: left;  }    footer .footer-right {      float: right;  }  

All content will be center-aligned because that's what I wanted. You can easily change this, though.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72