Check out this JS Fiddle example
Is there a way to align these boxes in the example so they are the same size and positioned next to each other on one line? Additionally, how can we ensure that if the window is resized and one box drops down, it will be centered like it is at the beginning of the example?
<div id='wrapper'>
<ul>
<li>
</li>
<li>
</li>
</ul>
</div>
EDIT:
My recommendation would be to utilize div elements instead of <ul> and <li> tags to avoid having to reset styles on them. This is necessary because certain browsers, like Chrome, automatically add CSS properties such as -webkit-margin-before/after, which can disrupt your layout.
Here is a helpful Fiddle showcasing the usage of divs.
If you prefer to maintain your HTML markup, below is a sample:
FIDDLE that functions well in Chrome.
HTML :
<div id='wrapper'>
<ul>
<li><span></span>
</li>
<li><span></span>
</li>
<li><span></span>
</li>
</ul>
</div>
CSS :
html, body {
width:100%;
margin:0;
overflow: hidden;
}
#wrapper {
width: 100%;
height: 220px;
background-color: #000;
}
ul {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start:0;
}
ul > li {
float:left;
display:block;
width:33.33%;
height: 220px;
list-style-type: none;
}
ul > li > span {
background-color: red;
display:block;
margin:0 auto;
width:200px;
height:100%;
}
I am currently working on a form that posts to a PHP script by selecting a date range. For a better understanding, you can check out my visual representation here. Before the data is posted, I would like to display the selected dates in empty boxes or inpu ...
I am struggling to run a PHPWord script. When attempting to execute the sample example Text.php, it does not display anything. I have verified that the class is loading successfully. You can find more information in the documentation. If anyone has encou ...
I noticed that when I have 6 fields in my navbar, with 5 of them being links and one as a dropdown, the scrolling of the page causes all fields to remain fixed except for the dropdown field.Check out this image description for reference https://i.stack.im ...
Receiving a response with a 200 OK status, but encountering an error message in Postman. { "errors": "Unable to log you in, please try again.", "success": false } Post Url: [{"key":"Content-Type","value":"application/json","descript ...
Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...
Looking to create a dynamic bar with the ability to add multiple child DIVs (similar to this: https://i.stack.imgur.com/tdWsq.jpg). Utilizing jQuery, jQuery UI, Bootstrap, and various plugins. The structure for the div (or span) system could be structured ...
Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...
My post category page is supposed to display a message if there are no posts. However, the HTML appears briefly when the page loads and then hides. I thought using ngCloak would solve this issue, but it doesn't seem to be working for me. Here's t ...
In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...
My JS code reloads the div every 2 seconds: var auto_refresh = setInterval(function() { $('#indexRefresh').load('/includes/index_refresh_include.php?_=' + Math.random()); }, 2000); After that, I have an AJAX request that loads mor ...
Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...
Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...
Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...
Hello coding community! I am a beginner in programming and I'm eager to learn. Recently, I came across a stunning button effect on Codepen that caught my attention. You can check it out here. However, when I tried to replicate the code from this exam ...
I have encountered some HTML markup and JavaScript functionality issues on my web-app that seem to only occur on iPad and iPhone. Unfortunately, I do not have access to any iOS devices to debug these problems. How can I replicate and troubleshoot these i ...
Seeking guidance on the best approach for the following scenario: I have an angular component positioned at a specific route. Let's say the route is: /main-page Currently, the template spans the full width of the screen at this route. I want to add ...
I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...
Check out this HTML code snippet:- ` AngularJS | $http server <div ng-controller="people"> <ul> <h2> Names and Ages of programmers: </h2> <li ng-repeat="person in persons"> { ...
For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...
This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...