Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture:

The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the left side. Ideally, each result should be contained in its own DIV.

How can I ensure that the height of the DIVs on the left column doesn't affect the height of the search results?

I hope this explanation is clear.

EDIT: Apologies if my explanation was unclear; essentially, the third result moves over to the left once it passes the search box. I require them to stay aligned. Additionally, all result DIVs need to have the same classes.

htmlcsstwitter-bootstrap-3

Answer №1

This is my approach.

<div class="wrapper">
 <div class="row-container">
  <div class="col-sm-3">input field</div>
  <div class="col-sm-9">
    <div class="inner-row">
      <div class="col-sm-12">output 1</div>
    </div>
    <div class="inner-row">
      <div class="col-sm-12">output 2</div>
    </div>
    <div class="inner-row">
      <div class="col-sm-12">output 3</div>
    </div>
  </div>
 </div>
</div>

Answer №2

Creating an HTML Layout

<div class="row">

 <div class="col-md-4">  <!-- Left Box -->

 </div>

 <div class="col-md-8"> 

    <div class="results"> <!-- Right Box1 -->
    </div>

    <div class="results"> <!-- Right Box2 -->
    </div>

    <div class="results"> <!-- Right Box3 -->
    </div>

 </div>

</div>

Styling with CSS

.results {

     width:  100%;
}

To add more boxes into the first column use this code snippet

<div class="row">

 <div class="col-md-4"> 

    <div>  <!-- Your left box -->
    </div>

    <div>  <!-- Your other box -->
    </div>

    ...

 </div>

 <div class="col-md-8"> 

    <div class="results"> <!-- Right Box1 -->
    </div>

    <div class="results"> <!-- Right Box2 -->
    </div>

    <div class="results"> <!-- Right Box3 -->
    </div>

 </div>

</div>

Answer №3

“Is there a way to completely disconnect the height of the left column DIVs from the search results?”

Fortunately, this is already the default behavior. The challenge lies in trying to align the heights of elements in separate columns, which proves difficult in Twitter Bootstrap 3 due to its reliance on floats rather than flexbox (JavaScript may be necessary for this task).

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

What is the best way to connect a relative CSS stylesheet to a master page?

My Java application generates several HTML pages, organized in different directories: html_pages/ | ----> landin_page.html html_pages/details | ----> index1.html html_pages/more_details | ----> index2.html html_pages/css | ...

javascripthtmlcss

Creating a gap between two rows within a Bootstrap table

Is there a way to create space between two bootstrap table rows? I am looking for something like this: --------- | A B | --------- --------- | C D | --------- --------- | E F | --------- Here is the code snippet: <script src="https://cdnjs.c ...

htmlcssbootstrap-4row

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Here is the HTML code for my custom Alexa Skill. <head> <script src="https://cdn.myalexaskills.com/latest/alexa-html.js"> </script> </head> <body> var alexaClient; Alexa.create({version: '1.0'}) .t ...

javascripthtmlalexa-skills-kit

Tips for enabling unrestricted unencoded HTML in XmlNode or XmlElement with XmlSerializer

Looking for a solution to generate an XML element that can handle a string of text containing HTML or other valid XML elements. Here's an example: "Test text with <strong>custom nodes</strong> that shouldn't be encoded" I've at ...

c#htmlxmlxml-serializationxmlserializer

Solving the issue of .css being blocked due to MIME type while building tailwind is a common problem faced by

https://i.stack.imgur.com/nrDgJ.png While working on my tailwind CSS project, I ran npm run build. However, upon opening the built index.html file, I noticed that the CSS file was not loading properly. How can I resolve this issue? I am unsure of what st ...

cssnpmtailwind-cssweb-development-servernpm-publish

How can I correctly focus on 'highlight' events using the tab key on an HTML element?

I'm struggling to figure out the event that is triggered when an element gains focus through tab navigation. I want all buttons in the codepen provided to expand to full size when tabbed over. https://codepen.io/anon/pen/YopBaz Currently, I have achi ...

htmlcss

Upgrading a bootstrap 3 class to bootstrap 4

Can someone help me update the classes col-sm-push-9 and col-sm-pull-3 from bootstrap-3 to bootstrap-4 in the HTML code below? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <titl ...

htmlbootstrap-4

Optimizing JavaScript for efficient handling of large arrays

I'm currently developing an image editing program using JavaScript to expand my knowledge of the language. The images I am working with are typically around 3000 x 4000 pixels in size, resulting in a total of 48,000,000 values to manage when convertin ...

javascripthtmlperformanceimage-processingweb-worker

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

How can I distinguish the search results from the while loop section at the bottom of the page?

One issue here is the footer's margin position being influenced by the results of the while loop. To see the problem more clearly, visit this link: Below is the code snippet: <div id="print_output1"> <?php $co ...

phphtmlcssfooter

When an image is clicked, I would like it to redirect to a different page

In my slider image list, each image has an ID. If the ID becomes equal to a specific number, such as 24, I want that particular image to move to another page when clicked. Here is the code snippet: <?php $sql = "select * from ".$tblImages." Where cid= ...

phphtml

How can I make a div or iframe stretch to fill the remaining space using javascript, jQuery, or css?

I'm looking for a way to make the middle iframe dynamically fill the remaining space between two fixed height iframes (one at the top and one at the bottom) regardless of the window screen size. Is there a technique or method that can achieve this? th ...

javascriptjqueryhtmlcssxhtml

What is the process to modify the color of text that has been _selected_ within a `St.Entry` component in a Cinnamon Applet for the Gnome

I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...

cssgnome-shell-extensionsgjscluttercinnamon

Tips for extracting HTML entities from a string without altering the HTML tags

I need assistance with removing HTML tags from a string while preserving html entities like &nbps; & é < etc.. Currently, I am using the following method: stringWithTag = "<i> I want to keep my ->&nbsp;<- element space, bu ...

javascripthtmltagsentityinnerhtml

Styling the Next and Previous Page Links in your WordPress Website

Currently working on developing my own custom Wordpress theme and everything is going well, except for one little detail. I am trying to customize the styling of my next/previous page links so that the next page-link appears on the right side and the previ ...

phphtmlcsswordpress

The justify-content property is failing to properly align content along the main axis in Grid layout

I've implemented tailwind for my CSS styling. Within a simple div, I have 3 child elements. My goal is to create space between them along the main axis. Here's the code snippet in question: <div className="grid grid-cols-12 text-white ju ...

htmlcssnext.jstailwind-csstailwind-ui

menu with dropdown options within dropdown options

I am experiencing an issue with creating a nested menu within my navigation header. Specifically, under the "Reports" section, I want to have two submenu items named "Global Shop" and "Ndustrios". When hovering over either of these submenus, additional men ...

htmlcssdrop-down-menu

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

React.js Material UI Dropdown Component

Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up. My goal is for the selected item to be contained within the <li> element, simi ...

htmlcssreactjsmaterial-ui

I'm having trouble getting my Bootstrap Navbar list aligned in the center

I've been attempting to align my menu list items in the center of the bootstrap navbar but have had no success. Despite trying various CSS styles, the items remain on the left side. Please take a look at my HTML and CSS below and let me know if there ...

htmlcsstwitter-bootstrap