How to perfectly align div columns in a fluid layout using Bootstrap 2

Question

How to perfectly align div columns in a fluid layout using Bootstrap 2

I created a basic two-column fluid layout using Bootstrap 2. One column features two div elements, while the other contains three div elements. Both columns are set to span6. You can view the fiddle here.

I tried adjusting the heights of the two div elements in the left column with CSS, aiming for the top one to occupy 62.5% of the browser window height and the bottom one to take up the remaining 37.5%. I wanted to achieve similar height ratios for the three div elements in the right column. However, I encountered several questions/issues:

The block/div heights don't extend fully to fill the window vertically, and the individual block/div heights remain unchanged.
How can I make the combined height of the two div elements on the left match that of the three div elements on the right, while maintaining the specified relative height ratios within each column (
```
left: 62.5%, 37.5%; right: 35%, 30%, 35%
```
)?
Is there a way to adjust the padding between the blocks/divs?

I'm hoping all these objectives can be accomplished without using any Javascript.

html css twitter-bootstrap

Answer 1

Answer №1

I have attempted a solution that may assist you. Here are the answers:

The height of each BlocX div remains unchanged because the height of body has not been defined. In your case, the body's height is set automatically based on its content.
Refer below for more details.
The "paddings" you mentioned are actually margins in the .well class. You can either avoid using this class or override its settings.

Here is the updated code:

HTML:

Removed the .well class, everything else remains the same.

CSS:

html{height:100%;}

.body-background {
    padding-top: 10px;
    background-color: #D1D1D1;
    height:100%;
}
.container-fluid, .row-fluid, .span6
{
    height:100%;
}

#A-b {
    min-height: 62.5%;
    height: 62.5%;
    background-color: #FFE0C2;
}

#B-b {
    min-height: 37.5%;
    height: 37.5%;
    background-color: #4D4D4D;
}

#C-b {
    min-height: 35%;
    height: 35%;
    background-color: #969696;
}

#D-b {
    min-height: 30%;
    height: 30%;
    background-color: #57BCFF;
}

#E-b {
    min-height: 35%;
    height: 35%;
    background-color: #183547;
}

We have set the html and body elements to have a height:100%, followed by doing the same for .container-fluid, .row-fluid, and .span6. This results in the display shown in this DEMO.

NOTE: For resolutions less than 768px, utilize media queries to adjust the height of BlockX and other elements accordingly. Avoid setting heights directly on span6, row-fluid, etc. This example serves as a guide - consider creating custom classes to modify Bootstrap's existing classes for your live website.

Answer 2

I have attempted a solution that may assist you. Here are the answers:

The height of each BlocX div remains unchanged because the height of body has not been defined. In your case, the body's height is set automatically based on its content.
Refer below for more details.
The "paddings" you mentioned are actually margins in the .well class. You can either avoid using this class or override its settings.

Here is the updated code:

HTML:

Removed the .well class, everything else remains the same.

CSS:

html{height:100%;}

.body-background {
    padding-top: 10px;
    background-color: #D1D1D1;
    height:100%;
}
.container-fluid, .row-fluid, .span6
{
    height:100%;
}

#A-b {
    min-height: 62.5%;
    height: 62.5%;
    background-color: #FFE0C2;
}

#B-b {
    min-height: 37.5%;
    height: 37.5%;
    background-color: #4D4D4D;
}

#C-b {
    min-height: 35%;
    height: 35%;
    background-color: #969696;
}

#D-b {
    min-height: 30%;
    height: 30%;
    background-color: #57BCFF;
}

#E-b {
    min-height: 35%;
    height: 35%;
    background-color: #183547;
}

We have set the html and body elements to have a height:100%, followed by doing the same for .container-fluid, .row-fluid, and .span6. This results in the display shown in this DEMO.

NOTE: For resolutions less than 768px, utilize media queries to adjust the height of BlockX and other elements accordingly. Avoid setting heights directly on span6, row-fluid, etc. This example serves as a guide - consider creating custom classes to modify Bootstrap's existing classes for your live website.

How to perfectly align div columns in a fluid layout using Bootstrap 2

Answer №1

Similar questions

Struggling to vertically align text beside an image in Twitter Bootstrap - any suggestions?

What is the best way to style a select element to achieve this appearance?

What is the best way to choose a particular radio button from a group of radio buttons using typescript?

PHP and MySQL not displaying the image

Choosing a Google Form dropdown option using Selenium in Python without the select tag specifically

Maximizing space efficiency in Bootstrap 5

Prevent Scrollbars in a Div

Eliminate borders surrounding WordPress text widgets

What is the best way to showcase data from an external model without having to constantly refresh the page?

Color overlay on top of image background

"Enhancing User Interaction with jQuery Hover State Dropdown Menus

Guide to smoothly scroll to the top of an element containing collapsible panels using Jquery

What are some ways in which I can utilize the Ember Handlebars helper?

Having trouble unselecting the previous item when selecting a new item in Reactjs

Issues with CSS transitions/animations not functioning properly across different browsers

Tips for setting the color of hyperlinks in a UIWebView

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Looking for a different method to remove a list item within an unordered list using CSS instead of HTML

Automate the vertical resizing of a div element using code

Following a successful ajax response, the functionality of the JavaScript ceases to operate