I have four divs laid out in a sequential order. I want each to take a corner of the page provided the content will fit, otherwise arrange sequentially vertically.
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
text-align: center;
border: 1px solid black;
width: 50%;
}
#ppcontainer {
border: 1px solid black;
font-size: 120%;
min-height: 250px;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
overflow: auto;
}
<div id="ppcontainer">
<div id="pptopleft">#1</div>
<div id="pptopright">#2</div>
<div id="ppbottomleft">#3</div>
<div id="ppbottomright">#4</div>
</div>
If they can fit, I'd like them to each take 50% width of the parent container, but if they need to be stacked vertically, each should take 100% width. Something like the below:
//contents of each div will fit without wrapping
1 2
3 4
//contents of each div will not fit without wrapping
1
2
3
4
The latter maybe for smaller resolutions or mobile devices.
What can I do to achieve this using CSS?
Media queries could help with this. For example, add the following after your current CSS:
#media all and (max-width: 500px) {
#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
width: 100%;
}
}
Change the 500px to match whatever breakpoint you want, and set your existing divs to float: left.
Use Bootstrap: and structure your div as following
<div class="container-fluid">
<div class="row">
<div id="1" class="col-md-6"></div>
<div id="2" class="col-md-6"></div>
</div>
<div class="row">
<div id="3" class="col-md-6"></div>
<div id="4" class="col-md-6"></div>
</div>
</div>
Related
Context:
I am trying to create 3 charts on 1 row (each has a minimum width) such that on window resize, the charts should also resize and may go to next row depending on the browser total width.
Problem:
Currently, I am missing something in the css because the chart is overflowing within the demo container below. The tooltip looks fine, but only half of the chart is seen in the container and both the axes are also hidden.
Has someone implemented something similar before? I want to understand how to load the charts in the div.
P.S. In the code below, highcharts-container is the inbuilt div which contains the charts. I am using the latest version of Highcharts and Angular 7.
My current html code -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options1" [callbackFunction]="cb1">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options2" [callbackFunction]="cb2">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options3" [callbackFunction]="cb3">
</highcharts-chart>
</div>
</div>
</div>
</div>
My css code (The main part) -->
.container-fluid{
width:100%
}
.demo{
margin: 20px 0;
min-width: 448px;
}
.demo-container{
position: relative;
border: 1px solid transparent;
box-shadow: 0 0 20px #1793f5;
width: 100%;
height: 100%;
}
.highcharts-container{
height: 100% !important;
width: 100% !important;
display: inline-block;
vertical-align: middle;
}
You could try to include the following CSS as a part of demo-container or container-fluid... one of it should do the deal for you.
height: 100% !important;
width: 100% !important;
Update
one of the harder challenges i have encountered, but add this to the style.css
and you have your contents dynamic inside its container.
.highcharts-background, .highcharts-root, .highcharts-container {
max-height: 100%;
max-width: 100%;
}
is this what you are looking for?
This was made using images of the graphs in the links you posted. I also used flexboxes which seems to be what you are looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container-fluid div {
width: auto;
border: 2px solid red;
min-width: 33%;
}
.container-fluid{
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
justify-content: center;
}
<div class="container-fluid">
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
</div>
I wrote a form as shown here.
CSS is:
#mainContainer {
width: 1000px;
margin: 0px auto;
overflow: hidden;
}
.form {
padding-left: 0%;
height: 123px;
min-height: 520px;
min-width: 350px;
width: 34%;
background: #166bb3;
}
#formDiv {
margin: 5%;
}
#username, #selectCou {
width: -moz-available;
height: 36px;
}
#dob {
height: 36px;
}
#selectGen {
height: 36px;
width: 149px;
}
You can see that Or is coming below the form. I want it to appear beside Fill your information here. How can I do it?
For more clarity, here is the screen shot:
try this:
<div class="row">
<div class="col-md-6">
<h4>Fill your information here</h4>
//put your form here
</div>
<div class="col-md-6">
<h4>Or</h4>
//your Or content here
</div>
</div>
If you want to use Bootstrap columns you should stick to the implemented Grid system classes (you can find the doc here ).
This grid system splits a row into 12 hypotetical columns that you can enlarge as you want, bearing in mind that the maximum width is 12. You can have 12 columns with width 1/12 or 2 columns with width 6/12 or any combination of columns which total width must be 12/12.
To achieve what you want you should wrap 2 6-col divs in a row.
<div class="container">
<div class="row">
<div class="col-md-6">
Left form
</div>
<div class="col-md-6">
Right form
</div>
</div>
</div>
I wanted to ask – if I have 3 columns of DIVs that I want to responsively change to 2 and 1 depending on the width of the user's screen (1 column for mobile devices) – what's the best way to do it? The div elements should simply stack under each other.
<div class="container">
<div class="row">
<!--left-->
<div class="col1">
</div>
<!--/left-->
<!--center-->
<div class="col2">
</div>
<!--/center-->
<!--right-->
<div class="col3">
</div>
<!--/right-->
</div>
</div>
<!-- /.container -->
Thank you!
PS My design looks like this:
To
you can accomplish this with the float property. You'll just need to clear the floats by adding overflow:hidden to the parent or using a clearfix:
FLOAT EXAMPLE
CSS
.row{
overflow: hidden;
}
.col{
background: red;
width: 200px;
height: 200px;
float: left;
margin: 5px;
}
OR
You can use display: inline-block; to do the same
.col{
background: red;
width: 200px;
height: 200px;
display: inline-block;
margin: 5px 2px;
}
INLINE-BLOCK EXAMPLE
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars
I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)
I wish they would behave in this way
and when the page is "restricted", the two divs should position itself in this way
I tried like this, but it is not exactly what I would get
<div style="">
<div style="width: 300px;float: left;">
div 1
</div>
<div style="width: 300px;float: left;">
div 2
</div>
</div>
I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.
HTML:
<div class="wrapper">
<div class="box">Div 1</div>
<div class="box">Div 2</div>
</div>
CSS:
.wrapper {
text-align: center;
/* Just decoration */
border: 1px solid blue;
padding: 20px;
}
.wrapper .box {
display: inline-block;
width: 300px;
height: 50px;
/* Just decoration */
border: 1px solid green;
}
Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/
I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.
<div id="box">
<div class="innerBox">
div 1
</div>
<div class="innerBox">
div 2
</div>
<div class="clear"></div>
</div>
And the CSS...
#box {
width:88%;
background:red;
padding:20px 6%;
}
.clear{clear:both}
.innerBox {
width:41%;
float:left;
background:blue;
display:block;
}
.innerBox:first-child {
margin-right:18%;
}
#media screen and (max-width: 400px) {
#box .innerBox {
float:none;
width:100%;
margin:20px 0 0 0;
}
#box .innerBox:first-child {
margin-top:0;
}
}
}
JsFIddle link: http://jsfiddle.net/x3JLX/
Check out this Fiddle. There's only a few simple changes to your existing code, which I included below.
http://jsfiddle.net/ArKKG/
<div style="overflow:auto; height: 100% text-align: center;">
<div style="width: 300px; height: 50px;float: left;">
div 1
</div>
<div style="width: 300px;height: 50px;float: left;">
div 2
</div>
</div>
And some CSS to make them visible, and keep the borders separated.
div{
border: 1px solid black;
margin: 4px;
}