I don't understand why there is empty space between the left column (highlighed in image) and the header. This only happens when i populate the middle column with chart. Looking at chrome developer i don't understand what i am missing. Here is a snippet of the code. I tried adding margin and padding both to the bottom of the image on left column but that didn't help. What am i missing?
<body style="padding-left: 5px;">
<div id="header" style="width: 960px; height: 100px; background-color: #F5F5F5">
<p>Bubble Inc</p>
</div>
<div id="container" style="width: 1100px; height: 1000px"">
<div id="leftCol" style="width: 225px; display: inline-block; margin-bottom: 50px; padding-bottom: 30px;"></div>
<div id="midCol" style="width: 600px; display: inline-block;"></div>
<div id="rightCol" style="width: 225px; display: inline-block;"></div>
</div>
<script type="text/javascript">
The problem is that the big charts drag the smaller down, because you have no vertical alignment rule. I added a big place holder chart (id: bigContent) to your code to show the effect:
<style>
#leftCol { background-color: red }
#rightCol { background-color: green }
#midCol { background-color: blue }
#bigContent { height: 200px;}
</style>
<div id="header" style="width: 960px; height: 100px; background-color: yellow"><p>Bubble Inc</p></div>
<div id="container" style="width: 1100px; height: 1000px">
<div id="leftCol" style="width: 225px; display: inline-block;">A</div>
<div id="midCol" style="width: 600px; display: inline-block;">
<div id="bigContent">Biiig Content</div>
</div>
<div id="rightCol" style="width: 225px; display: inline-block;">C</div>
</div>
You can fix the problem by adding a vertical alignment rule to the style section.
#container>div { vertical-align: top; }
Related
Please run this demo:
.app {
background:pink;
width: 90vw;
overflow: hidden;
}
.app__item {
background: lightblue;
width: 200px;
float :left;
margin:5px;
height: 40px;
}
.app__item:last-child {
float: right;
}
.app__item--size2 {
height: 90px;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Please notice the red color text which is what I want:
How to Let Float Items Split the Blank Area in Average?
This gif point out what I want and also the reason why I am using float layout.
If using flex, the result would be
.app {
background:pink;
width: 80vw;
display: flex;
flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
margin:5px;
width: 200px;
flex: 0 0 auto;
}
.app__item {
background: lightblue;
height: 40px;
}
.app__item_wrapper {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.app__item--size2 {
height: 90px;
}
.app__item--inner {
margin:0;
flex: 0 0 auto;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">2</div>
<div class="app__item app__item--inner">3</div>
</div>
<div class=" app__item_wrapper app__item--size2">
<div class="app__item app__item--inner">4</div>
<div class="app__item app__item--inner">5</div>
</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">
<button>search</button>
</div>
</div>
And the con is that it won't work well when viewport is changing. See this:
and this is the con:
If I understand correctly, you're wanting the cells to the right of "cell 1" to stretch-to-fill the reaming horizontal space of the enclosing div (with pink background).
You could use CSS Grid to achieve this as shown below:
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
/* Cause first column with to be 200px, remaining two columns
to scale to fit remaining width */
grid-template-columns: 200px repeat(2, 1fr);
/* Set spacing between cells */
grid-gap:10px;
}
.app__item {
background: lightblue;
width: 100%;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
Thank #Dacre Denny for giving me inspiration. Finally, I got it.
.app {
background:pink;
width: 90vw;
padding:5px;
display:grid;
grid-template-columns: repeat(auto-fit,200px);
justify-content:space-evenly;
grid-gap: 5px;
}
.app__item {
background: lightblue;
width: 200px;
height: 40px;
}
.app__item--size2 {
/* Cause top left cell to occupy two rows */
grid-row: 1 / 3;
height:100%;
}
.app__item:last-child {
grid-column-end: -1
}
<div class="app">
<div class="app__item app__item--size2">1</div>
<div class="app__item">2</div>
<div class="app__item">3</div>
<div class="app__item">4</div>
<div class="app__item">5</div>
<div class="app__item">6</div>
<div class="app__item">7</div>
<div class="app__item">8</div>
<div class="app__item">9</div>
<div class="app__item">10</div>
<div class="app__item">
<button>search</button>
</div>
</div>
See this gif when viewport is changing.
I have some div boxes in my html and they are formatted the way I want.
Whenever I use JavaScript to change the value of one of the boxes it changes the formatting.
Why is that? And how do I prevent it from doing that?
document.getElementById("0").innerHTML = 20;
body {
background-color: red;
width: 1000px;
margin: 10px;
}
#top {
display: block;
width: 200px;
height: 100px;
}
#bottom {
display: block;
width: 200px;
height: 100px;
}
.box {
height: 94px;
width: 96px;
border: 1px solid white;
display: inline-block;
}
<div id="board">
<div class="row" id="top">
<div class="box" id="0"></div>
<div class="box" id="1"></div>
</div>
<div class="row" id="bottom">
<div class="box" id="2"></div>
<div class="box" id="3"></div>
</div>
</div>
Here is my JSFiddle:
https://jsfiddle.net/pb4759jh68/arbsws5u/
In my fiddle I have my JavaScript statement active, you can comment it out to see what it does to my formatting.
Thanks!!!
It's actually not the JS, but due to the content being added. They align at first because there's no content, but once you add in content, it tries to line up the text with the bottom of the next block. You can avoid this by setting:
vertical-align:top;
to the box class.
I am not very good with CSS, so I am posting my problem here hoping for a solution:
What I need is following:
I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.
Like so:
2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)
If you will please consider in the dashes as a proper bar (like 10px height for e.g.). You might notice that 50% and 80% have ---- while 100% has ====.
This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.
I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.
So far, I have following HTML/CSS:
<div style="padding-top: 10px;padding-bottom:10px; width:100%">
<div style='float:left'><strong>Date </strong>{{Today.date}}</div>
<div style='float:left;background-color:red;width:100%'></div>
</div>
The above code does not even show the second div with red background :(
Any pointers in helping me solve this is very much appreciated!
Flexbox could help here depending on your browser support requirements.
.wrap {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar {
height: 10px;
background: #f00;
}
.bar-50 {
flex: .5;
}
.bar-80 {
flex: .8;
}
.bar-100 {
flex: 1;
}
<div class="wrap">
<div class="date">2015-11-17</div>
<div class="bar bar-50"></div>
</div>
<div class="wrap">
<div class="date">2015-11-18</div>
<div class="bar bar-80"></div>
</div>
<div class="wrap">
<div class="date">2015-11-19</div>
<div class="bar bar-100"></div>
</div>
Sneaky version with pseudo-element instead of extra HTML
.bar {
width: 80%;
margin: 1rem auto;
font-size: 24px;
display: flex;
align-items: center;
border: 1px solid grey;
}
.date {
padding: 0 1em;
}
.bar::after {
content: '';
height: 10px;
background: #f00;
}
.bar-50:after {
flex: .5;
}
.bar-80:after {
flex: .8;
}
.bar-100:after {
flex: 1;
}
<div class="bar bar-50">
<div class="date">2015-11-17</div>
</div>
<div class="bar bar-80">
<div class="date">2015-11-18</div>
</div>
<div class="bar bar-100">
<div class="date">2015-11-19</div>
</div>
Perhaps more semantically, use a progress element and a label.
Progess Element # MDN
div {
margin: 10px;
}
<div>
<label for="alpha">2015-11-17</label>
<progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
<label for="beta">2015-11-18</label>
<progress id="beta" value="70" max="100">70 %</progress>
</div>
<div>
<label for="gamma">2015-11-19</label>
<progress id="gamma" value="100" max="100">70 %</progress>
</div>
You can try this
<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
<div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
<div style="float:left;width: 50%;height: 10px;display: inline-block;">
<div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}
I have this code
<div style="position: relative;">
/***main***/
<div style="top:0">
/*****Content1****/
</div>
<div>
/*****Content2****/
</div>
<div>
/*****Content2****/
</div>
<div style="bottom:0">
/*****Content4****/
</div>
</div>
I want content1 always at top and content4 always at bottom, also want content2 and content3 adjust top and bottom margin equally so that it look even, I am unable to do this, as parent div is of variable height and all other divs are of fixed height.
I think this will help you to understand what I want
http://www.spoiledagent.com/ads/Help.jpg
Please help,
You can try this:
http://jsfiddle.net/Q4XaQ/
<div id="main">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
#main{
margin: 0 auto;
width: 960px;
background: red;
}
#content1{
height: 80px;
background: gray;
}
#content2{
width:480px;
height: 300px;
float: left;
background: yellow;
}
#content3{
width:480px;
height: 300px;
float: right;
background: brown;
}
#bottom{
height: 50px;
clear:both;
background: blue;;
}