I have a dynamically creating chart whose width might keep on increasing. It is placed inside a container with fixed width and auto scroll. So the chart scrolls if it is wider than the container.
My issue is that the width of the chart is not fixed, it depends on the content.
Can I use width:auto to set the chart width as per its need. If not is there any way with just CSS to achieve it.
EDITS:I want the blocks to be in a single line even if the container has to have scroll. Is this possible just using CSS.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
The blocks have to be aligned horizontally. Updating with a image to show the output layout
If you change your .block from float: left to display: inline-block and set white-space: nowrap on your .chart, they will line up horizontal.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
white-space: nowrap;
}
.block{width:100px;background:#ccc;margin:10px;display: inline-block;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can try to use display: table-cell;
only CSS changed :
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
}
.block{width:100px;background:#ccc;padding:10px;display: table-cell;}
https://jsfiddle.net/us5Ljz7t/4/
white-space:nowrap will do the trick.
.container {
float: left;
width: 300px;
background: #e3e3e3;
height: 200px;
overflow: auto;
}
.sidebar {
float: left;
width: 100px;
background: #666;
height: 200px;
}
.chart {
/* width:800px;*/
white-space: nowrap; /* ← added */
margin: 50px 20px;
}
<div class="container">
CONTAINER
<div class="chart">
Dynamically adding chart content here
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
You can take the width: inherit, so that the width will be taken from the parent element, that is the container div.
.container{
float:left;
width:300px;
background:#e3e3e3;
height:200px;
overflow:auto;
}
.sidebar{
float:left;
width:100px;
background:#666;
height:200px;
}
.chart{
margin:50px 20px;
width: inherit
}
.block{width:100px;float:left;background:#ccc;margin:10px;}
<div class="container">
CONTAINER
<div class="chart">
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
<div class="block">100</div>
<div class="block">200</div>
<div class="block">300</div>
<div class="block">400</div>
<div class="block">500</div>
</div>
</div>
<div class="sidebar">
SIDEBAR
</div>
Here is the fiddle
Related
I have started a huge revision on my css knowledge.
I am trying to do the following:
I want to create a wrapper div that contains to divs with some text and some content.I want each div with class item-2 inside that div to have a width:50%
and appear next to another item-2.
Here is a snippet of my code:
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
text-align:center;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
As you can see it's div appears below its previous div.However I want them to be next to each other.How can I achieve this? I would like an explanation to your solution sa as to improve my knowledge
Flex can keep them in one row.
.wrapper {
display: flex;
}
And remove display: inline block for items. If you want in small devices they are under each other add this to .wrapper
flex-wrap: wrap;
And we need a min-width for items. .items: min-width: 250px;. If your device has enough space (500px) they will remain in one line, else the second item goes to next line.
.wrapper display: flex;
.item-2 flex: 1;
Why is this happening?
Using inline-block in this way is perfectly valid and will work but you have two issues that are causing the elements to occupy separate lines:
inline-block items honour the white-space between elements so there is an extra space between the two .item-2 divs
The width of .item-2 is not 50% but 50% + 2px left border + 2px right border
How to fix
There are multiple ways of getting round the white-space issue including setting font-size: 0;, however, as the height and width of .demo use ems you are probably best removing the white-space from between the elements in the HTML instead
To ensure .item-2 actually has a width of 50% you can add box-sizing: border-box; which will make the width and height include the padding and border
body {
background: rgba(10, 10, 10, .8);
}
.wrapper {
margin: auto;
position: relative;
width: 100%;
}
.item-2 {
border: 2px solid blue;
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 50%;
}
.demo {
background: yellow;
height: 5em;
margin: auto;
width: 5em;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div><!--You can remove the white-space by adding a comment between the elements
--><div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
Try this code...
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
}
.item-2{
float:left;
text-align:center;
box-sizing: border-box;
display:inline-block;
width:50%;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
aside float and flex, there's also:
display:table;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:table;
table-layout:fixed;/* to even cells and keep within width set */
}
.item-2{
text-align:center;
display:table-cell;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
display:grid;
body{
background:rgba(10,10,10,.8);
}
.wrapper{
position:relative;
width:100%;
margin:auto;
display:grid;
grid-template-columns:50% 50%;
}
.item-2{
text-align:center;
border:2px solid blue;
}
.demo{
margin:auto;
height:5em;
width:5em;
background:yellow;
}
<div class='wrapper'>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
<div class='item-2'>
<h1>Title 1</h1>
<div class='demo'>
</div>
</div>
</div>
i have simple issue with HTML positions
in the following code i have one wrapper div> Container in this div
i have 2 more divs name is side_bar_wrap and left_wrap in left_wrap div i have
4 thumbnails divs name are same as thumbnails my issue is how can i align this 4 thumbnails div with space between right and left but no on first and last div of this group
following is my code, please help me..
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
.container
{
width:100%;
max-width:1170px;
margin:0 auto;
}
*
{
margin:0;
padding:0;
}
.side_bar_wrap
{
width:29%;
height:300px;
background:#148b23;
margin:0 10px 0 0;
float:left;
}
.left_wrap
{
width:70%;
float:right;
}
.thumbnails{
width: 22%;
margin: 0 11px;
position: relative;
overflow: hidden;
height:300px;
border:1px solid #cfcfcf;
float:left;
}
.inner_task
{
}
.clear
{
clear:both;
}
<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>
<div class="container">
<div style="width:29%; float:left; height:400px; background:gray; margin:40px 11px 40px 0;"></div>
<div style="width:70%;float:left; height:400px; background:gray; margin:40px 0;"></div>
<div class="side_bar_wrap"></div>
<div class="left_wrap">
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
<div class="thumbnails">
<div class="inner_thumb">
<div style="width:100%; height:200px; background:#efefef;"></div>
</div>
</div>
</div>
<div style="width:100%; float:left; height:400px; background:gray; margin:40px 0;"></div>
</div>
You can use the first-child and last-child that css provides for you
Basically first-child allow you to make style changes to the first div, and last-child allows you to make changes to the last div
so something like this:
.thumnails:first-child {
/*NO SPACE ON ONE SIDE*/
margin-left:0px;
}
.thumnails:last-child {
/*NO SPACE ON ONE SIDE*/
margin-right:0px;
}
If you want advance alittle more you can use :nth-child(), for when you you want to change the style of the third div or whatever, so
.thumnails:nth-child(3) {
background-color:#ff0000;
}
Using CSS I am trying to get a div to fill a dynamicly sized container that also contains a fixed height div.
How can the grey div (See snippet) be made to fill the remaining available space only without overflowing?
The grey div .Fill cannot have anything inside it.
I would prefer to use CSS Flex only as a last resort.
FIDDLE
html,body{height:100%;}
.Wrap{
height:100%;
width:50%;
}
.H40,.H60{
display:block;
padding:15px;
box-sizing:border-box;
}
.H40{
height:40%;
background:#b00;
}
.H60{
height:60%;
background:#58c;
}
.Top{
background:#8d5;
height:40px;
}
.Fill{
height:100%;
width:100%;
background:#DDD;
}
<div class="Wrap">
<div class="H40">
<div class="Top">TOP</div>
<div class="Fill">Fill this space</div>
</div>
<div class="H60">
<div class="Top">TOP</div>
<div class="Fill">Fill this space</div>
</div>
</div>
try this
use calc for that
.Fill{
height:calc(100% - 40px);
width:100%;
background:#DDD;
}
http://jsfiddle.net/pgys24ct/3/
I think display:table, display:table-row and display:table-cell will solve this.
JSfiddle Demo
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body{height:100%;}
.Wrap{
height:100%;
width:50%;
}
.H40,.H60{
display: table;
padding:15px;
height:100%;
width:100%;
}
.H40{
height:40%;
background:#b00;
}
.H60{
height:60%;
background:#58c;
}
.Top{
display: table-row;
background:#8d5;
height:40px;
}
.fill {
display: table-cell;
background: #ccc;
height:100%;
}
<div class="Wrap">
<div class="H40">
<div class="Top">TOP</div>
<div class="fill"></div>
</div>
<div class="H60">
<div class="Top">TOP</div>
<div class="fill"></div>
</div>
</div>
Add height:calc(100% - 20px); in .Fill in your CSS.
Imagine a page with the basic structure as below. The main question is how do I get the .left background to extend all the way to the left side of the window, and the .right to extend to the right side? Both need to remain fixed width.
HTML:
<body>
<div class="container">
<header>blah</header>
<article>doodle doo</article>
<div class="left">Left stuff with blue background</div>
<div class="right">Right stuff with red background</div>
<div class="clear"></div>
</div>
<footer>deedle dee</footer>
</body>
CSS:
.container{
width:400px;
margin:0 auto;
}
header{
background-color:grey;
}
.left{
width:200px;
float:left;
background-color:blue;
}
.right{
width:200px;
float:right;
background-color:red;
}
.clear{
clear:both;
}
footer{
background-color:#DDD;
text-align:center;
}
Fiddle here
The basic idea is the same as this page, but you might notice that the page scrolls a loooong way to the right - the cut off doesn't actually work.
I have achieved this with display: table and pseudo elements.
The basics of this solution:
The wrapper .content is made display: table and given position: fixed to allow its "cells" to have your fixed width. Provide spacing ,if required, with border-spacing: unit size;
.left and .right are given display: table-cell
.content:before and .content:after provide pseudo columns (also with display: table-cell) to space out the background.
Have an example!
HTML
<header></header>
<article></article>
<div class="content">
<div class="column left"></div>
<div class="column right"></div>
</div>
<footer></footer>
CSS
* {
margin:0;
padding:0
}
html,body {
height:100%
}
.content {
display:table;
table-layout:fixed;
height:100%;
width:100%
}
header {
background-color:grey;
height:20px;
width:500px;
margin:0 auto
}
article {
height:20px;
width:500px;
margin:0 auto
}
.column {
display:table-cell;
width:200px;
vertical-align: top
}
.left {
height:100%;
background:blue
}
.content:before,.content:after {
display:table-cell;
content:'';
background:blue;
height:100%;
vertical-align: top;
padding-left:10%
}
.content:after {
background:red;
padding-right:10%
}
.right {
background-color:red
}
footer {
background-color:#DDD;
text-align:center;
height:50px
}
1) Put your left and right elements into another container:
<div class="container">
<header>blah</header>
<article>doodle doo</article>
</div>
<div class="container2">
<div class="left">
<div class="text">Left stuff with blue background</div>
<div class="clear"></div>
</div>
<div class="right">
<div class="text">Right stuff with red background</div>
<div class="clear"></div>
</div>
</div>
<footer>deedle dee</footer>
2) The container2 width is 100%, let the left and right to be 50%:
.left {
width:50%;
float:left;
background-color:blue;
}
.right {
width:50%;
float:right;
background-color:red;
}
3) The text element on your both columns, should be 200px:
.text {
width: 200px;
}
.left .text {
float: right;
}
.right .text {
float: left;
}
Working jsFiddle Demo.
i have 3 divs conatined within an outer div. i am aligning them horizontally by floating them left. and div3 as float right
<div id="outer">
<div id="div1">always shows</div>
<div id="div2">always shows</div>
<div id="div3">sometimes shows</div>
</div>
div1 and div3 have fixed sizes.
if div3 is left out i want div 2 to fill up the remaining space. how can i do it?
What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/
CSS:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#right{
float:right;
width:50px;
background:yellow;
}
#left{
float:left;
width:50px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Body:
<div id="container">
<div id="right">div3</div>
<div id="left">div1</div>
<div id="remaining">div2, remaining</div>
</div>
This is a technique using display: table; https://jsfiddle.net/sxk509x2/
Browser support (ie 11+): http://caniuse.com/#feat=css-table
HTML
<div class="outer">
<div class="static pretty pretty-extended">$</div>
<input class="dynamic pretty" type="number" />
<div class="static pretty">.00</div>
</div>
CSS
.outer{
width:300px;
height:34px;
display:table;
position: relative;
box-sizing: border-box;
}
.static{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
}
.dynamic{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
width: 100%;
height:100%;
}
.pretty{
border: 1px solid #ccc;
padding-left: 7px;
padding-right: 7px;
font-size:16px;
}
.pretty-extended{
background: #eee;
text-align:center;
}
The classes that contain "pretty" are not required to accomplish what you are trying to do. I just added them for appearances.
You don't need to float #div2, it'll automatically fill up the remaining space.
If you want borders/padding, you ought to give #div2 a child element.