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

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

I'm currently building a website for a fictional ice cream shop to enhance my JavaScript skills. function hideAAndB() { var pickupDiv = document.getElementById("pickupDiv"); var deliveryDiv = document.getElementById("deliveryDiv"); pickupDi ...

javascripthtmldomparameters

The accuracy of IE9 <section> is not quite up to par

When viewing This Page in IE9, the element section#tcs-website-content appears as 990px wide even though its CSS property is set to width: 100%. This occurs despite all parent elements also having a width of 100%, resulting in a browser width of 1024px. A ...

csshtmlinternet-explorer-9width

Variations between <div/> and <div></div>

When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this: <div id="informCandidacyId"/> <div id="idDivFiles"/> Although both divs are being loaded, only one view is added ...

javascriptjqueryhtml

Utilize the appendTo() function and make a switch to dynamically insert content stored in variables into a specified

I am working on developing a page with a central content div, where users have the ability to choose various options that will introduce different additional content. This added content will then present more opportunities for adding new elements, ultimate ...

javascriptjqueryhtmlcssdom

Developing a fresh Outlook email using a combination of javascript and vbscript

I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...

javascriptjqueryhtmlvbscriptoutlook

A step-by-step guide on incorporating box-shadow for the jackColor in the Switchery Plugin

I am looking to add a box shadow to my iOS7 style switches for checkboxes when they are checked. Here is the code I have so far: var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function (html) { va ...

javascriptcssjquery-plugins

Transferring information between pop-up and webpage

I have developed a simple form within an ERP system that allows users to create quick support tickets. However, instead of manually inputting the client ID in the form, I want to provide them with a more user-friendly option. My idea is to include a search ...

javascriptjqueryhtmllaravelpopup

Customizing the input field to have a width of 100%

Could someone provide a solution, like a link or working example, for creating input fields with rounded corners that have a width of 100% and a customizable right border? Here is the current structure I am using: <span class="rounded left-corner" ...

htmlcssinputwidthrounding

Tips on uploading information from a PDF document onto a website

My goal is to develop a program or script that can extract data from PDF form fields and automatically input it into the corresponding textfields on my website, all done through the front end. The problem I'm facing is not knowing where to begin with ...

htmlpdfpdf-form

What could be causing my PHP mail script to report success but fail to deliver the email?

Previously, I have successfully used the same script and AJAX query to manage emails without any issues. However, on this particular site, it seems that the process is not functioning properly. Although the POST request indicates success, no email is being ...

phphtmljqueryajax

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

Is there a way to store a dynamically generated time value from an li element into an input box using JavaScript? I have a basic timer functionality on my website that includes starting, stopping, pausing, taking time snaps, and resetting them. These time ...

javascripthtml

Make a big picture fit into a tiny container

I have a question about image rendering. What occurs when we try to fit a large image into a small container? Consider, for example, creating an HTML page with a 100x100 px image on a device with a pixel ratio of 2. Situation 1: Placing the image inside a ...

htmlcsspixeldevicepixelratio

Utilizing AngularJS to show content based on regular expressions using ng-show

With two images available, I need to display one image at a time based on an input regex pattern. Here is the code snippet: <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="../close.png" ng-show="password != [ ...

javascriptangularjshtml

Following the build in Angular, it only displays the index.html file and a blank screen

According to the information on Angular's official website, running the "ng build" command should generate files in the dist folder ready for hosting. However, after running this command, the index.html file is empty except for the page title. When yo ...

htmlangulartypescriptweb

Tips for ensuring compatibility of CSS in IE7 and IE8

Despite using the following styles to dynamically display alternative colors in my HTML code, I am facing compatibility issues with IE7 and IE8. Surprisingly, everything works perfectly fine on IE9 and above. It seems these styles are not supported by IE7 ...

htmlcssinternet-explorerinternet-explorer-8internet-explorer-7

Styling a layout with two columns, centered with an offset

I have created a layout with two columns - one on the left and one on the right, with the left column containing two rows. However, I am looking to offset the center point of the column to the right so that the left column occupies about 60% of the space ...

htmlcss

Importing styles from an external URL using Angular-cli

How can I load CSS styles from an external URL? For instance, my domain is domain.eu but my site is located at sub.domain.eu. I want to use styles that are stored on the main domain (common for all sites). The example below does not work: "styles&qu ...

htmlcssangularangular-cli

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

I am looking to enclose a series or cluster of consecutive English characters within a <span> tag. In simpler terms, I aim to alter the appearance of English language in my writing. Therefore, I need to identify English characters and surround them ...

javascriptjqueryhtmlregex

Javascript issue: opening mail client causes page to lose focus

Looking for a solution! I'm dealing with an iPad app that runs html5 pages... one specific page requires an email to be sent which triggers the Mail program using this code var mailLink = 'mailto:' + recipientEmail +'?subject=PDFs ...

javascriptioshtmlipadmailer

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss