Decreasing the div width in CSS causes it to shift to the left side

Here is a link to the code: http://jsfiddle.net/vicky081/jmGwX/5/. I am trying to change the width of the div, which is currently set at 100%. When I change it to 50%, the div appears on the left side. Is there a way to make the div appear in the center when its size is reduced?

I understand that when the div's width is set to 100%, it extends from the left to the right. If I change it to 50%, it extends from the left to 50% on the right. Can it be modified to show from the center? For example, if the width is reduced to 50%, it should display 25% from the center towards both the left and right.

Below is the CSS code:

.notify {
    background: #FFFFFF;
    width:50%;
    position: relative; 
    margin:-13px 0px 0px -5px;
    padding: 2px 0px 0px 0px;   
    border-bottom:2px solid #CC0000;
    box-shadow: 0px 4px 5px #AAAAAA;
    font-size:14px;
    font-family: 'Lato Regular', Arial;
    text-transform:uppercase;
    text-align:center;
}

Answer №1

Make changes to your CSS code as shown below:

.notify {
    ....
    margin: 0 auto 0 auto;
    ....
}

http://jsfiddle.net/wRM8j/

UPDATE:

If you have the value of position set to fixed, include the following:

.notify {
    ....
    position: fixed;
    left: 0;
    right: 0;
    ....
}

http://jsfiddle.net/vZexH/

Answer №2

If you're looking to enhance the first solution with some javascript functionality, here's a snippet that allows you to manipulate it further.

<script>
var decider=parseInt(document.defaultView.getComputedStyle(document.getElementsByTagName("div")[0]).width)/2;
document.getElementsByTagName("div")[0].style.left=(window.innerWidth/2)-decider;
</script>

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

Using Intersection Observer to ensure that text appears instantly on the screen without any fading effect

I'm currently implementing intersection observer to achieve lazy loading for both text and images. In this particular query, I am only focusing on the text aspect of it. The idea is for the text to smoothly transition from 0 opacity to 1 opacity once ...

Using JavaScript to dynamically insert HTML content and create a toggle effect

Within a div, I have a collection of large images that I am attempting to insert into another div using JavaScript toggle functionality. Please test the code snippet provided below. $(".toggleimages").on("click", function(e) { e.preventDefault(); ...

Guide to designing a dropdown navigation menu in GWT

Hey, I'm currently working on setting up a drop down menu using GWT and here's the layout I have in mind: | Categories | Pictures | Other | When the categories dropdown opens, my goal is to display the categories grouped in pairs. For example: ...

Styling with CSS: Display an image next to the content area on both the left and right

Currently, I am working on implementing CSS positions for images and backgrounds. My main struggle lies in trying to display the same image next to the content area while ensuring its position is not affected by page resizing. Can anyone provide guidance ...

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

Determining the window height using jQuery when overflow is set to hidden

I've built a full screen web application that I don't want to scroll, so I used this code: $("body").css("overflow", "hidden"); However, after adding a resize listener: $(window).resize(function(){ console.log("Inner height: " + $(window). ...

Retrieve the content from a textarea and insert it into a different textarea with additional text included

Users can input HTML codes into a textarea named txtar1. A 'generate' button is available; Upon clicking the 'generate' button, the content of txtar1 will be transfered to another textarea named txtar2 with additional CSS code. Here&ap ...

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

Creating a pull-up toolbar with just HTML and CSS for an Android browser

I need to create a draggable toolbar on my mobile webapp that can reveal content beneath it. I want to achieve this using just HTML/CSS, without relying on touch/scroll events or libraries. To do this, I'm overlaying a scrolling element on top of the ...

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

Is it possible to lock the select box once a choice has been made?

Check out this JSBIN link: https://jsbin.com/favakevuhu/edit?html,css,js,console,output In the provided code snippet, how can I prevent users from changing their selection in the select box after they have made a choice? For example, if someone chooses & ...

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

Updating the background image with Jquery is resulting in a distracting flicker effect

Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...

Tips for Improving the Naming Conventions of CSS Modules

I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...

A tutorial on how to switch out a font-awesome icon simply by clicking on it - collapsible content

I have some HTML code with a script for my website that allows text to be collapsed or expanded by clicking on a font awesome arrow. I am looking to have an arrow that points up when clicked to collapse the text and points down when clicked to expand the t ...

What could be causing the issue of home.html not displaying the Django form with the CKEditor toolbar when adding a new post?

I am currently working on integrating several apps to create a larger project. However, I encountered an issue when trying to insert CKEditor into the HTML login page - it simply wasn't showing up. To troubleshoot this problem, I decided to create a s ...

Utilize CSS transitions to animate the display and concealment of a div element

I have a piece of code below where I am toggling the visibility of a div with the id "popdiv" when a button is clicked. I would like to incorporate a transition effect into this toggle action. Currently, the div simply appears and disappears abruptly witho ...

The function of slicing within a <for> loop

My coding skills are at a beginner level, and I am currently using python 3.7.1 on a Windows 10 machine with Visual Code Studio. For practice, I am attempting to extract data from a webpage that is organized in a table. Specifically, I am interested in r ...

Is it feasible to detect whether the initiation of a web worker is unsuccessful?

In the scenario presented, there is an issue with the web worker code (undefined reference) and the try { ... } catch(e) { ...} statement doesn't effectively handle it. The console displays the message Why am I here ?. Below is the HTML file content: ...

How to Customize Bootstrap Tooltip Size for Images

I'm currently working on customizing Bootstrap 4 tooltips to display images. <img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'> To achieve this, I created ...