What is the best way to arrange 4 divs in a row?

Looking to align these divs horizontally, I attempted to wrap them in a div and use display:inline-block; without success. I'm trying to understand positioning and display better. Any assistance would be greatly appreciated.

Here is the HTML:

<div class="small_box_right">
</div>
<div class="small_box_right">
</div>
<div class="small_box_right">
</div>
<div class="small_box_right">
</div>

CSS:

.small_box_right {
position: relative;
display:flex;
background: #CDCDB4;
border: 4px solid black;
height:300px;
width:300px;
}
.small_box_right:after, .small_box_right:before {
left: 100%;
top: 50%;
border: solid black;
content: " ";
height: ;
width: ;
position: absolute;
pointer-events: none;
}
.small_box_right:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #CDCDB4;;
border-width: 30px;
margin-top: -30px;
}
.small_box_right:before {
border-color: rgba(194, 225, 245, 0);
border-left-color:black ;
border-width: 36px;
margin-top: -36px;
}
htmlcss

Answer №1

Check out the DEMO

Here is the HTML code:

<div class="box-cover">
<div class="small_box_right">

</div>
<div class="small_box_right">

</div>
<div class="small_box_right">

</div>
<div class="small_box_right">

</div>

</div>

And here is the CSS code:

  .box-cover{
        position: relative;
        height: 300px;
        overflow: auto;
        width: 1550px;
    }

    .small_box_right {
        position: relative;
        display:inline-block;
        background: #CDCDB4;
        border: 4px solid black;
        height:300px;
        width:300px;
        margin-right: 50px;
    }
    .small_box_right:after, .small_box_right:before {
        left: 100%;
        top: 50%;
        border: solid black;
        content: " ";
        height: ;
        width: ;
        position: absolute;
        pointer-events: none;
    }
    .small_box_right:after {
        border-color: rgba(136, 183, 213, 0);
        border-left-color: #CDCDB4;;
        border-width: 30px;
        margin-top: -30px;
    }
    .small_box_right:before {
        border-color: rgba(194, 225, 245, 0);
        border-left-color:black ;
        border-width: 36px;
        margin-top: -36px;
    }

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

Is there a gsub feature available in awk for applying color to characters on unix systems

I have a script that generates an output.txt file. The script contains 4 columns shown below: Filename Date Space status xyz.txt Nov18 3.8M On_time mnp.txt Nov11 8.7M Delayed pqr.csv Nov16 9.0M No_records I automate sending the output file via email, and ...

htmlshellunixawkgsub

Issues arise when trying to integrate Bootstrap modal with bootcards

I am currently implementing a modal with bootstrap: <div class="modal" id="contact-update-view"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-head ...

htmlcsstwitter-bootstrapmodal-dialogz-index

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Objective: Ensure that the radio buttons are mandatory. Challenge: The element mat-error and its content are being displayed immediately, even before the form is submitted. It should only show up when the user tries to submit the form. I attempted to use ...

htmlangulartypescriptangular-materialangular-reactive-forms

Retrieving Data from Outside Source using AngularJS

Is there a way to retrieve JSON-Text-Stream data from a specific URL (e.g. SOMEURL/ean.php?id=4001513007704)? The returned result typically appears as follows: { "product": { "ean_id": "4001513007704", "title": "Gerolsteiner Mineralw ...

javascripthtmlangularjscordovaionic-framework

What is the method for adjusting the border color of an ng-select component to red?

I am having an issue with the select component in my Angular HTML template. It is currently displaying in grey color, but I would like it to have a red border instead. I have tried using custom CSS, but I haven't been able to achieve the desired resul ...

angularcssbootstrap-4angular-ngselect

Having trouble modifying a value in a form and submitting it to the following jsp page

I'm encountering an issue with changing the value in a hidden input element before submitting data to another JSP file (db.jsp) for processing. The value should be different depending on which button is clicked, but it always remains as the default va ...

javascriptjavajqueryhtmljsp

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

My goal is to create a unique overlay effect on images of different sizes within a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will remain consistent, while the images themselves need to dynamically adjust. C ...

jquerycsstransparencyoutline

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

javascripthtml

Creating efficient browser caching for static elements like CSS, JavaScript, and images

Just to clarify, I am utilizing Django with an Apache server. During testing of a website on Pingdom Tools, I encountered the following error messages: The cacheable resources mentioned below have a short freshness lifetime. It is recommended to specify ...

htmldjangoapachecaching

Use parseFloat to extract numerical values from various instances of a particular class

On my category page, I showcase various products with sections for Was Price, Save Price, and New Price displayed. To demonstrate the structure of the Was Price: <p class="old-price"> <span class="price-label">Was</span> <span ...

javascriptjqueryhtml

Adding HTML and scripts to a page using PHP and JS

Currently, I am utilizing an ajax call to append a MVC partial view containing style sheets and script files to my php page. Unfortunately, it seems that the <script> tags are not being appended. After checking my HTTP request on the network, I can ...

javascriptphpjqueryhtmlajax

Troubleshooting Alignment Problems within Bootstrap Containers

As I embark on my journey of constructing my inaugural website using Bootstrap 4, a wave of questions has flooded my mind. These queries either remain unanswered or beckon for further clarification. Shall we dive into them? Is it considered standard pr ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing a nested div structure for web design

Forgive my lack of expertise in web programming, as my knowledge is limited and I struggle with finding the right terms even through online searches. With that said, my question (which may be worded oddly due to my lack of familiarity with the topic) is: ...

htmlcssweb

What steps can be taken to ensure the CSS/HTML image aspect ratio remains consistent on various monitors?

My square-shaped image (1:1 aspect ratio) is displaying differently across various devices when I use the codes below. While some show it as a perfect square, others display it as a rectangle. Is there a solution to maintain the original aspect ratio consi ...

htmlcss

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

javacssjavafxfont-awesome

Enhancing this testimonial slider with captivating animations

I have designed a testimonial slider with CSS3 and now I am looking to enhance it by adding some animation using Jquery. However, I am not sure how to integrate Jquery with this slider or which plugins would work best for this purpose. Can anyone provide g ...

javascriptjquerycss

My XSLT document is not converting to valid HTML code

As a beginner, I've recently taken up XML and XSLT. A task was assigned to me to create an XSLT file based on the XML snippet provided below. <?xml version="1.0" encoding="UTF-8"?> <event> <title>Test 1</title> <descript ...

htmlxmlxslt

Choosing multiple options in a dropdown menu that updates dynamically according to the selection made in another dropdown

Is there a way to enable multi-select in a dynamically populated dropdown based on the selection of another dropdown? I have two dropdowns on my page. Initially, the second dropdown is empty. When a value is selected in the first dropdown, the options in ...

javascripthtmljquery-uimulti-selectdropdown

Ways to update a specific div upon clicking an image

Is there a way to refresh a div using an image click? I have an image with the id 'sellhide' and another div with the id 'sellChart'. Below is the code: <div class="col-xs-12 col-lg-6 col-sm-6 col-md-6 index_table_three" id="sellCha ...

javascriptphpjquerycssajax

Steps to programmatically obtain the code for a contentPlaceHolder

I am seeking a way to extract the code of a contentPlaceHolder utilizing various Html parsers. The challenge is that I require a url, which is not feasible due to it being a masterpage. Essentially, there is a select tag where you can choose an option, tr ...

javaandroidhtmlmaster-pageshtml-content-extraction