CSS: Child Div Fails to Override Parent Div

My current page's content header appears as follows:

However, I am aiming for something like this instead:

This is the HTML snippet related to that part of the page:

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

Here are my CSS styles for the relevant 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;
}

I need some guidance on what mistakes I might be making here in order to achieve the desired look.

EDIT: Also, why doesn't the text size inside the anchor element change to 100% as expected?

In an update: I have resolved the font-size issue by realizing that the 100% value is relative to the parent div, so to make the text smaller, I adjusted the anchor's font-size to 60%

csshtml

Answer №1

Modify

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

into

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

Fiddle available here.

Answer №2

Just as everyone has noted, it is essential to apply float:right; to the anchor link. The reason why using text-align: right; did not work is because an <a> element is inline, so its white space area does not extend like a block level element such as <p>, <div>.

Answer №3

To align an element to the right, use the CSS property float:right

You can achieve this by adding the following code:

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

See it in action

Answer №4

When it comes to the font-size, it's important to remember that you cannot override parent properties directly. To work around this, wrap MyTools in a <span> as shown below. You can also check out this FIDDLE for reference:

<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%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it that a label tag cannot be placed directly above an input tag?

On this particular page: http://getbootstrap.com/components/#input-groups-buttons If you modify the Go! button to a label (using Chrome inspector), you will observe that the Go! button is no longer positioned on top of the input field: https://i.sstatic ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to implement the Gotham-Light font using @font-face?

Looking to display Gotham-Light font on a website using CSS but lacking coding skills? I have the fonts Gotham-Light.eot and Gotham-Light.ttf. How do I go about using them in a browser? Thank you for your assistance! ...

htmlcssfont-face

prismjs plugin for highlighting code displays code in a horizontal format

If you're looking for a way to showcase source code on your website with highlighted syntax, prismjs.com may be just what you need. It offers a similar style to monokai... However, I've encountered an issue where the plugin displays my code in a ...

javascripthtmlcsstinymcecode-hinting

Flask does not display images in CSS files

Starting with the frontend (HTML, CSS) of my project, I then proceeded to create a Flask file with the following code: from flask import Flask, render_template app = Flask(__name__) @app.route("/", methods=["GET"]) def index(): return render_templa ...

pythonhtmlcssflask

Incorporate concealed image into HTML

When I perform actions with a couple of images, I encounter delays because the browser needs to load the images. For example, if I use $('body').append(''); everything works smoothly without any delays. However, when I try using style= ...

javascriptjqueryhtmlcsscaching

Prevent images from displaying on smaller screens by utilizing Bootstrap's responsive design

Here is a snippet of code that utilizes Bootstrap 4 to display text and images: <div class="container"> <div class="row"> <div class="col-xl-12"> <img src="~/img/img1.png" style="height:60.3px;width:750px" clas ...

csstwitter-bootstrapbootstrap-4responsive-design

The lower section of the scrollbar is not visible

Whenever the vertical scroll bar appears on my website, the bottom half of it seems to be missing. For a live demonstration, you can visit the site HERE (navigate to the "FURTHER READING" tab). HTML: <!DOCTYPE html> <html lang="en"> <h ...

javascriptjqueryhtmlcss

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Troubleshooting a display issue with Chrome's User Agent - Possible CSS solution?

After recently installing a WordPress theme, I am encountering an issue with a Facebook conversion box not displaying when accessing my site through Chrome. Interestingly, this problem does not occur when using Firefox. Upon inspecting the element in Chro ...

javascriptcssgoogle-chrome

The variable in the HTML input value is not fully visible when filling out the HTML form

I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...

pythonhtmlinputflask

Error during compilation due to a missing parenthesis in the loop structure

I've been experimenting with creating a carousel using just html and css, without any Javascript. I've been exploring resources on the web and following tutorials to achieve this goal. However, I've encountered an issue. I created a mixin l ...

cssloopscompilationless

Troubleshooting Safari's Issue with onclick() Functionality

I encountered an issue where the code was working perfectly on IE7 but not on Safari (5.0.5). I would like to find a solution without relying on jQuery. The ultimate goal is for this functionality to work seamlessly on iPad, but currently, I am testing it ...

javascripthtmlsafarionclick

How to Build a Bootstrap Table using PHP and JSON Data?

Trying to use json data like this https://i.sstatic.net/iRUUE.png {"endpoint":"127.0.0.1","id":1,"identifiers":["license:LICENSEKEY","xbl:XBLKEY","live:LIVEKEY","discord:DISCORDID&q ...

javascriptphphtmljsondatatables

Confirmation dialog with user-defined button text

When the confirm prompt box is used, it typically displays "ok" and "cancel" buttons. I am looking to customize the label text for the buttons to read as Agree and Not Agree instead. If you have any suggestions on how to achieve this modification, please ...

javascripthtml

Using HTML and CSS to evenly align text in individual sections

Is it possible to recreate the exact look and feel of a justified page from a book or article online using HTML/CSS? This would include replicating the text justification with precise line breaks and setting the outer wrapper width to match the min/max-wid ...

htmlcsstextrender

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

I recently attempted to place the JavaScript CDN at the top of my code, but unfortunately, it did not have the desired effect. My intention was to make the navigation bar on my website responsive and I utilized a toggler in the process. While the navbar di ...

javascripthtmlcssbootstrap-5

Regular expressions in Python do not function properly on text data

In my HTML file, I am using lxml and BeautifulSoup to convert it to text. However, I am encountering a problem with ill-formed HTML that I want to remove. I attempted to use a regular expression to match the problematic string, but it did not work as expec ...

pythonhtml

Using jQuery to Fade Out a DIV from multiple dropdown menus

Is there a way to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are reverted back to the original ("None") selection? Any help would be appreciated. Thank you. *I have successfully implemented thisDIV fadeIn() using "change" whenever ...

jqueryhtmlcssfadeout

There is a lack of a responsive page after being redirected from Facebook

Having an issue with responsiveness on my website at . When I access a webpage from the browser on my smartphone, the site is fully responsive. However, when I try to open it from a link in Messenger, it appears like the PC version shrunk down to fit a mob ...

htmlcss

Challenges with implementing TailwindCSS classes in a Next.js application

I've encountered some issues in my nextJS app with utilizing certain TailwindCSS classes such as top, left, or drop-shadow. Even after attempting to update Tailwind from version 1.9.5 to 3.3.3, I have not seen any changes. I believe that I am import ...

javascriptcssreactjsnext.jstailwind-css