There are four elements, each with a width of 25%, filling the page perfectly.
I am trying to create a 1px gap between each element by adding a margin-right of 1px. However, this causes the last element to overflow onto the next line. How can I reduce the width of each element by 1px without having to calculate their widths in pixels beforehand?
Thanks to the guidance from @Lubnah in the discussion, I successfully figured out a resolution.
.tab-list li {
margin-right: -1px;
border-left: 1px solid #fff;
}
.tab-list li:first-of-type {
border-left: none;
margin-right: 0px;
}
If you need to perform calculations in CSS, one option is to utilize the calc function, but it's important to note that its browser compatibility can be inconsistent:
width: calc( 30% - 2px );
width: -moz-calc( 30% - 2px );
width: -webkit-calc( 30% - 2px );
The container calculates the width, with any padding or margins you apply being included in the total.
Try setting a width of 23% and a margin of 1%
If you add up the left margin (1), width (23), and right margin (1), it equals 25. When repeated four times on the page, this will total 100.
To add some extra space, you could create an inner div within each element with a width set to auto and margin-right of 1px.
Take a look at this example on JsFiddle: http://jsfiddle.net/7R6zZ/
<div class="outer">
<div class="inner">1</div>
</div>
<div class="outer">
<div class="inner">2</div>
</div>
<div class="outer">
<div class="inner">3</div>
</div>
<div class="outer">
<div class="inner">4</div>
</div>
.outer {
width:25%;
float:left;
}
.outer .inner {
width:auto;
margin-right:1px;
background:#999;
min-height:300px;
}
Implement the box-sizing: border-box; property along with borders for a better design.
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
div {
width: 25%;
border-right: 1px solid right;
}
To implement box sizing, set box-sizing:border-box
and add a 1px right border with the background color.
.container {
width: 30%;
box-sizing: border-box;
border-right: 1px solid "background-color";
}
Check out my JSFiddle HERE to see what I have done. I would really appreciate it if someone could help me figure out how to make the show button float with the sidr panel :) <style type="text/css"> #panel { position: fixed; top: 50%; r ...
I am currently exploring the use of CSS3 to create a menu instead of relying on images over at . You can view my progress and code (including images and styles) here: Although I attempted to use CSS3 for the border shadow and matching the background of ...
Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...
This layout includes a header, footer, sidebar, and a scrolling main content section. You can view a demonstration of this design on Bootply. <div class="parent"> <div>HEADER</div> <div class="main"> <div class="side"> ...
One of the challenges I am facing is testing forms where the client specifically requested that the submit button be disabled by default. I have been exploring ways to dynamically replace the disabled="" attribute with enabled using JavaScript within a s ...
I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...
I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...
I am currently in the process of extracting href data from doctors' profiles on the website . To achieve this, my code employs Selenium to create a web server that accesses the website and retrieves the URLs, handling the heavy lifting for web scrapin ...
I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...
When a user interacts with a dropdown, I want to conditionally show different choices based on their selection. If the user clicks on a checkbox, a specific set of options will appear; if they click on a radio button, another set of options will appear. h ...
I am currently working on a project to create a dynamic webpage where the content of the main div gets replaced when certain navigation links are clicked. I have successfully implemented the pushstate function to update the div content and change the URL a ...
For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...
I am currently diving into the world of JSF and facing an issue with moving my inline styles to a CSS file. Despite my efforts, I can't seem to get it to work as expected. Below is the code snippet for reference. The location of my XHTML file is as f ...
Hey there, I'm currently facing an issue while trying to fetch data from my Firebase database using Angular. The error message 'firebase is not defined' keeps appearing. var config = { databaseURL: 'https://console.firebase.google. ...
Can anyone shed some light on the advantages of CSS behavior that allows a child element's top and bottom margins to extend beyond the boundaries of its block-parent? Check out this fiddle for a straightforward example. The pink div is influenced by ...
I am trying to create a visitor report using Highcharts, but I am encountering an issue where the data displayed this month in the Highchart does not match the month in the database. Attached are screenshots: Screenshot: "Highchart". Screenshot: "Da ...
I am trying to keep a table header fixed at the top of a window, but for some reason, setting the widths of the <td> and <th> elements as shown below is not resulting in them having the same width (the column headers are misaligned with other c ...
I need to customize the CSS for my website, and I have a specific question: If a user is accessing my web page via a computer, the CSS should be as follows: <link rel="stylesheet" href="/pc.css" type="text/css" media="all" /> However, if they are ...
I am in the process of creating a menu that displays two lists for regions: one <select> for selecting the region and another <select> for choosing from available municipalities within that region. I have set up a <form> and I utilize Jav ...
I'm having an issue with a new div I added to the bottom half of my website - it's not showing up. Oddly enough, when I test the same code on a separate web page, it works fine. Can someone please take a look at the code and help me out? Thank yo ...