CODEWITHSUNDEEP
csshtml
Zack
Zack

Reputation: 317

Child div not over-riding parent div in css

Currently, my page's content header looks like this: Unwanted Style of web page

But I would like the contents to look something like this: Wanted Style of web page

Here's the HTML involving that portion of the page:

<div class="header">My Tools<a href="#possess" class="anchor_link">View Tools you Possess</a></div>

And my CSS for the involved classes:

#content .header{
    font-size:180%;
    width:1000px;
    border-bottom:1px solid #000000;
}

#content .header .anchor_link{
    font-size:100%;
    text-align:right;
    text-decoration:none;
    color:#0059FF;
}

Can you explain what I'm doing wrong here, so that I can get by desired appearance?

EDIT: Also, why won't the text in the anchor go to 100% instead of 180%

For future reference: I solved the font-size problem, because the 100% is in reference to the parent div, so to make this text smaller, I changed the anchor's font-size to 60%

Upvotes: 1

Views: 100

Answers (4)

Milan and Friends
Milan and Friends

Reputation: 5610

About font-size you can't override parent properties so wrap MyTools in <span> like below, here's a FIDDLE

<div class="header"><span>My Tools</span><a href="#possess" class="anchor_link">View Tools you Possess</a></div>


.header {
  width:600px;
  border-bottom:1px solid #000000;
}

.header .anchor_link {
  font-size:100%;
  float:right;
  margin-top:14px;
  text-decoration:none;
  color:#0059FF;
}

.header span {
  font-size:180%;
}

Upvotes: 1

Subhajit
Subhajit

Reputation: 1987

As everybody has mentioned, you have to use float:right; on the anchor link, the reason that text-align: right; didn't worked is <a> is a an inline element, hence its white space area doesn't stretches like a block level element for e.g. <p>, <div>.

Upvotes: 2

codingrose
codingrose

Reputation: 15699

Change

#content .header .anchor_link{
    text-align:right;
}

to

#content .header .anchor_link{
    float:right;
}

Fiddle here.

Upvotes: 5

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

Use float:right

try this:

#content .header .anchor_link{
    font-size:100%;
    float:right;
    text-decoration:none;
    color:#0059FF;
}

DEMO

Upvotes: 1

Related Questions