I want to put 2 different highcharts side by side in one page. One is pie chart and the other one is gauge chart. Can you please help me to organize this structure?
You can use float. More information about float is available here. Try if something like this works.
#chart1{
width: 50%; /* set width to 50% of page width */
float: left; /* Make the element go to the left */
}
#chart2{
width: 50%;
float: right;
}
Don't forget to add style="clear: both" to the next element! Good luck! Hope this helps!
One option is using a flexbox.
.container {
display: flex;
width: 100%;
height: 150px;
}
.chart1,
.chart2 {
width: 50%;
background-color: lightblue;
border: thin solid darkgray;
}
<div class="container">
<div class="chart1">chart 1</div>
<div class="chart2">chart 2</div>
</div>
You can add bootstrap classes like this
<div class="col-md-12">
<div class="col-md-6">
Chart 1
</div>
<div class="col-md-6">
Chart 2
</div>
</div>
Related
I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>
I can align two div's by simply setting their display to inline-block and using same line-heights like shown in the below:
However, what I want is that aligning two nested divs according to the baseline of the inner divs like this:
I can achieve this also using jquery by taking the longest heading's height and set all the headings' height to this value.
var fitSizes = function () {
var h = 0;
$('h1').each( function(){
if(h < $(this).outerHeight()) h = $(this).outerHeight();
// select biggest height
});
$('h1').each( function(){
$(this).outerHeight(h);
// set all h1 heights to the biggest height
});
};
fitSizes();
But for some reasons I don't want to use js or jquery. Is there any "CSS only" way to achieve something like that?
Any solution I can think of here seems hacky, as are usually problems of this nature. There is ALWAYS a scenario where they will break. A programmatic approach, however bloated and ugly, will definitely give you exactly what you want.
I'm going to make an assumption that both the header and the content are of varying lengths and there may be more than just 2 on page either on a single line or multiple.
TOP DOWN APPROACH // fixed header height
There's no reason why your approach above won't work for a nested div. I would wrap the h1 if you're applying styles to it though. Setting a line-height on a h1 if it breaks across lines will cause each line in the multiline to have that line height. Wrap the header in a div and give that a static height, that way if the has styles such as a background won't be affected by the "margin".
<style>
.wrapper {
height: 2.5rem;
line-height: 2.5rem;
text-align: bottom;
// flex approach works too
}
h1 {
line-height: 1rem;
}
</style>
...
<div class="container">
<div class="wrapper">
<h1>title</h1>
</div>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
"BOTTOM UP" APPROACH // fixed content
This would work better if the "anchor" for these components is the bottom of the page. If your content varies in length you could fix the height of the container and content.
<style>
.container {
text-align: bottom;
}
h1 {
line-height: 1rem;
}
.content {
height: 15rem;
overflow: elipsis;
}
</style>
...
<div class="container">
<h1>title</h1>
<div class="content">
<p>lorem ipsum....</p>
</div>
</div>
You could do it with flexbox, you could set make the outer div's siblings by making a container around them and do something like this:
.container {
display: flex;
align-items: flex-end;
}
If this does not fulfill your needs you could also try and see if align-items: baseline; fixes it. Just have a look at flexbox.
What You are looking for using flexbox.
.root {
display: flex;
height: 300px;
border: 2px solid black;
}
.container {
display: flex;
/* position at bottom of container */
margin-top: auto;
/* spread inside container */
flex-grow: 1;
/* align items in row and center it verticaly */
flex-direction: row;
justify-content: center;
}
.column {
display: flex;
margin: auto 5px 5px;
padding: 20px;
/* spread inside container */
flex-grow: 1;
/* align items in column, and position content at the bottom */
flex-direction: column;
justify-content: flex-end;
border: 2px solid blue;
}
.row {
margin: 5px;
padding: 10px;
border: 1px solid red;
text-align: center;
}
<div class="root">
<div class="container">
<div class="column">
<span class="row">row one</span>
</div>
<div class="column">
<span class="row">row one</span>
<span class="row">row two</span>
</div>
</div>
</div>
Flexbox is something up and coming that would be really useful to use. It's only growing in popularity.
This can answer many different problems. Such as your justification issue.
Here's a simple fiddle with little code that shows the answer to your problem: https://jsfiddle.net/hkLk53c6/
HTML:
<div class="container">
<div class="flex-item">
Item
</div>
<div class="flex-item">
Item
<br>
Item
</div>
<div class="flex-item">
Item
<br>
Item
<br>
Item
</div>
</div>
CSS:
.container {
display:flex;
justify-content: space-between;
border: 1px solid #333;
}
.flex-item {
width: 33%;
text-align: center;
background: #120321;
color: #fff;
}
Here's a link to Chris Coyier's explanation about Flexbox Properties:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've personally found it very useful in learning more about flexbox.
You can styled based off of the baseline, you can reverse elements, justify them to be the same height both vertically and horizontally. Etc. It's very exciting because now we can get past some hacky fixes. (Like using JS which trust me, you're not the only one to do so far!)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to implement a panel like following images using bootstrap:
Figure 01: side bar in full state.
The left panel will have a show/hide button.
On hide, it will slide upward to its minimum state (figure 2).
the main div container would increase in size and fill the empty space in left.
All resizes need to be with transition animation.
Figure 02: Side bar in minimum state.
Any help/tips, how can achieve that?
One way would be to use float with overflow: hidden:
.parent{
overflow: hidden;
text-align: center;
}
.panel{
float: left;
width: 20%;
background-color: #EFEF66;
}
.navigation{
float: right;
width: 80%;
background-color: #EF66EF;
}
.main{
overflow: hidden;
width: auto;
clear: right;
background-color: #66EFEF;
}
<div classs="parent">
<div class="panel">Side Panel</div>
<div class="navigation">Navigation</div>
<div class="main">Main section</div>
</div>
In the above snippet, you have it as the primary state. Now if you want the panel to stretch down, just force a height for panel:
.parent{
overflow: hidden;
text-align: center;
}
.panel{
float: left;
width: 20%;
height: 50px;
background-color: #EFEF66;
}
.navigation{
float: right;
width: 80%;
background-color: #EF66EF;
}
.main{
overflow: hidden;
width: auto;
clear: right;
background-color: #66EFEF;
}
<div classs="parent">
<div class="panel">Side Panel</div>
<div class="navigation">Navigation</div>
<div class="main">Main section</div>
</div>
Given that you are not showing what you got so far I'ts really hard to help you.
Check this codepen for a little help with the HTML structure
HTML
<div class="container-fluid">
<div class="header">
<div class="col-xs-3 header-left">
Hi
</div>
<div class="col-xs-9">
</div>
</div>
<div class="app-body">
<div class="col-xs-12 inner-body"></div>
</div>
SCSS
.header{
height: 90px;
background-color: blue;
position: relative;
.header-left{
height: 290px;
position: absolute;
background-color: red;
}
}
.app-body{
height: 200px;
width: 100%;
padding-left: 25%;
.inner-body{
height: 100%;
background-color: green;
}
}
You should be able to get to what you want starting with the code I gave you. But have In mind that my code shows the slide-down state. You'll have to add animations and JS events to achieve the effect you want.
Please refer this fiddle here to understand the problem I'm trying to explain. I want such a layout wherein divs will utilize all the available space. There are 8 divs here which are resizable. When I minimize divs A and B, an empty space is seen below these divs. I want divs D and E to occupy that empty space.
How can I achieve this? There are some jQuery plugins available like gridstack out there but their resizing feature is somewhat different. Without using any available jQuery plugin, is it possible to achieve mentioned effect? If you have any useful resources please share. Thanks in advance.
Edit
One solution could be to have 3 columns in .container but this solution might not work if div is resized horizontally.
Change your div structure to the following I think that will help you.
$(document).ready(function() {
$('.tile').resizable({
handles: 'e, s, se',
containment: '.container'
});
});
.tile
{
height: 180px;
width: 100%;
float: left;
background-color: rgb(232, 232, 232);
border: 1px solid red;
margin: 0% 0% 3% 0%;
min-height: 20px;
max-height: 360px;
max-width: 540px;
min-width: 180px;
text-align: centre
}
.verticalspace{
width:180px;
float:left;
margin: 0% 0% 0% 1%;
}
.container{
overflow: hidden
}
<div class="container">
<div class= "verticalspace">
<div class="tile">A</div>
<div class="tile">E</div>
</div>
<div class= "verticalspace">
<div class="tile">B</div>
<div class="tile">F</div>
</div>
<div class= "verticalspace">
<div class="tile">C</div>
<div class="tile">G</div>
</div>
<div class= "verticalspace">
<div class="tile">D</div>
<div class="tile">H</div>
</div>
</div>
this kind of structure will stay close even if somediv above it is collapsed also
You could try a 3 col solution (And use javascript to properly order the items in each column):
.col {
background: whitesmoke;
width: 165px;
float: left;
}
.item {
height: 150px;
width: 150px;
margin: auto;
background: grey;
margin-top: 15px;
}
.custom {
height: 265px;
}
.custom2 {
height: 30px;
}
<div class="container">
<div class="col">
<div class="item"></div>
<div class="item custom"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
<div class="item custom2"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item custom2"></div>
<div class="item"></div>
<div class="item custom"></div>
</div>
</div>
I'm trying to achieve a grid layout with four columns in which one of the columns contains 2 div one on top of another. The image below describes better my target:
A and B are the CSS classes i've applied on the divs but as you can see in this fiddle: http://jsfiddle.net/ULHWk/1/ it does not behave as i would desire. The widths and heights of the divs are fixed.
<div id="#container">
<div class="A"></div>
<div class="A"></div>
<div class="B">up</div>
<div class="B">down</div>
<div class="A"></div>
</div>
.A {
float: left;
width: 25%;
height: 100px;
background: #00ff00;
}
.B {
float: left;
width: 25%;
height: 50px;
background: #0000ff;
clear: both;
}
Any idea how can I update my css to avchieve the placement as in the image?
Solutions that make use of twitter bootstrap are also acceptable.
I cannot modify the html in any way, so i'm looking for a solution that would only require CSS.
Thanks!
Your just need to make some adjustement with the css :
.B {
float: left;
width: 25%;
height: 50px;
background: #0000ff;
}
.B:nth-child(4){
margin-left: -25%;
margin-top: 50px;
}
fiddle: http://jsfiddle.net/ULHWk/12/
Hope I help
Just wrap B with A and update B width to 100%;
<div id="#container">
<div class="A"></div>
<div class="A"></div>
<div class="A">
<div class="B">up</div>
<div class="B">down</div>
</div>
<div class="A"></div>
</div>
example
You have to wrap two div's with class B inside A.
<div id="container">
<div class="A"></div>
<div class="A"></div>
<div class="A">
<div class="B">up</div>
<div class="B">down</div>
</div>
<div class="A"></div>
</div>
Demo