I am working on a website that is laid out horizontally and has a total width of 12500px, divided into 5 pages.
The main issue I am facing is how to center the wrapper element since there are various screen widths. Is there a way to make the div ".box" automatically adjust its size based on the screen width?
To align text in the center horizontally with CSS, you can utilize the auto value for both the margin-left and margin-right attributes:
.text-center {
margin-left: auto;
margin-right: auto;
}
The CSS for your wrapper holder div is as follows:
.box {
float: left;
line-height: 22px;
width: 2400px;
}
Even though it has a width of 2400px, it is actually centered on the page. This may appear unusual at first glance, but it is indeed centered.
You will need to make some adjustments to your CSS code:
#content{
height:100%;
width:100%;
left:0;
top:0;
position:absolute;
}
.box{
line-height:22px;
}
After reviewing your goal, it seems that JavaScript is necessary for achieving the desired outcome. However, keep the CSS structure similar to the provided example to ensure a visually appealing loading experience.
$(document).ready(function(){
var actualContentWidth = $("#content").width();
var boxes = $("#content .box").length;
var newWidth = boxes * actualContentWidth;
newWidth += "px";
$("#content").css({width:newWidth });
$("#content .box").css({width:actualContentWidth + "px",float:'left'});
});
If you wish for the content to resize when the window size changes:
function reCalculateSizes(){
$("#content").css({width:"100%"});
var actualContentWidth = $("#content").width();
var boxes = $("#content .box").length;
var newWidth = boxes * actualContentWidth;
newWidth += "px";
$("#content").css({width:newWidth });
$("#content .box").css({width:actualContentWidth + "px",float:'left'});
}
$(document).ready(reCalculateSizes);
$(window).resize(reCalculateSizes);
My button's CSS includes background: -moz-linear-gradient(center top, #59a1d8, #27247D) repeat scroll 0 0 #0f78c7;, which works well in Mozilla Firefox. However, it does not display properly in the Chrome browser. Can someone suggest an equivalent cod ...
This is my fourth attempt to seek an answer to this question, as I've faced downvotes in previous attempts. So here we go again. I am trying to send data from a hidden input within a form using ajax. The value of the hidden input is generated by a php ...
Attempting to change the class on my accordion when it is open but experiencing issues when clicking on other toggle links, causing the open class to toggle based on other actions taken Javascript code snippet: $(function () { var $subs = $('li. ...
Currently, I am working on creating a dynamic menu using Twitter Bootstrap by loading JSON files that contain the menu items. The structure of the JSON file looks like this: // test.json { "children": [ { "text": "Item1", "children": [ ...
Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...
After successfully creating a chatroom, I encountered an issue when transitioning the system to use only unique identifiers (UIDs). Here's a breakdown of how it operates: Upon signing up, a user receives a UID that is stored in the database along wit ...
Is there a way to create a dropdown list of employees by choosing the department from another dropdown menu in HTML? I need to display a list of employees who belong to the selected department in the second dropdown list. ...
Received an advertisement from my client, a 300x250 ad in ad folder consisting of 1 HTML file, 1 JavaScript file, and 1 images folder. Questioning how to integrate these files into the side panel of my Wordpress website's homepage. I've spent a ...
I am facing an issue while using .slideDown() with multiple classes. I want only one class to toggle/dropdown at a time, but currently when I press the button, all classes show up instead of just the one I want to display. How can I achieve this? Here is ...
After initializing a fresh Aurelia project using the aurelia-cli and executing the au new command, I received the following app.ts: export class App { message = 'Hello World!'; } To enhance my app.ts, I replaced it with the code from a helpfu ...
Is there a way to dynamically update the content of a div called "display-holder" in client-side code while ensuring that the socket.emit function fires only once? I have tried using off() and unbind() functions, but they do not seem to work in preventing ...
Is there a way to prevent Yarn from adding the caret prefix to version numbers when installing packages like npm has for changing version prefix (https://docs.npmjs.com/misc/config#save-prefix)? I would like to apply this configuration only for the current ...
Is it possible to convert SVG content loaded from a server into a component template in Angular, with the ability to bind properties to it? For example, <tspan [attr.color]="textColor" ...>{{myText}}</tspan>. I have tried loading and ...
$.ajax({ url: "/api/v1/cases/annotations/" + case_id + "/" + encodeURIComponent(current_plink), When I use encodeURIComponent to escape slashes, it doesn't work as expected. The code converts the "slash" to "%2F", but Apache doesn't reco ...
customFetch hook: import React, { useState, useEffect } from 'react'; const customFetch = (url, options) => { const [response, setResponse] = useState(null); const [error, setError] = useState(null); useEffect(() => { (async () ...
For the past few weeks, I've been using create-react-app and trying to modify the App.js file to include a button that executes an axios HTTP request when clicked. However, during my attempts, I keep running into errors like "unexpected token" in hand ...
I am attempting to iterate through the image array and have each image correspond to a separate li. Despite using the variable "image" as my identifier, I am encountering difficulties looping through the array. The line that I am trying to modify is as fol ...
Is there a way to add functionality to the button labeled "CLICK ME TO EDIT"? I'm looking for some ideas on how to do this. var comment = prompt("Type content for new paragraph here", ""); var newParagraph = document.createElement('p'); new ...
<!-- Customizing the Navbar --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>StuFAP MS</strong></a> ...
Update: Upon further examination, it appears that when the numbers are printed out, they are identical and only display two decimal places. Additionally, in my database, these values are stored as decimal type with precision 8 and scale 2. Within my Rail ...