What could be causing the malfunction in this positioning and display?

<article id="l1">
    <img class="active_pic" id="a1" src="img/load.gif"/>
</article>
<article id="l2">
    <img class="active_pic" id="a2" src="img/load.gif"/>
</article>
<article id="l3">
    <img class="active_pic" id="a3" src="img/load.gif"/>
</article>

Here, I have the HTML code for placing multiple <article> elements side by side, but there seems to be an issue with the display layout:

article{
   height:90%;
   margin:0;
   padding:0;
   border:0;
   text-align:left;
   display:inline-block;
}

Despite my efforts, the <article> elements are not touching each other as I desire. Changing the display property to inline works, but I want inline-block. However, this causes the elements to take up 100% width instead of adjusting to the image width.

I admit this may be a basic issue, but I have exhausted my knowledge on this matter.

For reference, I have a link to a similar layout that I'm aiming for:

On this page, selecting the left drawing ('colorful') will highlight the problem I am facing.

htmlcss

Answer №1

attempt

section{
   height:80%;
   margin:0;
   padding:0;
   border:0;
   text-align:right;
   float:right;
}
section > img{
    border:1px solid blue;
    width:150px;
    height:150px;
   display:inline-block;

}

Answer №2

Have you experimented with using floats instead of the current layout technique?

article{
   height:90%;
   margin:0;
   padding:0;
   border:0;
   text-align:left;
   float:left;
    border:1px solid red;
}

Feel free to check out the code in action: http://jsfiddle.net/WEfPj/

Answer №3

Have you experimented with utilizing floats?

section {
 float: right;
 width: //input the width i.e. 200px; 50%?
}

Answer №4

It has been suggested in previous responses that applying float: left to your article elements is likely the solution you are seeking. However, in addition to this, it is recommended to also include display: block for your images to eliminate any excess whitespace between the article and img elements.

article {
    height:90%;
    margin:0;
    padding:0;
    border:0;
    text-align:left;
    float: left;
}

article > img { display: block; }

Answer №5

Have you ever wondered why elements take up less than the full width of the page when you haven't specified how much space they should occupy?

For 3 elements to be placed side by side, try setting the width to approximately 30% and adjust the margins accordingly for a more balanced look.

The key factor is to define a specific width for the elements.

In addition, utilizing CSS3's calc() function can come in handy. Consider using min-width and max-width properties for more control.

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

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Changing focus to 'DIV' element without JQuery using Javascript and Angular's ng-click event

Instructions for using an Angular directive to set focus on a "DIV" element when clicked <a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content">Skip To Main Content</a> <div class="getFocus" role="button" ...

javascripthtmlangularjssetfocus

Challenges with iFrame Resizing on Internet Explorer

After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...

cssinternet-exploreriframeinternet-explorer-8scale

Issue with different domains causes GET requests to be changed to OPTIONS requests

In my recent request and response interaction, I encountered an issue with the Access Allow Control Origin being set to *. Remote Address:xx.xxx.xxx.xxx:xx Request URL:http://api-test.example.com/api/v1/sample Request Method:OPTIONS Status Code:405 Method ...

jqueryajaxhtmljquery-mobilecors

Angular 7/8 now allows for empty strings in Template Driven Forms

I've encountered a problem with my form validation that allows empty strings. The required attribute works, but it still allows the user to input spaces. I came across a solution online which involves using ng-pattern with the pattern pattern=".*[^ ]. ...

htmlangularvalidationtemplates

Displaying truncated title text

Would it be feasible to display clipped text (overflow: hidden) in a way that is fully readable when hovered over? An attempt like this: div:hover { overflow: visible; background-color: yellow; } results in the text overlapping, making it impossible ...

htmlcsshoveroverflow

The width of DIVs in Mac Safari exceeds that of other browsers

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"&g ...

htmlcss

Tips for aligning pagination block at the center using react-bootstrap

Currently, I have implemented a custom pagination system for a small web application that I am developing using react-bootstrap. I have successfully integrated and set up the pagination functionality. As someone who is still new to react and bootstrap, wit ...

htmlreactjspaginationreact-bootstrap

The background image in CSS fails to display on IE11 when applied to a pseudo-element with the position set to fixed

Check out the issue showcased in JSfiddle: https://jsfiddle.net/qjtbchpu/11/ <div id="container"> <article> content here </article> <article> more content here </article> </div> #container::before { ...

cssinternet-explorercss-positionpseudo-element

Customizing the arrow of a Bootstrap tooltip and adjusting its positioning

I've implemented a bootstrap tooltip to show an image in it. So far, I've been successful in achieving this. https://i.sstatic.net/hgzyL.png However, my current requirement is as follows: https://i.sstatic.net/xcxWZ.png I would like to adjust ...

javascripthtmlcssbootstrap-4

What steps should I take to ensure that this 3D transformation functions properly in Internet Explorer 10?

I'm struggling to get a CSS 3D transform to function properly in IE10. The issue arises because IE10 lacks support for the preserve-3d property. According to Microsoft, there is a workaround available. They suggest applying the transform(s) of the pa ...

htmlcssinternet-explorer3dinternet-explorer-10

Error: You can't call .text as a function in jQuery

While trying to retrieve the text from my td, I encountered the following error: $tds[2].text is not a function. The output of console.log('td',$tds[2]) shows: https://i.stack.imgur.com/OUngP.png $(document).ready(function() { $trs = $(&ap ...

javascriptjqueryhtml

Ways to transform a 4-column CSS table into a 2-column layout for mobile and tablet viewing

For my latest project, I am faced with the challenge of creating a responsive table that transforms from 5 columns to 2 columns on smaller screens. While using complex jQuery is an option, I prefer a more semantic approach. Additionally, I need to incorpor ...

htmlcsshtml-table

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

javascripthtmlcssreactjs

Buttons are to be placed at the identical location

Here is the HTML code I am working with: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33545c5446734a525b5c5c1d505c5e">[email protected]</a> wants to be your partner. Do you agree? <br><input type="but ...

html

What could be causing the issue with the focus not being activated when clicking on the input field in Vue?

I am facing an issue where I have to click twice in order to focus on a specific input field, and I'm having trouble setting the cursor at the end of the input. I attempted to use $refs, but it seems like there may be a deeper underlying problem. Any ...

javascripthtmlvue.js

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

htmlcssnext.jsserver-side-renderingcritical-css

Ways to manage an element that has been loaded using the load query function

After implementing the query load function to update posts on the homepage, I was able to display the most up-to-date posts. However, a new issue arose: Whenever I updated all posts without refreshing the entire page, I needed a way to control the element ...

javascriptjqueryhtmlnode.jsajax

Is it possible to update the CSS file of an external SVG file in real-time?

Is there a way for an SVG image to reference another CSS file? A webpage contains an SVG file. A button allows users to switch between classic colors and high contrast mode on the entire webpage, including the SVG image. Attempt w.css (white backgrou ...

javascriptcssxmlsvgstylesheet

Ensure that input field is validated only upon clicking the save button in Angular framework

Can anyone suggest the most efficient method to validate required fields in an input form using AngularJS? I want to display an error message only after the user clicks the save button (submit). Thank you in advance. ...

javascripthtmlangularjsvalidation