How come my picture is clinging to the bottom of the container?

I am facing an issue where my "vertical rule" is sticking to the bottom of the container when placed to the right of the image.

<div>
    <div style="display:inline-block; width:210px;">
        <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
    </div>
    <div style="display:inline-block; width:12px;">
        <div style="height:450px; width:0px; border:1px solid #000; margin:5px; margin-top:0px;"></div>
    </div>
</div>

Is there a way I can achieve this layout while ensuring the image stays at the top?

htmlcss

Answer №1

By default, inline-block elements are positioned at the baseline. To change this, add vertical-align:top to your divs.

<div>
   <div style="display:inline-block;vertical-align:top; width:210px;">
      <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
   </div>
   <div style="display:inline-block;vertical-align:top; width:12px;">
      <div style="height:450px; width:0px; border:1px solid #000; margin:5px; margin-top:0px;"></div>
   </div>
</div>

Answer №2

If you're looking for a quick fix to align elements side-by-side, consider using floats. However, if you need an immediate solution, simply include vertical-align:top in the button div:


...
<div style="display:inline-block; width:210px; vertical-align: top;">
    <img src="res/img/PlayBtn.png" style="top:-100px; padding:5px;">
</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

Leverage jQuery to retrieve information and fill in an HTML form

Seeking assistance with retrieving data based on a dropdown selection change. Specifically, choosing an Item ID from the dropdown and then populating textboxes and other dropdowns with values from the database. The other dropdowns already have assignment o ...

phpjqueryhtmlsqldrop-down-menu

What is the correct way to accurately determine the width of a block being displayed with the flex-direction:column property?

For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...

javascriptcssflexbox

Display the Ajax response in a designated div

I am facing an issue with my ajax code. It doesn't print any output, but when I use alert() to print the output, it shows up fine. $(".grp-ans").each(function(e){ $.ajax({ type: 'POST', url: 'show-answ ...

jqueryhtmlajax

Is the sequence of CSS styles important in styling web content?

I'm a newcomer to this field and recently encountered an issue with my div styling. My code was compatible with Chrome 11 but did not render properly in Firefox 4, Opera 11.1, and IE 8. Upon review, I found that the style for the div was as follows, a ...

csslayouthtml

Achieving a scrollable div with ng-repeat

I have implemented ng-repeat to showcase some messages, and I am attempting to create a scrollable "message_area" as the messages overflow naturally over time. However, my current code is not delivering the desired outcome. <div class="main_area"> ...

javascripthtmlcssangularjs

I am having trouble with the functionality of my bootstrap navbar toggler

Can you please review the code and help me identify the issue? The toggle button is not functioning properly, it should display the menu bar when clicked. <body> <!--navigation bar--> <nav class="navbar navbar-expand-sm navbar-dark bg-dan ...

htmlcssbootstrap-4togglenavbar

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

I am facing an issue with three multi-select dropdown lists. When a user selects options from these lists and then presses the submit button, the selected text should display in a textarea. However, if the user manually changes some text in the textarea ...

javascripthtmljqueryasp.netmodel-view-controller

Aligning a left-positioned div with a right-aligned div within a container

I'm trying to replicate this layout: https://i.stack.imgur.com/mUXjU.png Here is the HTML code I have so far: <div class="container"> <div class="floatingLeft">A right-aligned div</div> <div class="a">Lorem Ipsum< ...

htmlcssalignment

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

javascripthtmlcss

Incorporate SCSS capabilities into a Vue project

The default content of my packages.json file includes the following: "postcss": { "plugins": { "autoprefixer": {} }} Whenever I try to compile using <style lang='scss'>, it doesn't work automatically like it does for Typescript. I ...

cssvue.jsnpmwebpacksass

Can you reveal a table with the click of a button?

Hi there! I'm a newcomer to the world of Ruby on Rails and I’m currently working on creating a page that includes a date field. Once a specific date is selected, I’d like to generate a table displaying reports from that chosen date. controllers/r ...

htmlruby-on-railsmodel-view-controllerruby-on-rails-5

The functionality of jQuery Revolution Slider becomes compromised when integrated with ember.js

Initially, the jQuery Revolution Slider on the website functions properly. However, when navigating to a different route and returning to the home/index page where the slider is located, it malfunctions. <script type='text/x-handlebars' data- ...

jqueryhtmlember.jsrevolution-slider

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

javascripthtmlcss

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

html

What is the best method to extend my borders to the very edge?

Struggling with table borders extending to the edge on a website using master pages and CSS stylesheet. This issue requires some troubleshooting, so any help would be appreciated. The problematic website is here. I need the border under the banner menu to ...

htmlasp.netcss

What is the best way to integrate a ttf custom font into my Rails application?

Despite following the instructions in this thread, I am unable to achieve the same results. main.css h1 { font-family: 'Shadows Into Light', serif; src: url('/assets/fonts/shadows.ttf') format("Shadows Into Light"); font-size: 4 ...

cssruby-on-railsfonts

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

cssnavbarbootstrap-5collapsable

unable to locate text within tag a using javascript

I developed JavaScript code to search for tags within an accordion. function tagSearch(){ let keyword = document.getElementById('find').value.toUpperCase(); let items = document.querySelectorAll('.accordion'); let links = document ...

javascripthtmlbootstrap-5

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

I am encountering an issue with the drop-down image element. I have attempted various methods to select the element, but none of them seem to be working. This may be due to the fact that both elements are identical and their IDs are dynamic. I did manage ...

javahtmlseleniumselenium-webdriver

How can I prevent an endless loop in jQuery?

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css ...

javascriptjquerycssanimation