In CSS, is it acceptable to use width: 50% + 10px; for styling?
If not, what would be a workaround for this scenario? I am currently designing a layout with floating elements in multiple columns, each column separated by a width of 10px. Therefore, I require a method for dynamically calculating the width based on screen size.
Sorry, but CSS is not the place to do complex math calculations. Instead, consider using SASS or LESS.
If you opt for LESS (or SASS) and need evenly-spaced columns, take a look at Bootstrap responsive as it might be the solution you're looking for.
For a way to calculate widths in CSS, check out the calc function
selector{
width: -moz-calc(50% + 10px);
width: -webkit-calc(50% + 10px);
width: calc(50% + 10px);
}
It appears that what you really require is some margin:
If not, how can this issue be resolved? I am currently dealing with float elements in multiple columns, each column having a width of 10px in between. Thus, I need a dynamic calculation for widths to adapt to varying screen sizes.
.colItem { float: left; margin-right: 10px; }
In this scenario, your width should not actually be 50%, as two adjacent columns will exceed total space (50% + 50% + 20px margin > 100%). You may consider using a different value like 1% instead of 10px.
A more effective solution would likely involve using padding in combination with the box-sizing property:
.colItem
{
float: left;
width: 50%;
box-sizing: border-box;
-moz-box-sizing:border-box;
padding-right: 10px;
}
.colItem.last
{
padding-right: 0px;
}
Check out this previous post about the possibility of performing mathematical operations within CSS: Is it possible to do mathematics inside CSS?
While directly performing math in CSS is not possible, alternatives like LESS or using JavaScript for dynamic calculations can be explored.
Considering that the purpose is to calculate for screen responsiveness, familiarize yourself with responsive design concepts and explore various frameworks available. Here's a resource discussing 5 responsive web design frameworks:
Take your time to evaluate which framework aligns best with your requirements.
Apologies if this question has been asked before, but I have two onclick divs and I'm trying to achieve a specific behavior. When I open the first one, I want it to automatically close when I open the second one, and vice versa. Below is the HTML cod ...
Currently in the process of developing a login page and utilizing @media for improved CSS layout on mobile devices. https://i.sstatic.net/LM8q8.png. The issue is that despite implementing @media rules, the inputs and buttons are not extending to the full w ...
On my website, I have a dynamic page header that shows the number of comments a user has scrolled through. You can see this feature in action here: However, there seems to be a slight jitter on the screen every time the comment counter updates... To disp ...
My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method: for(i=1;i<codeArray.length;i++) ...
My Web Component relies on the power of CSS variables. To set default values for these variables is crucial. With their wide usage across multiple files, it's essential to define them once and for all. The initial approach turns the text color to b ...
Hey there! I'm having trouble putting together a webpage that features a sidebar. I want to make it so that clicking on one of the links at the top will switch the tab and its content accordingly. However, the current code I have isn't working an ...
Currently, I am in the process of developing a website utilizing Bootstrap 5.2 which features MathJax equations and dropdown menus integrated into the navbar. However, there is an issue where the MathJax equations are overlapping with the dropdown menus, c ...
This PHP script has got me stuck on a particular issue. I am having trouble splitting the data correctly. Currently, I have a list of numbers in this format: 50.0.1 581 50.0.2 545 50.0.3 541 50.0.4 18 50.0.5 2 50.0.6 33 50.0.7 1 [...] I need to convert ...
I need help creating a header menu. You can view the code I've been working on here: http://jsfiddle.net/kc2cc/ . My goal is to have the clicked menu item (logo, places, events or groups) move down 1px when clicked, and return to its original positio ...
I have an SVG image representing the Switzerland flag, with a cross made of two overlapping rectangle paths. I need to make it look more like the real flag by removing two vertical lines in the center of the cross. Is there a way to modify the code to eli ...
Is it possible to set a margin-left using a variable in JavaScript? If so, how can this be accomplished? The margin left should be equivalent to the clientWidth of the text: let hoverBubble = document.getElementById(id); let linkWidth = link.clientWidth ...
Can someone guide me on how to reference the Bootstrap link (https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css) in a .css file within an Angular project? ...
I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...
Struggling to center align two buttons on my website, none of the common methods seem to work. It's becoming a headache as nothing else is overriding it. Perhaps I'm missing something. This is my CSS button code: .btn { border-radius: 10px ! ...
Initially, I had posted this inquiry before, and my apologies for reposting. However, I am still struggling to comprehend why the code works for the individual who responded but not for me. How can one retrieve values from search suggestions after enterin ...
I've been having trouble validating my CSS and keep encountering error messages. Despite ensuring I have closing brackets, there are parse errors on line 39 and unrecognized media issues on lines 79 and 81. Additionally, lines 70 and 89 also trigger p ...
I'm currently working on creating a profile page and I'd like to have an image inside a circular div. The challenge is that I want the image to maintain its aspect ratio, even though the dimensions are unknown and users can upload images of any s ...
I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...
I have a developed application that needs to function properly on all browsers, with special emphasis on Chrome. Within the application, there is a dropdown list styled using the CSS below: .ddlStyle{ background-image: url("../Images/navigation_bg.jpg ...
I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...