Adaptive Design - Content Fragmentation

I am currently working on a webpage layout that has the following HTML structure:

<div class="row">
    <div class="col3">test 1</div>
    <div class="col3">test 2</div>
    <div class="col3">test 3</div>
</div>

In order to create a simple, responsive layout, I have applied the following CSS styles:

.row {
    width: 100%;
    display: block;
    padding-left: 1.25%;
    padding-right: 1.25%;
    margin: 0 auto 15px auto;
}
.col3 {
    width: 30%;
    display: inline-block;
    margin: 0 1.25%;
    border: none;
}

However, I have noticed that when I shrink the page to 30% of the screen's width, the last column drops down beneath the other columns.

I'm perplexed as to why this is happening. I would expect the columns to simply become narrower and adapt to the screen size without breaking the layout. What could be causing this unexpected behavior?

Any insights or suggestions would be greatly appreciated.

Screenshots:

htmlcssresponsive-design

Answer №1

The issue arises from using display: inline-block. By floating your columns to the left, they will function as intended.

With display: inline-block, any spaces or returns between elements with this property will be accounted for and displayed. It's like adding a single space between each inline-block element.

In my opinion, this is the major drawback of opting for display: inline-block instead of floats.

.col3 {
    float: left;
    width: 30%;
    margin: 0 1.25%;
    border: none;
}

If you choose to persist with display: inline-block, there are ways to address the spacing issue, but they are not recommended solutions. I would advise against implementing either of these workarounds.

No space between elements 

<div class="col3">test 1</div><div class="col3">test 1</div><div class="col3">test 1</div>

Comments between elements 

<div class="col3">test 1</div><!--
--><div class="col3">test 1</div><!-- 
--><div class="col3">test 1</div>

Answer №2

The issue you're experiencing is related to the following lines of code

.col3 {
    ..
    width:30%;
    margin: 0 1.25%;
    ..
}

When the width is set to 30% and the margin remains at 1.25%, as the container shrinks, the margin actually widens in relation to the container size due to the inline-block display type.

To resolve this issue, you can remove the margin line altogether or adjust the margin width to

margin: 0 1%;

This adjustment will correct the problem without having to worry about the limitations of inline-blocks.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Two divs positioned to the right on top of each other

I want to align two divs on the right side of their parent div, one above the other. Here's a visual representation: div#top |-------------------------------------||------------| |div#parent ||div#menu | | ...

csshtmlpositioning

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui

What is the best way to conceal a new HTML5 element in Internet Explorer 8?

Here is an example of the code I'm working with: <div id="body-no-aside"> <div id="content"> Some contents </div> <aside id="aside"> Something aside </aside> </div> I have added html5shiv.js to ...

htmlinternet-explorer-8html5shiv

Display the GIF when the mouse hovers over it, but ensure it plays just a single time

Is it possible to make a GIF only play once when you hover over it on a website? I want to avoid the animation repeating if the user hovers over it again without refreshing the page. Currently, I have a static image that changes to a gif on mouseover, but ...

htmlcss

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

javascripthtmlcss

Difficulty arises in designing a tableless layout due to the issue of auto

Wondering why my page is not expanding with its content? Check out my demo on Fiddle http://jsfiddle.net/msas3/. The light blue area should determine the overall height of the page. ...

csslayoutcss-floathtml

Can a local HTML page be embedded within another?

Suppose I have two HTML pages: index.html and embed.html. Within embed.html, there is an arbitrary HTML page that I want to embed inside index.html. I attempted the following: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssiframe

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss

Encountering difficulties accessing XML file on server via anchor tag

I have an XML file on the server that I am attempting to open in a browser when the user clicks on a link. Below is how I have set up the link, but it is not opening the file: Code: <a title="View XML" href="file://///90.0.0.15/docmgmtandpub/PublishD ...

javascripthtmlfileanchor

Why is ng-bind-html not functioning within ng-repeat when ngSanitize is included in the module?

I'm a beginner with AngularJS and I'm trying to bind tags inside an ng-repeat loop, but I've tried using ng-bind-html and ng-bind-html-unsafe without success. The output is not displaying correctly. <script src="https://ajax.googleapis.c ...

htmlangularjs

Finding your current location and address using HTML5 geolocation

My web application utilizes HTML5 geolocation to obtain latitude and longitude coordinates. I am looking for a way to convert these coordinates into actual addresses whenever possible. Once that is done, I need to save the address information into a MySQ ...

phpmysqlhtmlgeolocation

Issue with jQuery DataTables column.width setting failing to meet expectations

Currently, I am utilizing datatables for my project. According to the datatables documentation found here, it suggests using the columns.width option to manage column width. However, when I implement columns.width and render the table, it seems to disreg ...

jqueryhtmlcssdatatables

Wavy CSS Animation

For assistance with my spinning image, please check out this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/ Hello! I'm struggling with a spinning image that has a noticeable wobble when rotating. I can't seem to find a solution to make the rot ...

javascripthtmlcsscss-animations

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

The issue with the JQuery Cookie Plugin is that it is unable to function properly due to the

Although I know there are many similar questions out there, please bear with me. I am not as proficient in JQuery as I am with HTML/CSS, and this is my first time using cookies. On my website, I have a green banner that should disappear when the user click ...

jquerycsswordpresscookies

Is there a method to categorize distinct "continuing" numbered list items in order to show that they are interconnected?

There is HTML code that I am currently dealing with, and it looks like this: <ol> <li>...</li> </ol> ... content <ol start="2"> <li>...</li> </ol> ... more content <ol start="3"> <li&g ...

html

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

Dealing with the alignment of checkboxes in Bootstrap forms is driving me crazy. It seems to look almost perfect on both Chrome and IE on my desktop, where the text and checkbox are aligned almost perfectly. However, when I view it on Chrome on my tablet ...

csstwitter-bootstrap

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

javascriptjqueryhtml

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...

javascriptcsswebgoogle-analyticsportlet