What is the best way to connect this image and comments div using only CSS?

I'm trying to ensure the comments div is the same height as the image above so they can be aligned side by side. Below is my current code:

<div class="main_image_wrapper">
    <img class="main_image" src="*dynamic generated image*" style="margin:0 auto">
    <div class="comments_div">
        <h3>Comments</h3>
        <!--Code for comments-->
    </div>
</div>

Do I need to use javascript to achieve this, or is there a CSS solution? Also, how can I position the comments directly below the image, considering that the image width may vary?

https://i.sstatic.net/DjcQi.png

javascripthtmlcsstwitter-bootstraplayout

Answer №1

To create a sticky image and comments div using CSS positioning, wrap them in another div like this:

<div class="main_wrapper">
 <div class="sticky">
    <img class="main_image" src="*dynamic generated image*" style="margin:0 auto">
    <div class="comments_div">
        <h3>Comments</h3>
        <!--Code for comments-->
    </div>
</div> 
</div>

Then add styling to make the sticky div like so:

#sticky{
    position: -webkit-sticky;  
    position: sticky;
    top: 0; 
}

You can also make your div sticky with JavaScript/jQuery. Check out this link for a guide on how to do it using jQuery:

https://www.example.com/how-to-make-a-div-stick-using-jquery

Answer №2

Create a universal CSS style for both image and comment sections.

#dog img, #comment {
width:200px;
height :200px;
}
<div id="dog">
    <img src= "https://www.nationalgeographic.com/content/dam/animals/thumbs/rights-exempt/mammals/d/domestic-dog_thumb.jpg">
<div>
<div id="comment">
  Wow what a cute dog; Courtesy of Natgeo.
</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

Ways to update HTML values using Events

I am attempting to retrieve a value using Events (ionic) once it listens for my 'onSMSArrive' event. I am able to successfully retrieve the value from the events. However, I am encountering an issue where the value is not updating in my app. Bel ...

htmltypescriptionic2

Is there a way to set up a listener for a particular property of a recoil state object?

Is it possible to create a listener for a specific property within a state object? Let's look at an example: type ExampleAtomProperties = { id: number; description: string; }; const ExampleAtom = atom< ExampleAtomProperties>({ key: &quo ...

javascriptreactjsreact-hooksrecoiljs

Perplexed by this allusion

(function($) { $.vari = "$.vari"; $.fn.vari = "$.fn.vari"; // $.fn is the object where custom functions are added $.fn.DoSomethingLocal = function() { return this.each(function() { alert(this.vari); // output will be `undefined` ...

javascriptjquery

Flexbox search bar positioned above a set of flexbox buttons

In an attempt to replicate Google's search bar, the following code has been developed: <head> <title>Search</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link r ...

htmlcssflexboxcss-position

Output the keycode to the console repeatedly

I'm currently facing a minor mental obstacle: I have a javascript function embedded in html that displays the keycode when a key is pressed. It's connected to a function that provides detailed information about the character and keycode being pre ...

javascripthtmlkeyboard

What are some solutions for resolving the npm error code elifecycle issue?

After following the documentation, I successfully installed React JS but encountered an error when trying to run the app. The error code displayed was elifecycle npm err errno 1. Can someone please assist me in resolving this issue? Additionally, it's ...

javascriptnode.jsreactjsnpmnpm-start

What is the best way to place a horizontal line behind buttons in a design?

Hello, I was experimenting with creating a background line behind the buttons on my webpage. Previously, I used an image for this purpose but now I want to achieve the same effect using a line. <div class="feedback-option"> <div class="radios2" ...

htmlcss

Setting the title of a PDF page from a Symfony Controller

My method in a Controller is shown below: /** * @Route("/bilgi/agr", name="user_agreement") */ public function agr(): Response { $response = new BinaryFileResponse(__DIR__ . '/../../public/docs/User_Agreement.pdf'); ...

phphtmlsymfony

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

htmlcssangularjsangular-material

Display PickerIOS when a button is clicked in a React Native application

I am a beginner with the react framework and I'm trying to implement a PickerIOS component on button click. However, I'm having trouble understanding how to call other classes upon an event. I found this code snippet on the React Native site: v ...

javascriptjqueryreactjsreact-native

Retrieving the URL of an image from a webpage's photo gallery utilizing the Facebook Graph API with the help of Javascript

After trying out multiple tutorials, it appears that the latest version of the Graph API has caused some issues with my code. Here is the snippet I am working with: function fetchAlbumImages(){ FB.api( '/760126260690750/photos&ap ...

javascriptfacebook-graph-api

Retrieve all Tableau workbooks stored on the server

I am currently working with Tableau Server and have multiple workbooks published on it. My goal is to create a dropdown list that displays all the workbook names along with their corresponding URLs. This way, when a user selects a value from the dropdown, ...

javascriptangulartableau-api

Fundamental modeling using Node.js with Mongoose

Currently, I am facing a challenge with developing a node.js application. My goal is to create a model for a musical scale that includes a name and a set of associated notes: var mongoose = require('mongoose'); var Schema = mongoose.Schema; var ...

javascriptnode.jsmongodbmodeling

retrieve records in reverse chronological order with mongodb

In my project, I am inserting a large amount of historical data documents into a history collection. Since these documents are never modified, the order remains correct as no updates are made. However, when retrieving the data, I need them in reverse order ...

javascriptmongodb

Update the content of the h5 tag dynamically as the new div's data attribute is revealed by scrolling into view

I would like to dynamically update the h5 tag text based on the data attribute of the current div when it comes into view. The CSS is configured so that each .bar class div occupies 100% height, with only one visible at a time. I have successfully implemen ...

jqueryhtmlfunctiontextattributes

The way in which the DOM responds to adding or deleting elements from its structure

My typical method for displaying a popup involves adding an empty div tag and a button to the webpage: <div id="popupDiv"></div> <input type="button" id="popupButton" /> I then use jQuery to handle a button click event, make an ajax cal ...

javascriptjqueryhtmldom

Can additional classes/styles be added to a CSS3 background?

Today I discovered that CSS3 has the capability to support multiple backgrounds, which is truly amazing. What I would love is the option to combine multiple backgrounds dynamically, like this: .Watermarked{ background: url('text/logo.png') bot ...

cssbackground

Retrieve various Hyperlinks from database for presentation within a gridview

My objective is to include multiple Hyperlinks in a single cell of a gridview, separated by commas. The approach I have considered is to generate the HTML code during data retrieval. I have devised a simple query that creates a series of Hyperlinks based ...

htmlasp.net

Limit the 'contenteditable' attribute in table data to accept only integers

I have a question regarding editing table data row. Is there a way to restrict it to only integers? Thank you for your assistance! <td contenteditable="true" class="product_rate"></td> ...

javascriptjqueryhtml

Error Encountered: Unable to locate the variable "Login"

I encountered this rejection error It all started to go wrong in "Routes.js": import React, {Component} from 'react'; import {Router, Stack, Scene} from 'react-native-router-flux'; export default class Routes extends Component<{ ...

javascriptreactjsreact-nativevariablesreact-router