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

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

Is it possible to dynamically set the maximumSelectionLength in a select2 dropdown?

In my HTML, I have two select elements. One is for multiple selection of items in a dropdown and the other is for adding tags. If the number of selected items is 3, then users should only be allowed to add 3 tags - no more and no less. $(".js-example-b ...

javascriptjqueryhtmlselectjquery-select2

Adjust the height of the following column to match the responsive height of the initial column

Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply en ...

htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design

How can I stop iOS mobile browsers from automatically opening apps when I click on links?

Recently, I discovered an issue with my website when accessed on mobile (iOS). The links to external websites, such as Amazon product links, are causing the Amazon app to open instead of simply opening a new tab in the browser. The HTML code for these lin ...

javascriptjqueryhtmliosjquery-mobile

Should Chrome be allowed to have TABLE tags within P tags?

When testing the code below on Google Chrome: <p>Some words <table> ... </table> I noticed that the nesting under Chrome appears as html > body > p > table. It seems like there is a missing </p>, but according to HTML4, ...

html

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

experiencing difficulty with a background image that is failing to display

I'm having a hard time getting my background-image to show, even though I know it should be an easy fix. Here's the code for the div class where I want the background to display: .sun-face{ background-image: url("./images/Sun_face.svg"); } ...

javascripthtmlcss

Even with a correct XPath and the element present, Webdriver inexplicably throws a NoSuchElementException

There are 20 Google review score elements on a page like this. The XPath for each element is: //ol/div[2]/div/div/div[2]/div[%s]/div/div[3]/div/a[1]/div/div/div[2]/div/span To extract the review counts using Python and WebDriver: reviewCount = driver.f ...

pythonhtmldomxpathselenium-webdriver

The hamburger menu image is not appearing when using the CSS background-image property

The burger menu image I have as a background image is not displaying in my navigation bar or on the page. I set it to appear when the page is responsive (max-width: 480px), but it still doesn't show. I even tried copying the code to my main CSS above ...

htmlcss

MySQL unable to access information entered into form

After creating a new log in / register template using CSS3 and HTML, I now have a more visually appealing form compared to the basic one I had before. To achieve this look, I referenced the following tutorial: http://www.script-tutorials.com/css 3-modal-po ...

phpmysqlcssxhtml

How to Customize the Placeholder Text of a TextField

When working with the TextField API, I noticed that there is no mention of how to style the pseudo placeholder element of the input element. I want to customize the default styling of the placeholder text, but the usual CSS tricks don't seem to work ...

htmlcssmaterial-uijss

JavaScript and jQuery experiencing difficulty rendering proper style and image in output display

I am currently working on code that extracts information from a JSON variable and displays it on a map. The code looks like this: marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4> ...

javascriptjquerycss

Preserving form POST information between form handler and header invocation

I've hit a roadblock with this issue and could use some assistance. Thank you in advance for any help. I have a form on a page (guest/build.php) that contains several radio buttons: <form action="../php/build.php" method="POST"> <table class ...

phphtmlpost

Can styles be universally applied to specific elements or classes on a webpage by using hover on a single selector?

Is it possible, using only CSS and no JavaScript, to apply styles to specific elements or classes throughout an entire webpage without restrictions such as descendants or siblings, by hovering over a particular selector? For instance, I would like to remo ...

htmlcsscss-selectorshoverpseudo-class

CSS magic: Text animation letter by letter

I have a <div> with text. <div> to be revealed on the page one character at a time:</p> <div>, the animation should stop and display the full text instantly.</p> In summary, I aim to replicate an effect commonly seen in Jap ...

javascripthtmlcssanimation

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

Fluid image background failing to display properly in Firefox browser due to CSS compatibility issues

I'm currently working on implementing a fluid image background for one of my webpages. It's functioning perfectly in Chrome, but I can't seem to get it to work in Firefox. The goal is to have two squares with PNG images that resize proportio ...

htmlcssflexboxfluid-images

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain ...

jquerycssviewportexpand

jQuery 'if' condition not getting detected

My jQuery code is not recognizing an if statement. You can check out the CodePen link here. On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with t ...

jqueryhtmlcsstransition

Retrieving information from PHP using AJAX

As a newcomer to the world of AJAX, I am faced with the task of retrieving data from a PHP file and storing it in a JavaScript variable. Despite exploring several examples, I have not been able to find a satisfactory solution. Here is a simplified HTML cod ...

phpjavascripthtmlajax