Basically, I have two columns, each with row divs of different height (dynamic content). on the right column, the bottom div has a scrollable set of content. What I want to do is to be able to make the scrollable div have a max-height such that its bottom lines up with the end of the divs in the first column.
The biggest difference I see between my question and How do I keep two divs that are side by side the same height? is that my 2 divs do not start at the same point (and I don't want to use flexbox due to compatibility issues with IE)
VERY simple plunkr: http://plnkr.co/edit/P1yvJon24xOeb3B9as3P?p=preview
HTML
<div class="row">
<div class="col-md-8">
<div class="row row1">randomly heighted content</div>
<div class="row row2">
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
</div>
</div>
<div class="col-md-4">
<div class="row row3">
<p>random content</p>
</div>
<div class="row row4">
<div class="scroll-container">
<div class="scroll">
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
<p>item6</p>
</div>
</div>
</div>
</div>
</div>
(in the plunkr I want the item1....item6 to line up with the bottom of the red div)
CSS
.row1 {
background-color: yellow;
}
.row2 {
background-color: red;
}
.row3 {
background-color: blue;
}
.row4 {
background-color: green;
}
.scroll {
overflow-y: scroll;
max-height: 100px;
}
Things I've tried:
1) Setting fixed heights for each div. This doesn't work because I need the height to change with the content for the other divs. In addition, the inner content isn't responding to fixed heights.
2) I don't think I want to use tables because a) I have heard it is very bad style b) It doesn't matter/really shouldn't be the case that row1 and row3 are the same height
3) Flexbox is a problem because it works very poorly in tandem with percentages padding. And the top left div is a video with the 0 height padding-bottom trick to make it preload the space properly. So one option would be to find a way around the padding-bottom trick and then use flex box.
4) The weird padding: 100000px; margin: -1000000px; trick didn't work when I tried it, however I could simply be missing an additional step
I don't think this is possible using only HTML/CSS, because the height of a particular div needs to be dynamically determined that relies on another div that isn't its parent or child.
Therefore I was able to solve it using JavaScript:
http://liveweave.com/3014aD
Here are the files should Liveweave ever go down.
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css"> <!-- Put your style.css below bootstrap, so that your custom css overrides it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- jQuery -->
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-left col-md-8"> <!-- Added col-left class here -->
<div class="row1">
<p>randomly heighted content</p>
</div>
<div class="row2">
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
</div>
</div>
<div class="col-right col-md-4"> <!-- Added col-right class here -->
<div class="row3">
<p>random content</p>
</div>
<div class="row4">
<div class="scroll-container">
<div class="scroll">
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
<p>item6</p>
<p>item7</p>
<p>item8</p>
<p>item9</p>
<p>item10</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.row1 {
overflow: auto;
background-color: yellow;
}
.row2 {
overflow: auto;
background-color: red;
}
.row3 {
overflow: auto;
background-color: blue;
}
.row4 {
overflow: auto;
background-color: green;
}
.scroll {
overflow-y: scroll;
}
.col-left {
padding-right: 0px !important;
}
.col-right {
padding-left: 0px !important;
}
script.js
function SetHeight() {
var left = $(".col-left").css("height");
var right = $(".row3").css("height");
var result = parseInt(left) - parseInt(right);
$(".scroll").css("height", result);
}
$(window).resize(function() {
SetHeight();
});
SetHeight(); // Call once to start off with
Related
I am trying to put MathJax content inside a div with the css 'overflow:auto' so that the div will show a horizontal scroll bar for long mathematical expressions.
But, i am getting a strange behavior. The existing div is like the first one in the following snippet. However when I add overflow:auto, a vertical scroll bar appear (see the second div in the following snippet). By looking into the details, I understand, it is caused due to the alignment caused by MathJax classes.
Note that, changing box-sizing or vertical-align property does not solve this issue. But, if I add a padding-bottom to the div or if i set overflow-y:hidden, this can be solved. But I am not sure if this is the right approach.
Could anyone help me to understand exactly why the overflow-auto is forcing a padding bottom for the div, why it is not included in the height of the div forcing the vertical scrollbar to appear, and what is the best way to resolve it. Thanks
.margin-botom-zero {
margin-bottom: 0;
}
.red {
background: red;
}
.blue {
background: blue;
}
.overflow-auto {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>
<div class="red">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>
<br>
<div class="red overflow-auto">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>
As I commented there is a lot of code dynamically added by the plugin and it's difficult to identify the issue. It's clearly an overflow issue created by one among all the nested span and it's somehow random.
For example, if you replace the numbers with letters you won't have the issue:
.margin-botom-zero {
margin-bottom: 0;
}
.red {
background: red;
}
.blue {
background: blue;
}
.overflow-auto {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>
<div class="red">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>
<br>
<div class="red overflow-auto">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{j}$</p>
</div>
<div class="red overflow-auto">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{9}$</p>
</div>
An idea of fix is to increase the line-height of p to avoid the overflow. It remains an approximate solution for this particular case. It will probably not work in other situations:
.margin-botom-zero {
margin-bottom: 0;
line-height: 2.7em;
}
.red {
background: red;
}
.blue {
background: blue;
}
.overflow-auto {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>
<div class="red">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>
<div class="red overflow-auto">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{j}$</p>
</div>
<div class="red overflow-auto">
<p>this is test</p>
<p class="blue margin-botom-zero">$\dfrac{1}{9}$</p>
</div>
How to stick the columns together with bootstrap and css?
I would like to create something like this:
What I have created:
Here is my HTML & CSS markup:
<div class="container">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
My css
.box1 {
background: red;
}
.box2{
background: green;
}
.box3 {
background: yellow;
}
Every single help would be appreciate!
There are many possibilities depending on what you are trying to achieve exactly.
If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "#grid-gutter-width" that needs to be set to 0.
If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like
.no-pad{
padding-left:0;
padding-right:0;
}
And add it to all columns you want without gutter.
If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.
The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:
.col-md-4 {
padding: 0;
}
However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:
<div class="myClass">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="box1">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box2">
<h1>this is box 1 one</h1>
</div>
</div>
<div class="col-md-4 ">
<div class="box3">
<h1>this is box 1 one</h1>
</div>
</div>
</div>
</div>
</div>
.myClass .row .col-md-4 {
padding: 0;
}
This way you are only targeting specific code and not ALL the columns.
Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.
The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:
.boxes .col-md-4 {
padding-right: 0;
padding-left: 0;
}
this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.
I hope that helps.
Working example but using col-xs-4 as much smaller viewport:
.row {
background: #ccc;
}
.box {
height: 100px;
margin-bottom: 20px;
overflow: hidden;
}
.boxes .col-xs-4 {
padding-right: 0;
padding-left: 0;
}
.box1 {
background: red;
}
.box2 {
background: green;
}
.box3 {
background: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row boxes">
<div class="col-xs-4">
<div class="box box1">
<h1>this is box 1</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box2">
<h1>this is box 2</h1>
</div>
</div>
<div class="col-xs-4 ">
<div class="box box3">
<h1>this is box 3</h1>
</div>
</div>
seem to be stuck on what should be a trivial task. I have a section element like so
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
What I have done is made this section the height of the viewport by doing
#about {
background: #cccccc;
min-height: 100vh;
}
Now within this section I have two rows. The first row should display at the top, so nothing I really need to do with this. The second row I need to display at the bottom of the section. To do this, I would have thought I would need to give the container a 100% height first, but this does not seem to change its height. The only way I can get the container 100% is by using 100vh again, but seeing its a child of the section, why wouldnt 100% work?
Even when I do get it 100% using 100vh, I cant seem to get the row at the bottom of the container. How would I go about doing this?
I have set up an example JSFiddle
Thanks
You can use display:flex for this. From what i understood you want one of the rows to be display on the top of the section and other on the bottom
Div to have 100% height and width body should also need to have 100% width and height ,instead you can set 100vh height on about section and 100vh height on container
here is the snippet
#about {
background: #cccccc;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.row {
display: flex;
border: 1px solid green;
}
.col {
margin-left: 15px;
}
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
Hope this helps
You can adjust the position of the "alignBottom" row setting the correct "margin-top" at document ready:
The position of this row is: total height of the section minus the height of the row.
The snippet:
$('.alignBottom').css('margin-top', $('#about').height() - $('.alignBottom').height());
html, body {
height:100%;
}
#about {
background: #cccccc;
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-6">
<h2 class="section-heading">Some Header</h2>
</div>
</div>
<div class="row alignBottom">
<div class="col-xs-5 col-xs-offset-1">
<p>Some content</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p>Some more content</p>
</div>
</div>
</div>
</section>
I really want full width colour blocks to represent different sections of my webpage.
I am using bootstrap 3 to build my website. The website is in a container from the standard bootstrap but I would liked some of the sections to be colouful blocks that span the full browser windows.
Does anyone know how this is done and can post an example please?
What you need to do is to place the container within another tag. The tag should be the one taking up the entire width of the page with css background attribute. In this case, I have chosen the html5 "section" tag. Below is an example. You can take a look at this jsfiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 - Full width coloured blocks</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type='text/css'>
.colored-block {
width: 100%;
padding: 30px 0px;
color: #fff;
}
.purple { background: purple; }
.green { background: green; }
.blue { background: blue; }
</style>
</head>
<body>
<section class="colored-block purple">
<div class="container">
<h1>Header 1</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block green">
<div class="container">
<h1>Header 2</h1>
<p>Paragraph content goes here</p>
</div>
</section>
<section class="colored-block blue">
<div class="container">
<h1>Header 3</h1>
<p>Paragraph content goes here</p>
</div>
</section>
</body>
</html>
Here is a jsfiddle
This should help you to understand your problem. 3 section made like red, green ,blue.
<div class="row">
<div class="col-md-4 ">
<p class=text-danger> red color</p>
</div>
<div class="col-md-4 ">
<p class=text-success> green color</p>
</div>
<div class="col-md-4 ">
<p class=text-primary> blue color</p>
</div>
</div>
Here is a jsfiddle, 3 columns, full height with background colors.
jsfiddle
CSS:
html,body,.container-fluid
{
height:100%;
}
.container
{
display:table;
width: 100%;
}
.row
{
height: 100%;
display: table-row;
}
.col-md-4, .col-xs-4
{
display: table-cell;
float: none;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML
<div class="container">
<div class="row">
<div class="red col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="blue col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="green col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
</div>
</div>
You can easily achieve full-width coloured sections in Bootstrap by using 'container-fluid' instead of 'container'.
Example:
CSS:
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
HTML:
<div class="container-fluid">
<div class="row">
<div class="red col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="blue col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="green col-xs-12">.col-xs-12 .col-sm-12 .col-md-12 .col-lg-12</div>
</div>
</div>
I'm abysmal at HTML so looking for some help in recreating the following. I could do it with a table, but understand that that is a no-no nowadays. So advice is needed.
alt text http://img130.imageshack.us/img130/8623/4panel.jpg
What I am wanting to achieve is four fixed size boxes then spread across the page on a single row. These boxes will have some information in them, possibly text, possibly images and possibly both.
The boxes will be static size, ie I don't want them resizing to fit the width of the browser window. I'm guessing it probably going to be done with the div tag but I don't have the first clue where to start.
You want something like this (not tested)
<div id="wrapper">
<div id="box1" class="box">
<!-- your content here -->
</div>
<div id="box2" class="box">
<!-- your content here -->
</div>
<div id="box3" class="box">
<!-- your content here -->
</div>
<div id="box4" class="box">
<!-- your content here -->
</div>
</div>
with the CSS
.box{
width: 200px;
margin-left: 20px;
float: left;
}
#box1{
margin-left: 0;
}
#wrapper{
margin: 0 auto; // Center on the page
width: 860px;
}
You can use four fixed-width/height divs which are all set on float:left;.
<div class="box">Some content</div>
<div class="box">More content</div>
<div class="box">Maybe an image</div>
<div class="box">Some content and an image</div>
with this css:
.box {
width: 200px;
float: left;
}
Well, it's not so tricky:
<div class="panelwrapper">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
That's really all the HTML you should need.