CODEWITHSUNDEEP
csshtml
Johnny Hankgard
Johnny Hankgard

Reputation: 469

footer using nested divs

i am trying to add a footer to my website but the text keeps moving around.

<div id="footer">
  <div id="footerchild">
    <a href=".html">1</a>
  </div>
  <div id="footerchildone">
    <a href=".html">2</a>
  </div>
  <div id="footerchildtwo">
    <a href=".html">3</a>
  </div>
  <div id="footerchildthree">
    <a href=".html">4</a>
  </div>
</div>

and the css 

#footer {
  margin-left: 100px;
  background: #812;
  box-shadow: 1px 2px 40px 1px #444;
  border: 1px solid black;
  width: 1040px;
  height: 300px;
  position: absolute;
}

#footerchildone {
  float: right;
  margin-right: 500px;
  margin-top: -22px;
}

#footerchildtwo {
  float: right;
  margin-right: 350px;
  margin-top: -22px;
}

#footerchildthree {
  float:right;
  margin-top: -22px;
  margin-right: -250px;
}

I want each column to be centrated with a specific distance, but when i move for instance childthree, the second child follows with it. It shouldnt be like that because i have given each of them a separate div. What is the problem?

Upvotes: 0

Views: 364

Answers (3)

Gopikrishna
Gopikrishna

Reputation: 857

You need to add text-align:center to center the text for parent div and make every child div as position:relative; display:inline-block; automatically it will align center for parent div and make sure to remove float:right for child divs. hope this will work for you.

Upvotes: 0

CSS Guy
CSS Guy

Reputation: 1984

http://jsfiddle.net/vvjAJ/

HTML

<div id="footer">
<div id="footerchild"><a href=".html">1</a></div>
<div id="footerchildone"><a href=".html">2</a></div>
<div id="footerchildtwo"><a href=".html">3</a></div>
<div id="footerchildthree"><a href=".html">4</a></div>
</div>

HTML

#footer
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;}
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;}
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}

Upvotes: 0

markvandencorput
markvandencorput

Reputation: 931

I think u are trying to accomplish this:

http://jsfiddle.net/65GaS/5/

It's that simple or I misunderstood you.

Upvotes: 1

Related Questions