Adjust the text positioning to be lower without affecting the placement of the image

Hey experts: I'm experimenting with something, but can't quite grasp the concept... My main Div contains a paragraph of text and an image (each nested in their own Divs) at the top of the HTML page. The image is styled to float right while styling the text has me stuck.

To better illustrate: how do I move JUST THE TEXT down 50px from the top of the page?

When I add padding or margin to style the text, it moves both the text and the image together. How can I keep the image where it is and only shift the text downward, leaving white space above the text and not the image?

Is this achieved through a positioning style? Or am I approaching this incorrectly? Appreciate your assistance!

htmlcss

Answer №1

html:

<div class="container">
    <div><img src="image.jpg" class="img-right" /></div>
    <div><p>some informative text</p></div>
</div>

css:

.container div p {
    position: relative //whether you want to use absolute or relative depends on the layout
    top: 50px
}
.img-right {
    float: right
}

You can choose between using a relative or absolute position based on your design requirements.

For more information, visit this link:

http://www.w3schools.com/cssref/pr_class_position.asp

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

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

Is it achievable to use PHP to automatically scroll to the bottom of a container?

Is there a way to automatically scroll to the bottom of a div container using PHP code instead of javascript or CSS? While I haven't been able to find a solution using just CSS, I have come across some options utilizing javascript. However, since I a ...

phpcssbootstrap-4

Displaying a table in Chrome/Firefox with a mouseover feature

Hovering over the rows of this table triggers a display of descriptions. html: <tr title="{{transaction.submissionLog}}" class="mastertooltip">... JavaScript: $('.masterTooltip').hover(function(){ // Hover functionality ...

javascripthtmlangularjs

Foundation mobile navigation menu malfunctioning on website

I'm currently in the process of creating a website and I've decided to prioritize making it "mobile first". To achieve this, I've opted to utilize Foundation by Zurb as I find it more user-friendly. Here is the code snippet that I am using: ...

csszurb-foundation

Tips on configuring the path to incorporate Bootstrap CSS, JavaScript, and font files/classes into HTML when the HTML file and Bootstrap files are located in different directories

<!DOCTYPE html> <html> <head> <title>Unique Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div class="container"> <form ...

htmlbootstrap-4

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

cssfirefoxfontsiconsfont-smoothing

In Internet Explorer 7, there appears to be a white box that covers up the content on our website beyond a

I'm feeling stuck and frustrated trying to solve this issue. I have a Mac and no access to an IE7 machine, so I've been using browserlab (which is slow) to make any changes and see if they help. Unfortunately, I haven't been able to fix the ...

jqueryhtmlcssinternet-explorer-7wordpress-theming

Getting the value of the chosen option from one component and passing it to another component in Angular 8

How can I pass the selected option value from the login component to the home component without using local storage? When an option is selected in the login component, I want that value to be displayed in the home component. Below is the code snippet: Lo ...

htmlangulartypescript

Switching the input to LTR changes the overall direction to LTR while maintaining the RTL placeholder

The text input is currently set to be RTL, including both the placeholder and the actual input. The settings for this were done elsewhere. My question is how can I modify it so that only the input changes to LTR, while the placeholder remains RTL. For exa ...

htmlplaceholder

Learn how to create text animations using CSS triggered by a scroll event listener

I'm looking to create a text animation similar to the one on this website: They have 3 keyframes for two types of animations: Left to Right and Right to Left. The RTL animation starts at 164vh, while LTR starts at -200vh. These text animations only ...

javascriptcssreactjsnext.js

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

cssgoogle-chromefirefoxselect

Information has been stored in the database after being updated in an

I have a field that can be edited and I want to save the changes to the database. Here is the relevant HTML code: <ng-container *ngIf="groupedVolumes"> <ng-container *ngFor="let model of groupKeys() | slice:-3" > ...

htmlangularsavechanges

problems with an extra administrator account access

Is it possible to have a single login form that can cater to both users and admins? I currently have a user login system in place but would like to add an admin login as well. How can I implement this without creating separate logins? if(isset($_POST[&ap ...

phphtml

Changing images in vuejs

I am seeking to achieve a seamless transition between two images along with a corresponding legend. These images are sourced from an object-array collection. Since transitions operate only on single tags and components, I have devised a component to encap ...

javascriptcssimagevue.jstransition

PHP multiline string using PHP language

I am struggling with echoing a large amount of PHP and HTML code. Despite trying the obvious solutions, I am unable to make it work: <?php echo ' <?php if ( has_post_thumbnail() ) { ?> <div class="gridly-image"><a href="< ...

phphtmlmultiline

Creating a React.js component and setting an initial value within it

Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...

javascripthtmlreactjs

I'm looking to adjust the position of an image inside a div without affecting the position of the entire div

When creating a horizontal navigation bar with an image, I encountered an issue where the image link did not align with the rest of the links on the navigation bar. I wanted to drop it down by a pixel or two without affecting the position of the other link ...

csshtml

Using PHP to create redirects within an iframe

Imagine I have embedded an iframe to showcase a different website on my own site. However, when the displayed site contains a redirect that directs to other pages within its domain, this results in the entire browser being redirected to the external site w ...

phpjavascriptjqueryhtmliframe

HTML filtering using the <select> element

Is there a way to implement this script for options instead of buttons? The goal is to filter the HTML section, but it seems to not work with <option> tags. Instead of displaying the all class, it shows nothing. CSS .show { display: block; } .filt ...

javascripthtmlcssbootstrap-5

Ways to customize label appearance within a TextField using the createTheme function

I attempted to modify the margin of a label using em/rem units instead of px (refer to the image attached to this question), but I am unsure where to apply the styles for proper structuring. I have checked the MUI documentation but couldn't find infor ...

cssreactjsmaterial-ui