Encountering an issue that is specific to MAC Safari. Here's the code snippet:
<div class="wrapper" style="max-width:1220px">
<div style="width:50%;display:inline-block">First</div>
<div style="width:25%;display:inline-block">Second</div>
<div style="width:25%;display:inline-block">Third</div>
</div>
The layout looks good on all browsers including Safari on Windows, but on Mac, the third DIV wraps to the next line. Any suggestions?
According to the comments you provided, your elements are set to display as inline-block. Therefore, your code is interpreted in this way:
<div class="container">
<div>First</div> <div>Second</div> <div>Third</div>
<!-- Any new lines will be considered as whitespace -->
</div>
25% + 25% + 50% + whitespace > 100%
To resolve this issue, there are a couple of solutions:
Either write all your <div></div> tags in one line, like this
<div></div><div></div></div>or
simply use float: left instead of display: inline-block.
It is important to note that the way your content appears in different browsers may not be as expected. This discrepancy can be attributed to the presence of whitespace between your inline-block elements, which are condensed to the width of one space character when displayed.
The calculation of
50% + 1 space character width + 25% + 1 space character width + 25%If you are looking for solutions and insights on handling the spacing between inline block elements, I recommend checking out css-tricks.com's article titled Fighting the Space Between Inline Block Elements.
It appears that the issue you are experiencing may be due to whitespace, as mentioned by others.
Have you thought about using flexbox? Check out the browser support at Can I Use.
For a visual demonstration, take a look at this demo
<div class="flex-container">
<div id="one" class="flex-item">1</div>
<div id="two" class="flex-item">2</div>
<div id="three" class="flex-item">3</div>
</div>
.flex-container {
padding: 0;
margin: 0 auto;
list-style: none;
max-width:1220px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-item {
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
#one {
background: lightblue; width: 50%;
}
#two {
background: lightgreen; width: 25%;
}
#three {
background: lightcoral; width: 25%;
}
There seems to be a padding issue that is only affecting mobile devices. https://i.stack.imgur.com/2Tbuc.png The cause of this problem has been somewhat identified, but the solution isn't clear without impacting the preview on computers. Here is th ...
While extracting data from a JSON file accessed via URL, I am experiencing long loading times. Surprisingly, the website manages to display the same data only when it's ready, and I aspire to achieve a similar functionality. I have yet to discover a ...
Currently, I am working on a website that includes downloadable PDF links. We are utilizing a parameter at the end of the file download URL to instruct the browser on how to handle the file: https://example.com?ref=0&download=y By using the download= ...
Can you help me find a way to blend the image with the background to eliminate the visible separation between them? Here is the link to the image: https://i.stack.imgur.com/VB9in.jpg ...
Is there a way to import a long list of custom fonts as icons using Javascript? I have been obtaining the font list from an API, but importing them one by one with pure CSS using @font-face is time-consuming and difficult to maintain. @font-face { fon ...
Imagine you have a table in your HTML file with the following rows, where {{ }} represent variables: <tr id="{{ object.id }}"> <td class="name">{{ object.name }}</td> </tr> <tr id="{{ object.id }}"> <td class="nam ...
I'm facing an issue with my website where thin lines are appearing between each section when previewed in Safari and Chrome, but not in Firefox (as shown in the images). I've checked the CSS code for each section in Dreamweaver, where the lines d ...
Currently working on freecodecamp's portfolio creation exercise. It should be a straightforward task, but I'm facing a small issue that's puzzling me. I'm trying to remove the border and outline (when focused) from my contact-area form ...
I am currently attempting to utilize Google Maps autocomplete feature in order to save latitude and longitude. Unfortunately, I am encountering difficulties in making this functionality work as intended. Given that I am unfamiliar with the Google Maps API, ...
After purchasing the icymobi source code from codecanyon, I encountered an issue with adding a cart button to the wishlist page. Despite my efforts, the button does not add the product to the cart. https://i.stack.imgur.com/pqr7J.png The file in question ...
I am currently struggling to implement the Bootstrap-Confirmation plugin with AngularJS. Despite following instructions from this YouTube tutorial, I cannot seem to get the directive to function correctly. A related query on Stack Overflow references a di ...
I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...
What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...
I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...
My goal is to create a header with the following functionalities: Initially displays with a transparent background Upon scrolling down the page by 25px, it will dynamically add the header--maroon class to the header, which alters the background color and ...
I've successfully created a CSS 3 column fluid layout, thanks to everyone's help! In my left column, I have a Google AdSense advert. Unfortunately, the sizes of these adverts are not very flexible. I'm wondering if there is a way to change t ...
Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...
My webapp contains links structured like this: <a href="/articles/">Articles</a> I am using JavaScript to control these links within my app: $(document).on("click", 'a', function(ev) { ev.preventDefault(); ev.stopPropagat ...
Is there a more efficient way to display over 500 images from a folder on an HTML page without the need to manually write out each img src tag? I have searched online for solutions, but most suggestions involve using PHP or "glob", which I am hesitant to ...
I am having trouble getting the jQuery to load properly. My goal is to toggle classes on specific items identified by their ID. When an item is clicked, I want it to have the class "menu-selected" while the other item has the class "unselected." I have i ...