Adjust the margin of the div following the video glitch

Here is the layout I am working with: this

I have managed to position everything correctly.

The issue arises when I try to add margin to the text inside my description container. Every time I make a change, the div shifts down slightly. If I use absolute positioning in the .contentDesc class, the div simply disappears. I suspect this happens because the video comes before this particular div?

I attempted using float:left on the video which resulted in unexpected behavior.

Adding top padding worked temporarily, but then the scroll height does not match the text height.

You can view my code on jsfiddle here

Code:

 <div class="Projectscontent">
    <div class="Contentimage"> d</div>
    <div class="footer"> </div>
    <div class="projectchooser"></div>
    <div class="videoP">
      <iframe src="https://player.vimeo.com/video/110053234"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="ContentDesc">
      <div class="descP">
        <p class>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </div>
    </div>
  </div>
 <div class="Projectscontent">
    <div class="Contentimage"> d</div>
    <div class="footer"> </div>
    <div class="projectchooser"></div>
    <div class="videoP">
      <iframe src="https://player.vimeo.com/video/110053234"?autoplay=0&loop=0&title=0&byline=0&portrait=0 width="700" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="ContentDesc">
      <div class="descP">
        <p class>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </div>
    </div>
  </div>

htmlcss

Answer №1

The provided jsfiddle includes the following CSS for descP:

.descP {
  max-width:400px;
  max-height: 50px;
  margin:0 auto;
  line-height:20px;
  padding-top:10px;
  text-align: justify;
  overflow: scroll;
  overflow-x: hidden;
}

Focus on achieving a max-width of 400px and setting the margin to auto.

Setting the margin to 0 means top and bottom margins are 0, while auto adjusts left and right margins based on text width within the container set at a width of 400px.

If you wish to adjust the margin further, consider modifying the max-width value while keeping the margin as auto. Alternatively, you can customize the left and right margins without specifying a max-width.

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

Error handling for uploading a file to ClassPathResource - IOException

I am looking to upload images that are added by the admin (under a specific category) into a folder within the project directory. I have attempted to achieve this through a controller, however, it is throwing an Unhandled exception type IOException. @Pos ...

htmlspringbootstrap-4thymeleaf

Using AngularJS to add an element to an array based on a specified condition

dashboardCtrl Data app.controller('dashboardCtrl', ['$scope','$rootScope', function ($scope, $rootScope) { //Color $scope.Color = [{ colorname: "Red", number: "(3)" }, { colorname: "Brown ...

javascripthtmlangularjstwitter-bootstrap

The hamburger menu is not functioning properly online, but it works perfectly in xampp/localhost

I'm currently facing a challenge with my responsive menu. It works perfectly on my offline server in mobile format, but as soon as I upload it to the real server, it stops working. I've been grappling with this problem for hours. Here's the ...

javascripthtmlcsswebhamburger-menu

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

javascripthtmlcss

Does reducing the number of HTML, PHP, or CSS files truly have a significant impact on improving a webpage's performance, or is it just a minor factor?

Discovering a new HTML minifier on Ajaxian got me thinking - is minimizing HTML, PHP, or CSS files truly a significant improvement for webpages? Would shrinking files that are 100 lines long on average make a noticeable impact? ...

phphtmlcssminimize

Tips for adjusting this CSS to be compatible with Internet Explorer

This CSS code I have was created specifically for Firefox compatibility. /* Green header */ .container { background: linear-gradient(#5FA309, #3B8018); position: relative; display: inline-block; padding: 0 20px 0 10px; width: 270px; ...

css

How can I retrieve the mouse click coordinates on an image using JavaScript?

Currently facing an issue with the code provided below for retrieving x/y coordinates in JavaScript. I am working on creating a color picker using an image. The objective is to display a color window and cancel button when a user clicks on the pick color ...

javascriptcsshtml

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Creating a dynamic div component with adjustable size functionality

Can a div be made resizable in JavaScript without relying on jQuery or any other external library? I've been searching for an answer to this question for some time now. I even came across this example: How to make HTML element resizable using pure J ...

javascripthtmlcss

Cause a JavaScript error to occur if geolocation services are disabled

I have an AngularJS project where I am utilizing the following code snippet to fetch a device's GPS coordinates: // when user clicks on geo button $scope.getGeoLocation = function() { var geocoder = new google.maps.Geocoder(); window.navigato ...

javascriptangularjshtml

Div controls the margins of all other elements

I am encountering an issue when trying to position #slider, where the navigation and elements above it also move. It seems as though they are contained within #slider, even though they are not. HTML: <div id="slider" class="clearfix"> <d ...

htmlcsscss-float

The close button on the modal vanishes on a real iPhone

The issue I am facing is that the Close Button appears when testing responsiveness in Chrome, but disappears on a real iPhone. When clicking on an image, the image gallery should appear. However, on an iPhone, only the previous and next buttons are visibl ...

htmlcssreactjsnext.jschakra-ui

What is the reason for the columns being divided on the xs-viewport in Bootstrap?

Attempting to grasp the concepts of Bootstrap has left me puzzled, as I cannot comprehend why the col-xs-11 is not aligning correctly with the col-xs-1. Despite having a total of 12 columns, the layout seems off. CSS: [class^="col-"] { height: 20px; ...

csstwitter-bootstraptwitter-bootstrap-3

Iterate over the MVC model and deliver the results

Below is the code snippet for the model that retrieves names and ids... public class AccountType { public int Id { get; set; } public string Name { get; set; } public static AccountType[] AvailableAccountTypes { get { ...

htmlasp.net-mvcmodel-view-controllermodel

Utilizing form values in a PHP function: a brief guide

Seeking guidance as a newcomer to PHP - I recently created an auto-complete text box using PHP, along with a submit button. However, I neglected to provide a form action. Below is the HTML form code that was used for the autocomplete textbox. This particu ...

phpmysqlhtml

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

javascriptjquerycsshtml

In IE8, the :last-child pseudo-class appears to be ineffective

Here is the HTML structure I am working with: <div class="footerMenu"> <ul> <li>Home</li> <li>About</li> <li>Feedback</li> <li>Contact us</li> </ul> ...

htmlcssinternet-explorer-8css-selectors

Having trouble aligning text in the menu of my WordPress theme

Is there a way to perfectly center it? This is the current state of my CSS: /* First Level - Menu Secondary */ .menu-secondary li a { color: #FFFFFF; padding: 14px 3px 13px 15px; text-decoration: none; font-family: 'Gentium+Basic&apo ...

cssmenucenter

Disable, Hide, or Remove Specific Options in a Single Dropdown Selection

A challenge I am facing involves creating a form with multiple select options that need to be ranked by the user from 1-8. However, I am encountering some difficulties in hiding, removing, or disabling certain select options. Below is an excerpt from my f ...

javascriptjqueryhtmlcssforms

React - Separate colors for different containers

I have been struggling with this issue repeatedly, yet I still haven't found the most efficient solution for it. Imagine having 2 DIVs, A and B, both nested inside a container with columns assigned to each. What would be the optimal way to fill a back ...

htmlcssreactjsbackground-color