Comprehending the positioning of elements enclosed within a parent <div> tag

I'm struggling to understand why:

  1. vertical-align - isn't behaving as expected in this scenario, even though the elements are aligned along a baseline and are inline elements. I've experimented without using float but that didn't solve the issue. What am I overlooking?

  2. How are <a>'s positioned within this DIV?

  3. I'm brainstorming a layout idea and trying to figure out how to position <a>'s (specifically those with icons) below the <a>'s with the logo-main class. I attempted changing the display property of <a>'s to block, but they still did not move below. Any insights on how to achieve this using CSS?

https://i.stack.imgur.com/MFG8Q.jpg

.back-green {
  max-width: 600px;
  margin: auto;
}

.logo-main {
  padding: 10px;
  font-size: 40px;
}

.fa-book,
.fa-compact-disc {
  font-size: 150%;
  padding-top: 5px;
}

.rr {
  float: right;
  padding: 11px;
}
<div class="back-green">
  <a class="logo-main">BOOKS&DVD</a>
  <a class="rr"><i class="fas fa-compact-disc shad-logo2 "></i></a>
  <a class="rr"><i class="fas fa-book shad-logo2 va"></i></a>
</div>

htmlcss

Answer №1

Based on the screenshot you provided, it seems like you want to have these two icons positioned under your logo. Currently, they are aligning with the right side of the logo.

The reason for this is because you applied a float:right property to the logo elements.

I have removed this and made some changes to the structure.

If this is not what you intended, please let me know where exactly you would like these icons to be placed.

1. Why doesn't the vertical-align property work in this case when the elements are inline? I tried removing float but that didn't solve the issue. What am I missing here?

The vertical-align property aligns inline elements with each other, not within their container.

  1. How are anchor tags positioned inside this DIV element?

By default, elements retain the position based on where they are located in the code and their display type (block or inline). If no float property is assigned, multiple anchor tags will appear side by side. Adding float-right will make them float to the right.

  1. In this scenario, the icons won't move below the logo due to the float-right property. Both anchors have float-right, so they will always align to the right regardless of the display setting.

.back-green {max-width: 600px; margin: auto;}
.logo-main {padding: 10px; font-size: 40px;}
.fa-book, .fa-compact-disc {font-size: 150%; padding-top: 5px;}
.rr {padding: 11px;}  
.text-center {text-align:center;}
<div class="back-green">
      <div class="text-center"><a class="logo-main">KSIAZKI&DVD</a></div>
      <div class="text-center"><a class="rr"><i class="fas fa-compact-disc shad-logo2 ">Flopy</i></a>
      <a class="rr"><i class="fas fa-book shad-logo2 va">CD</i></a></div>
    </div>

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

Incorporating Copyleaks SDK into Angular: A Seamless Integration

Currently, I'm in the process of implementing the Copyleaks SDK with Angular to conduct plagiarism checks on two text area fields within an HTML form. Within the form, my goal is to incorporate two buttons: one to check for plagiarism on one text area ...

htmlangularplagiarism-detectioncopyleaks-api

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

javascriptjquerycss

The click event fails to trigger while trying to parse external HTML

Currently, I am working on a project that requires me to load HTML from an external file and insert it into an existing div element. Although the process is successful overall, I have encountered an issue where the .click() events do not trigger when click ...

javascriptjqueryhtml

Switch out a visual element for Dropzone.js

During my recent project, I utilized Dropzone.js for image uploads. However, I am now interested in transforming the dropzone area into an actual image. For instance, if there is a "featured image" attached to an article, users should be able to drag and ...

javascriptimagecssimage-uploadingdropzone.js

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

jqueryhtmlcss

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Revamp the website's design

I am looking to revamp the color theme of my website with just a click of a button. Can someone provide me with a link to a reference website where I can get some inspiration? ...

javascriptcssajax

Does Dominate library for Python have a feature akin to .replace() function?

I have a specific task where I need to extract text from a .txt file, add HTML tags, and then save the content as HTML. My goal is to identify certain words within the text and wrap them in anchor tags for styling purposes. Here is an example of what I am ...

pythonhtmlreplacetext-filesdominate

How can we best understand the concept of custom directives using the link method?

As a beginner in AngularJS, I am looking to implement an autocomplete feature for text input. My JSON data is stored in JavaScript and I need help simplifying the process. Can you provide me with a straightforward solution? The specific requirement is to ...

javascripthtmlangularjs

Ways to eliminate spacing from a bullet point in a list?

Is there a way to eliminate indentation from ul? I attempted adjusting margin, padding, and text-indent to 0, but with no success. It appears that setting text-indent to a negative value works - but is this the only solution for removing the indentation? ...

htmlcss

Image displayed in tooltip when hovering over

I have been experimenting with displaying an image in a tooltip when hovering over it. I came across a fantastic solution that suits my needs: Codepen CSS: @import "compass"; * { box-sizing: border-box; } .tooltip { position: relative; border-bo ...

jqueryhtmlcsstooltipmousehover

Error message: WebTorrent encountered an issue and was unable to pipe to multiple destinations at once

Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...

javascripthtmlnpmwebtorrent

Guide to customizing the CSS styles of various components within a Material UI Dialog

Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...

cssreactjsmaterial-ui

Is there a way to convert the structure of HTML/CSS into JSON format?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text ...

cssjsonhtml

Updating the content of a window without the need to refresh the page using JavaScript

Is there a way to navigate back to the previous window in chat_user without refreshing the entire page when the back button is clicked? Below is the code I have tried: <a href="" onclick="window.history.go(-1); return false;">back</a> ...

javascriptjqueryhtmlcss

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Hey there, I'm a beginner web developer currently working on a tree-based dropdown menu. Check out the documentation here To see it live in action, visit the example here I'm trying to adjust the height and width of the "Search/DropDown bar" in ...

cssreactjsreact-dropdown-tree-select

Animations with absolute positioning not rendering correctly in Safari

I recently created a basic animation that involves setting an element to "position: absolute" in order to translate it. Everything functions perfectly as intended on Chrome, however, when testing it on Safari, the absolute positioning seems to be completel ...

htmlcssgoogle-chromeanimationsafari

Troubleshooting: WordPress post not uploading to custom PHP file - Issue causing ERROR 500

Our website is built using WordPress, and I was tasked with adding a function to our newsletter subscription that sends an email to a specific address based on the selected value in the form. Everything was working perfectly on my local host, but when I tr ...

javascriptjqueryhtmlajaxwordpress

Tips on clearing notices and warnings at the bottom of a PHP questionnaire

Below is the code I am working with: <?php include_once 'init/init.funcs.php'; $_SESSION['pollid'] = (int) $_GET['pollid']; $questions = array(); if (!isset($_SESSION['answering'])) { $result = mysql_query ...

phphtmlmysqlundefined

An hour ago, the Python and Selenium code was functional, but now it has suddenly ceased to work

Hello to all fellow community members, I recently attempted to locate the next button in Google search, specifically on the bottom right corner. Here is the HTML code snippet that pertains to this: <td aria-level="3" class="d6cvqb" ...

pythonhtmlseleniumbuttonxpath