Side-to-Side Bootstrap Display Panel

I have been attempting to customize a Bootstrap panel to create a horizontal version, but I am struggling to align the panel heading vertically with the content in the panel body. I believe it may be related to clearing the divs.

Front-end development is not my strong suit, and although I know this should be a simple task, it is currently challenging for me!

Below is the code I am using:

<div class="panel panel-default panel-horizontal">
    <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.</p>
    </div>
    <div class="panel-heading">
        <p>Example</p>
    </div>
</div>

Here is the CSS associated with it:

.panel-horizontal .panel-heading {
    border-bottom: 0;
    border-right: 1px solid transparent;
    border-top-right-radius: 0;
    margin-bottom: 0;
    width: 150px;
}

.panel-horizontal .panel-body {
    float: right;
    margin: 0 0 15px 150px;
    padding-bottom: 0;
}

Can anyone help me figure out what I am missing?

htmlcsstwitter-bootstrap-3

Answer №1

UPDATE

I decided to revamp my panel-horizontal by utilizing the display: table property instead. The end result is pretty sturdy and functional: http://jsfiddle.net/seydoggy/9jv5e8d1/

Original post

Although this is an older issue, I stumbled upon your fiddle while searching for a similar solution. I added some stylish panels around columns and created this version: http://jsfiddle.net/qy96nh5L/

#wrap {
    padding: 2em;
}
.panel-horizontal {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.panel-horizontal > .panel-body {
    background-color: white;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ddd;
}

<div id="wrap">
<div class="row panel panel-horizontal">
    <div class="col-xs-3">
        <div class="panel-heading">Example</div>
    </div>
    <div class="col-xs-9 panel-body white">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, deserunt, aliquam, inventore commodi at placeat blanditiis quaerat quo fuga molestias ex quos debitis quidem dolor fugit aspernatur iste iusto quibusdam.
    </div>
</div>

Answer №2

To align the panel-heading vertically next to the panel-body, you need to apply a float property to both divs. Check out the modified CSS below. I adjusted the width of each div as well for better positioning. Using percentages with floating elements is effective. The panel-heading has been set to 19% width and the panel-body to 80% width. Typically, the panel-heading would be 20%, but due to the 1px transparent border, it extends beyond that limit and pushes the panel-body to the next line. To resolve this issue, I reduced the percentage by 1. Remember that when two elements are floated next to each other, their combined widths should not exceed the parent element's width. Both floated elements must have specified widths to appear on the same "line".

.panel-horizontal .panel-heading {
       float: left;
       width: 19%;
       padding: 0;
       border-bottom: 0;
       border-right: 1px solid transparent;
       border-top-right-radius: 0;
       margin-bottom: 0;
}

.panel-horizontal .panel-body {
       float: right;
       margin: 0 0 15px 0;
       padding-bottom: 0;
       width: 80%;
       padding: 0;
}

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 sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

javascriptjquerycsssortingwebkit

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

htmlcakephponchange

What is the best way to align paragraphs vertically within a required square-shaped div using CSS (with images for reference)?

I am trying to style a table in a specific way, but I'm facing some challenges. First, I want to make the internal div inside the table square with a percentage height. Next, I need to have two paragraphs stacked on top of each other within the same ...

htmlcssflexbox

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

Customize the text that appears when there are no options available in an Autocomplete component using React

Recently, I came across this Autocomplete example from MaterialUI that caught my attention. https://codesandbox.io/s/81qc1 One thing that got me thinking was how to show a "No options found" message when there are no search results. ...

javascripthtmlreactjsmaterial-ui

What is the best way to retrieve the href and id values dynamically from a card in React JS?

Hello everyone, I'm new to stackoverflow and still in the process of learning how to code. Please bear with me if this question sounds like a newbie one. My question is about having dynamic values for href and id when mapping data using axios to crea ...

javascriptjqueryhtmlreactjs

My program is able to perform calculations even in the absence of user input

I have been encountering an issue with my PHP code that is used for performing calculations. The code is designed to take inputs from textboxes and calculate the total based on those values. However, when I click the button intended for calculating the tot ...

phphtml

ng-class in Angular seems to be functioning properly on <td> elements, but is not

When using this HTML inside an ng-repeat, there is a difference in behavior: This part works fine: <tr> <td ng-class="info.lastInMonth">{{ info.date_formatted }}</td> ... But this section does not work as expected: <tr ng ...

htmlcssangularjshtml-table

What steps should I follow to customize the Bootstrap link template according to my requirements?

In the bootstrap documentation, the links are shown in blue by default. I want them to be white instead. How can I make all the links white if the documentation is ignoring my CSS files? ...

cssfrontendbootstrap-5

Scrolling with JQuery between a webpage's header and footer

I'm having trouble keeping a div at the top of my page, but I want it to stop scrolling before reaching another div. <div class="my-top"><p>This is the top</p></div> <div class="big-one"> <div class="mini1 ...

javascriptjquerycssscroll

When attempting to shift the label above the input field upon focusing, it unexpectedly becomes concealed

I am attempting to reposition the label above the input field when it is focused, but instead it becomes hidden. label > span::focus { top: -20px; font-size: 15px; color: blue; } Check out the complete Html & CSS code. Update: ...

htmlcss

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss

The jQuery datepicker fails to function properly on an HTML element that has been added via AJAX

In the page header, I have a jQuery datepicker function bound to the "birthday" input HTML element: <script type="text/javascript"> $(function() { $( "#birthday" ).datepicker(); }); </script> After that, some AJAX functionali ...

htmlajaxjquery

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

cssflexbox

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

htmlcssreactjsfontstailwind-css

Attempting to transmit multiple variables

Can anyone provide assistance with passing multiple variables from one page to another? I am able to pass a single variable, but I need to send more than one by clicking a link. Below is a snippet of my code containing the rows I want to transmit to the ne ...

phphtmlpdo

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Currently, I am attempting to create a header that spans the entire viewport regardless of screen size. This header will be split horizontally into 3 equal sections, each occupying one third of the header space. I experimented with setting the header hei ...

htmlcsslayout

Adjusting scroll position delay for a fixed element when using an Android device

I am experiencing an issue with an element that is supposed to become fixed when scrolling past 145px and then unfixed when scrolling back up. While this functionality works smoothly on desktops, there seems to be a delay on mobile devices, particularly on ...

androidjquerycss