I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side by side.
To see the code and follow along, please visit: https://codepen.io/shanjaynithin/pen/XWmBPYd
This is the output format I am aiming for: Sample image
If you want to achieve this layout, consider using the flex property:
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
.boxes {
margin: 10px;
border: 1px solid red;
}
img{
height:100px;
width:100px;
} <div class="container">
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="http://placekitten.com/301/301" alt="affordable-prices">
<h3 >Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>
.container {
display: flex;
width: 100vw;
}<div class="container">
<div class="boxes">
<img src="images/icon-snappy-process.svg" alt="snappy-process">
<h3>Efficient Process</h3>
<p>Complete our application process in just minutes, not hours. No need to waste time filling out long forms.</p>
</div>
<div class="boxes">
<img class="eg" src="images/icon-affordable-prices.svg" alt="affordable-prices">
<h3>Great Prices</h3>
<p>We offer affordable prices without compromising on quality coverage. You don't have to worry about high costs with us.</p>
</div>
<div class="boxes">
<img src="images/icon-people-first.svg" alt="people-first">
<h3>Customer-Centric Approach</h3>
<p>Our plans prioritize you first, ensuring that you are covered when you need it without any hidden conditions or clauses.</p>
</div>
</div><div id="container">
<div>Apple</div>
<div>Banana</div>
<div>Cherry</div>
</div>
#container div{
float: right;
width: 150px;
height: 150px;
border: 2px dashed;
}
Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...
If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it: The example shown above is ...
I have a set of checkboxes that I want to use for filtering purposes. <div class="filter"> <div class="checkbox"> <label><input type="checkbox" rel="canada"/>Canada</label> </div> <div class="chec ...
I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...
I've been wrestling with this landing page for the past day and I just can't seem to get the form section right. Take a look at this link! The form at the bottom of the page is all over the place. Below is the CSS snippet that I have been using ...
I successfully integrated multiple modals into my webpage, using a template from w3school that I customized. Now, I am curious to see if it is possible for each modal to have its unique link. For example, when I open Modal 4, the URL would change to myweb ...
I understand that this question has been asked multiple times before, but I am struggling to get it right! My goal is to keep the footer at the bottom of the page, but it seems to be acting strangely. Here is my HTML: <!DOCTYPE HTML> <html& ...
I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...
Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...
One way to select all checkboxes with HTML code: Select All <input type="checkbox" name='select_all' id='select_all' value='1'/> To achieve this with Javascript code: <script type="text/javascript> $(&apos ...
Currently, I am working on optimizing my website for high resolution monitors, particularly the new iPad. The site is already formatted to my liking, with images having increased resolutions while still fitting into specific DIVs. For instance, an image wi ...
I am an intern student and I have a query. Currently, I am working on bug fixing for an Openstack cloud, JavaScript, and Node.js web application. My task involves resolving toastr.error messages and translating them into different languages. How do I ret ...
This is the script that I have included in my HTML code: <div class="progress-bar"></div> <script type="text/javascript"> $('.progress-bar').gradientProgressBar({ value: $(this).attr('$scope.moodvalue'), ...
I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...
Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...
I have a challenge with two dropdown menus. One contains names and the other subjects, along with a table displaying information in three columns: name, subject, and marks. I would like to implement a filter based on the selections in these two dropdowns. ...
<p style="width:60px"> This is just a sample text. It is a piece of text that doesn't really say anything meaningful.</p> When this text is rendered as HTML, it would look like this: This is just a sample text. It is a piece of text ...
Suppose http://example.com/image returns unique image data in response headers and the image itself. Each request to http://example.com/image generates a different image that is not related to the request itself. Besides the image, additional information s ...
I encountered an error in my Chrome console while working on a WordPress site. The following error message showed up: "Failed to set referrer policy: The value 'http://example.com/comic/' is not one of 'always', 'default' ...
I am currently working on setting up a navigation bar with a PNG link in the top left corner, and a text element "menu" in the top right corner. Despite my efforts, I have not been successful in achieving this layout using "float: right;" The code snippet ...