When I try to expand the width of a div, the display property set to inline

Visit my website

At the moment, my website features the following code snippet:

<div class="main-sale">
  <div class="time-left">Sale Ends in: </div>
  <div class="sale-item">
    //Highlighted Sale item
  </div>
</div>

<div class="slider-container">
  <div id="owl-demo" class="owl-carousel">
      //Interactive Owl Slider
    </div>
</div>

Currently, the width of .slider-container is set at 60%. However, when I attempt to increase it to 61%, the slider container overlaps with the sale item. Why does this occur even though there seems to be enough space for the width to expand?

jqueryhtmlcss

Answer №1

Attached is an image for reference. The .slider-container div currently has a 50px margin on each side. You can try reducing these margins and increasing the width of the .slider-container div. I experimented with increasing the width to 63% and then 64%, but it ended up moving below the main-sale div.

To make these adjustments, you can add the following code to your stylesheet:

.slider-container {
    margin: 0px 30px;
    width: 66.5%;
}

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

Modify just one of the padding axis while keeping the other constant by utilizing a media query

My div currently has the following padding set: padding: 14px 150px; I want to change the left/right padding without affecting the top/bottom padding using a media query. @media screen and (max-width: 700px){ #paddingDiv{ padding: same as ...

css

Creating uniform table column widths within a flex container with dynamic sizing

I am working on designing a navigation system for my website using a table inside a flexbox. I want to ensure that the table columns have equal width and can scale dynamically. Additionally, I aim to wrap the text in the data cells without changing the cel ...

htmlcss

Can general principles be applied to determine which script is the most efficient and will load the quickest?

Is there a way to determine which script is optimal and will load faster when there are multiple ways to write scripts that achieve the same outcome? ...

javascriptjqueryperformance

Encountering a problem with quintus-all.js and need assistance

I am having an issue with my animation code. Can someone help me troubleshoot it? window.addEventListener('load', function(){ var Q =window.Q= Quintus().include("Sprites, Scenes,2D, Anim").setup({maximize:true}); Q.Sprite.extend(&apos ...

htmlgame-engine

When the jQuery button is clicked, the execute function will run multiple times

I am attempting to create a button using jQuery that calls a JavaScript function, but I am facing an issue : Upon loading the page, the first click on mybutton does not elicit any response The second click results in the function being executed twice On ...

javascriptjquery

HTML textarea fails to recognize inline styles

My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the ...

jqueryhtmlcssangularjs

Logging in using Mechanize with a jQuery AJAX submission form in Python: A Step-by-Step Guide

Currently, I'm experiencing difficulties logging into the system due to the way the website is handling the form using jQuery and ajax in the following script: function form_login() { if($('#main form p.button.disabled').length) return ...

jquerypythonajaxmechanize

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

javascriptjqueryhtmlcss

Conceal the element if the output of express is void

I am currently developing an app using nodejs and express. I am retrieving JSON data from an endpoint and displaying it on the page based on the values received. The issue I am facing is that if I receive a null or undefined value from the JSON data, how ...

javascripthtmlnode.jsexpresshbs

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

javascriptjquerycsshtmlforms

Having trouble with the vertical-align property in Google Chrome?

<html> <head> <style> table,td {border:1px solid black ;} table {width : 80% ;height:80%;} .top {vertical-align:top}; .center {vertical-align: middle}; .bottom {verti ...

html

elevate the font size specifically for the descendants of a particular element

Currently, I am using rems to define the font sizes in my project. However, I have encountered a situation where I need to scale the font sizes at specific breakpoints without affecting the entire page, but just the text within a certain container. I under ...

htmlcss

Using JQuery to create a button inside a Modal dialog box

My goal is to select a row within a Table that is located inside a Modal window, and then have a button ('newBtn') within that Modal window trigger a post request to the server with the selected id of the row. However, the issue I am encountering ...

javascriptjqueryflaskbuttonmodal-dialog

Troubleshooting issue with AngularJS $http.get function failing to show retrieved

My data is showing up when I call the URL from dataSource, but it's not displaying when I use $http.get. I am sending this data to a dx-chart using a JsonResult from my controller. Below is the code snippet that includes my AngularJS file and MVC View ...

htmlasp.net-mvcangularjshttp

What is the best way to align text in the center of a button?

When creating custom buttons in CSS using <button>, I noticed that the text appears to be centered both horizontally and vertically across all browsers without the need for padding, text-align, or other properties. Simply adjusting the width and heig ...

htmlcss

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

javascriptandroidhtmlioscss

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : https://i.sstatic.net/pK4 ...

javascriptjqueryhtmlcssnavigation

`Turn nested JSON into a formatted list using jquery`

I am currently facing two challenges: I am having trouble with the HTML structure, as shown in the image below Current HTML structure: https://i.stack.imgur.com/GH46J.png Desired HTML structure: https://i.stack.imgur.com/Dq3Gn.png How can I create d ...

javascriptjqueryhtmlcssjson

Having issues with email verification and the length of phone numbers not functioning properly

I need to validate two text fields before registration: the email must be in correct format and the number must have exactly 11 digits. Any mismatches should trigger an error message. For the email validation, I used a function that checks for the require ...

javascripthtml

Scrolling to the complete height of a div using scrollTop

Experience an automated scroll to the bottom of the div, followed by a smooth upward motion over 5 seconds, all while looping seamlessly. A small issue arises where the code only recognizes the standard height set for the div, not its actual scrollable he ...

javascriptjqueryhtmlscrollscrolltop