What is the best way to position a div vertically on the right side of another div?

I've been experimenting with different padding and margins to try and position the div below the dotted div. My goal is to have the div that's currently at the bottom appear vertically aligned to the right of the other div, similar to the layout in this sketch. Can anyone offer guidance on what I should focus on or if there's a better approach to using padding and margins?

 #div {
        border-style: dotted;
        width: 70%;
    }
<head>

    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02606d6d76717670637242372c322c322f6067766330">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<div class="container-fluid bg-white py-4">
        <div class="container">

            <div id="div">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit vero doloribus perferendis alias
                dolor possimus eum pariatur adipisci ipsa id deserunt, iste veritatis architecto ratione esse,
                molestiae dolore quibusdam porro! Lorem, ipsum dolor.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi laboriosam in quam? Tempora
                dolorum incidunt accusantium veritatis repellat corporis quas alias, quasi exercitationem molestias,
                libero quibusdam cumque voluptatibus, hic labore?
            </div>

        </div>
        <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus deserunt aliquam nisi voluptatum
            exercitationem repudiandae illo dolores aut, dolorem ipsam fugiat perferendis tempora quaerat deleniti
            voluptates corporis temporibus nemo dolore.
        </div>
    </div>

htmlcssbootstrap-4

Answer №1

If you're utilizing Bootstrap, dividing content into two columns is as easy as the code snippet below:

<div class="container">
  <div class="row">
    <div class="col-sm-6" >
      <p>COLUMN 1</p>
    </div>
    <div class="col-sm-6">
      <p>COLUMN 2</p>
    </div>
  </div>
</div>

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

Get the PDF in a mobile app using HTML5 and Javascript

For my HTML5/JavaScript-based mobile application, I am in need of implementing a feature that enables users to download a PDF file. The PDF file will be provided to me as a Base64 encoded byte stream. How can I allow users to initiate the download proces ...

javascripthtmlpdfmobile

Can you show me a method to integrate this HTML and CSS code into a Teachable page successfully?

Hey there, I've been encountering some challenges while working with HTML and CSS on a platform known as Teachable. Essentially, I'm aiming to create a layout with 2 columns: - Column 1 - Image - Column 2 - Text Whenever I apply <div class=" ...

htmlcss

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...

jqueryhtmlsortingjquery-ui

What is the best way to create a div that resembles a dotted line?

I have a bar chart type created using different div elements. CSS: .outer, .inner, .target { height: 14px; margin-bottom: 5px; } .outer { background-color: #cccccc; width: 200px; margin: 0 auto; position: relat ...

htmlcss

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

What is the best way to position the logo in the center of the navigation bar, considering there are an unequal number of menu items on each side

As I work on coding a design I found for practice, I am facing the challenge of getting the logo to be centered in the navbar, similar to the layout in the Dribble link below. View Design on Dribble The navigation bar has 4 items aligned on the left and ...

htmlcssfrontend

Stacking images with CSS styling

I'm currently working on creating a CSS design template. Within this project, I have two images named imageOne and imageTwo. Both images are styled with position: relative, as setting one to position: absolute would compromise the responsiveness of ...

htmlcsstwitter-bootstrapresponsive-design

How can I prevent CSS styles from affecting all the tables on my website?

One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...

htmlcss

Leverage the power of HTML5 localstorage in order to maintain the toggle state of jQuery even

After discovering the HTML5 "localstorage" function, I decided to try implementing it in combination with jQuery toggle to keep a div in its most recent state even when the page is refreshed. It seems like a more modern alternative to using cookies. Howeve ...

jqueryhtmllocal-storage

Placing a Label Next to an Input Field using Bootstrap 4

Is there a way to position the label right next to the input form? I've attempted different methods without success. Could you please review my code below? <div class="modal-body"> <form class="form-horizontal"> <div cl ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-form

Missing value: Attempted to access properties of an undefined variable

I've been encountering an issue while trying to transfer data from one component to another using a service. The error message that I keep running into is: ERROR TypeError: Cannot read properties of undefined (reading 'statistics') at St ...

htmlangulartypescriptbootstrap-5

Dynamic value for textbox using Selenium

While working on building a test case, I encountered a problem with a search text box on my web page. The Selenium IDE was used to record the actions taken. type | id=search_input_char_name_136 | myproduct // textbox for search click | css=button.oe_ ...

cssxpathseleniumselenium-ide

Overflow issue with floating labels in Bootstrap 5 within a grid container

Incorporated within this code snippet are floating selects placed inside a bootstrap grid: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[emai ...

htmlcsstwitter-bootstrapbootstrap-5

Exploring the world of web scraping by using Python to loop through HTML elements

Created a Python script to extract information from the website regarding its asset listings. So far, I have successfully retrieved the name of the first coin "Bitcoin," but I'm unable to get the ticker. With 27 pages on the site, each containing 40 ...

pythonhtmlpython-3.xpandasweb-scraping

Using flexbox auto margin within nested elements: A guide

Is it possible to achieve consistent margins between the heading and list items using flexbox? section { display: flex; background: #eee; } h1 { background: #bbb; } ul { display: flex; flex: 1; list-style-type: none; background: #ccc; ...

cssflexbox

Updating data in a SQL database using PHP when a button is clicked

This Question was created to address a previous issue where I had multiple questions instead of focusing on one specific question Objective When the user selects three variables to access data, they should be able to click a button to modify one aspect o ...

javascriptphpjqueryhtmlmysql

Is it possible to initiate validation on an HTML element without the presence of a form?

Is it possible to trigger validation on an HTML element without using a form? For example, I have set the required attribute on a field, but when I click the Save button, the field doesn't display the red outline indicating validation failure. I susp ...

javascripthtml

What is the best way to add bold formatting to text enclosed in parentheses using javascript/jquery?

How can I use jQuery or JavaScript to make the text inside parentheses bold? For example: "what is your Age (in Year)." I need assistance in making the text within parentheses bold using either jQuery or JavaScript. Can someone help me with this task? ...

javascriptjqueryhtmlstring

How to extract data-bound value from a <span> element using Angular

I have a table that serves as a form, with most of the cells containing input fields. <td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td> <td><input id="testingInput2" type=" ...

javascripthtmlangularjs

What is the best way to create a JQuery click event that applies to every button on my webpage?

I am working on a website settings page where logged-in users can edit the content displayed on the public page. I have a form that uses AJAX to update the content when submitted. My main question is how to modify the code so it can determine which text b ...

htmljqueryajaxexpressejs