What is the best way to create a line of divs within a row?

I am attempting to create a series of divs, with each div containing two rows. Here is the code I have so far:

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8>
    <title>Rows and Divs</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>:
<div class="inline">
    <div class="block">
        <p>
            ABC
            <br>
            DEF
        </p>
    </div>
    <div class="block">
        <p>
            GHI
            <br>
            JKL
        </p>
    </div>
    <div class="block">
        <p>
            MNO
            <br>
            PQR
        </p>
    </div>
    <div class="block">
        <p>
            STU
            <br>
            VWX
        </p>
    </div>
</div>
</body>
</html>

style.css

div.inline{
    display: inline;
}

div.block{
    display: block;
}

Expected output:

ABC    GHI    MNO    STU
DEF    JKL    PQR    VWX

Current output:

ABC 
DEF

GHI
JKL

MNO 
PQR

STU
VWX

What changes can be made to correct this issue and achieve the desired layout?

htmlcsslayout

Answer №1

Here's an example of how to achieve this effect: https://jsfiddle.net/ar97yzqv/1/ CSS code: 

.inline{
        display: inline;
    }

    .block{
        display: inline-block;
    }

Answer №2

When you set the .block class to display as a block element, it becomes a full-width element that clears everything from both sides.

To fix this issue, change the display property of the element to either inline or inline-block.

.inline {
  display: inline;
}
.block {
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8>
  <title>Row of Divs</title>
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <div class="inline>
    <div class="block">
      <p>
        ABC
        <br>DEF
      </p>
    </div>
    <div class="block">
      <p>
        GHI
        <br>JKL
      </p>
    </div>
    <div class="block">
      <p>
        MNO
        <br>PQR
      </p>
    </div>
    <div class="block">
      <p>
        STU
        <br>VWX
      </p>
    </div>
  </div>
</body>

</html>

Answer №3

There are several methods to achieve this.

One option is to use inline-block display property, which is recommended.(recommended)

.block { display: inline-block; } /*child*/

Alternatively, you can also use float.

.block { float: left; } /*child*/

Another method is using flex.

.inline { display: flex; } /*parent*/

You can also achieve the desired layout by using table + table-cell method.

.inline { display: table; } /*parent*/
.block { display: table-cell; } /*child*/

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

The challenge of removing an event listener

There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely. I attemp ...

javascripthtmlcss

JavaScript script to modify the parameter 'top' upon clicking

Here is the pen I've made. HTML <div class = 'cc'> <div class = 'bb'><div class = 'aa'> Some word </div></div> </div> CSS .cc { width: 100%; min-height: 90px; margin: 0; ...

javascripthtmlcss

Angular JS: Changing Byte Array into an HTML File

I created an HTML file using ASPOSE workbook and stored it in a memory stream in C#. Now, I am trying to show this HTML file in an Angular JS environment within the Div element. C# Snippet: wb.Save(htmlMemoryStream, new HtmlSaveOptions() { IsExportComment ...

htmlarraysangularjstype-conversion

Tips for building a dynamic view using Angular

I am working on a project where I need to dynamically generate multiple horizontal lines using data from a JSON file, similar to the example in the image below. https://i.sstatic.net/MthcU.png Here is my attempt: https://i.sstatic.net/EEy4k.png Component. ...

javascriptcssangularhorizontal-line

Access the Page After Being Redirected

Forgive my potentially naive question, but I am curious to know if there exists a code that can prevent a page from opening when accessed via a direct link, but allow it to open only if the link is coming from another page. For instance, imagine I have a ...

phphtml

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

javascripthtmlcsstwitter-bootstrap

What is the best way to ensure all Bootstrap 4 columns have uniform heights?

Important Note. While this question has been asked numerous times in the past, it is now time for fresh responses as we are approaching the release of Bootstrap 4 which includes full flexbox support. My goal is to achieve equal column height using Bootstr ...

htmlcsstwitter-bootstrap

Web fonts are functioning properly only on Chrome and Safari for Macintosh operating systems

A web designer provided me with some fonts to use on a website. Below is the content of my fonts.css file: /* Font Awesome */ /* Font Awesome Bold */ @font-face{ font-family: 'font-awesome'; src: url('fonts/font-awesome-bold-webf ...

htmlcssfonts

Concealing and revealing an element using the CSS property visibility:hidden/visible

There are two div-boxes that should show/hide when clicking on another two div-boxes. I want the divs to maintain their space so as not to disrupt the DOM, ruling out the use of .toggle(). I attempted this approach without success: $('#red, #pink&ap ...

javascriptjquerycss

AngularJS ng-repeat nested loop allows you to iterate through an array

I am currently working with the following JSON data: { "ListNhomThanhTra": [ { "ListKeHoachThanhTra": [ { "ListDoiTuong": [ { "MA_DV_DUOC_TT": "DT01", ...

htmlangularjshtml-table

Python: Remove tag and substitute u00a0 within a JSON document

I have a JSON file structured like this: [ { "content": ["<p style=\"text-align:justify;\"> This is content1</p>"], "title" : ["This is\u00a0title 1"] }, { "content": ["<p style=\"text-a ...

pythonhtmljsonunicode

Rotate CSS elements dynamically using jQuery

I'm trying to figure out how to change the rotation value of an image element in my code. Currently, the rotation is set to 315 degrees, but I want to change it to 0 when a click event occurs. Can anyone help me with this? ...

jquerycssrotation

How to dynamically insert a new row below a specific row with a sliding animation in jQuery

My task is to create a tree-like table structure where clicking on a specific row will reveal and add new rows below it. Specifically, I am designing the Category and SubCategory structure. Currently, I can append rows after a specified row but am struggl ...

javascriptjqueryhtmlcss

What is the best approach to prevent automatic zoom on a mobile-responsive website?

Looking to optimize my website for mobile viewing. Currently, when viewing on a mobile device, I have to zoom out to see the correct size. How can I ensure it displays properly without needing to zoom out? This is the code snippet I am using: <meta ...

html

How does shinyFeedback take precedence over custom CSS styles?

Objective: Within my application, users are required to upload a file in .csv format. If they attempt to upload a file that is not in the correct format, an alert message (showFeedbackWarning()) should be displayed near the fileInput() element. Once the ...

cssrshiny

Mobile browsers currently do not support hovering effects

I’m currently facing an issue with the hovering effect on a mobile browser. The hovering effect I have implemented shows text inside a circle only when hovered over by a mouse. However, this does not work on mobile browsers like iPhone. I need to find a ...

htmlcss

Ways to transfer textbox value to another jsp page upon clicking a separate form button without relying on javascript

Here is the code snippet: <body> <input type=text name=name> <form action=new3.jsp method=post name="f1"> <input type=text name=name> <input type=submit value=next> </form> <form action=new1.jsp method=post> <i ...

htmljsp

Issue with Bootstrap dropdown list not opening up

Having an issue where the Bootstrap dropdownlist is not displaying its list of contents when clicked. I attempted to add the jQuery library before the bootstrap.min.js file, as suggested in a solution on Stack Overflow, but unfortunately, it did not work ...

htmldrop-down-menubootstrap-4

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

htmlcssanimationhovertransition

Magento's Order Success Page must use the secure HTTPS protocol instead of the www prefix

Can anyone provide guidance on how to ensure that the order success page in Magento is displayed as https:// instead of just wwww? I have SSL configured on my website and it's imperative that the order confirmation page is loaded using https:// for G ...

htmlcssmagentosslgoogle-trusted-stores