Floating divs being pushed down - css

I'm so unsure of why this is happening, I'm having a lot of trouble finding a solution, so here it is plain and simple
HTML
<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>
CSS
.thing {
background-color: blue;
height: 100px;
width: 80px;
margin: 20px 0 0 20px;
display: inline-block;
float: left;
}
#big {
height: 140px;
}
JSFiddle: https://jsfiddle.net/sdmq155g/1/
The blue divs on the bottom shouldn't be pushed down unless there is a big div above them. They should all nestle right up underneath the div above them. But for some reason, all their positions are based off of the bigger divs in the top row, even though they're not all directly below one.

The box model that all browsers implement behaves in exactly the way your jsFiddle demonstrates. The blue divs won't nestle up underneath each other, but in fact they will start on the next line based on the tallest item on the row above.
You could overcome this by placing the divs you'd like to stack in a column, then floating these divs.
Example here:
.col {
float: left;
width: 80px;
}
.thing {
background-color: blue;
border: solid 1px red;
height: 100px;
}
#big {
height: 140px;
}
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>
<div class="col">
<div id="big" class="thing"></div>
<div class="thing"></div>
</div>
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>
<div class="col">
<div class="thing"></div>
<div id="big" class="thing"></div>
</div>

Related

CSS question: Flexible width to make it reflow ready

Could anyone please help me with this, How can I make the parent container flexible and make it reflow ready?
.container{
width: 350px;
border: 1px solid red;
}
.item{
margin-top:2px;
display: flex;
}
.line{
flex-grow:1;
}
<div class="container">
<div class="item">
<div class="line"><span>xyx</span></div>
<span>10 USD</span>
</div>
<div class="item">
<div class="line"><span>q</span></div>
<span>* 2</span>
</div>
<div class="item">
<div class="line"><span>total</span></div>
<span>20 USD</span>
</div>
</div>
Since you are referring reflow as browser width change and your default width for the container is 350px
just your change width: 350px to max-width: 350px. Your container is now responsive for smaller browser width
You can play around around here and change the browser here:
.container{
max-width: 350px;
border: 1px solid red;
}
.item{
margin-top:2px;
display: flex;
}
.line{
flex-grow:1;
}
<div class="container">
<div class="item">
<div class="line"><span>xyx</span></div>
<span>10 USD</span>
</div>
<div class="item">
<div class="line"><span>q</span></div>
<span>* 2</span>
</div>
<div class="item">
<div class="line"><span>total</span></div>
<span>20 USD</span>
</div>
</div>

Sticky left cell in flexbox table on 'category' change

I have a list of items that I am presenting in a flexbox table. My actual display has more columns, but in this question, I'll use just 2 - the 'category' and 'item' names. The data is presented in category order. Where items repeat for a category, only the first item for the category should have the category listed, for subsequent ones I want the category cell empty. As this can scroll off the top of the screen, I'd like to make this cell sticky, as I do for the headings.
However, as the cell is a child of the row, not the container of the table, it scrolls up with the row. You can see this in the first table in the example below, the '.first_item' CSS class does not hold the caption in place.
I concluded that the only way to achieve this is to insert a div before the row to present the category and make this sticky - class cat_head in the 2nd table in the example below. This works, however, it knocks the first item down and does not align where I want it to. I therefore set its height to 0px, which brings the item row back into alignment, but then have to put the text within an absolute positioned div within this so that I can set a background colour to stop text for the categories from overlaying each other.
It works really well and is exactly how I'd like it to operate - except that because the height is set to 0px, the absolute div extends below the bottom of the table as it is scrolled off the top of the screen and overwrites what is below it - you can see in the example it overwrites "Text below".
I also have to manually add an 'alt' class name on alternate rows to get background colouring rather than relying on ':nth-child(even)' - but I can live with this.
Has anyone got any suggestions for stopping it falling out of the bottom of the container, or indeed a better way of doing this? Thanks.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.first_item {
position: sticky;
top: 25px;
z-index: 2;
}
.table_1 .row:nth-child(even),
.table_2 .alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 25px;
height:0px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
margin:2px 0 0 4px;
text-align:center;
}
<div class="pad"></div>
<div class="container table_1">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 1</div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 2</div>
<div class="cell">Item 2-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="pad">Text below</div>
<div class="container table_2">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="fill">Text below</div>
OK. So I went to sleep on it and realised that the sticky positioning when scrolling off the top of the viewport is based on the bottom of its div. Therefore, I need to shift the div below the row it is on - as its 0px high and that's where its 'bottom' should be.
I also need to move the contained absolute div above it rather than below so its bottom aligns to it. I initially put a -24px top margin on the absolute div, but this stopped the sticky positioning on its parent for some reason. I therefore put a -24px top margin on the sticky div, which worked. However, it also dragged the next row up, so I also added a 24px bottom margin which resolved that.
I also added a containing div around each category's rows so that the sticky heading scrolls off screen when the next category gets to the top.
All working fine.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 27px;
height:0px;
margin: -24px 0 24px 4px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
text-align:center;
}
<div class="pad"></div>
<div class="container">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
</div>
<div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
</div>
<div class="fill">Text below</div>

Bootstrap div alignment issue

I'm having issue trying to align my div in Bootstrap 3.
Here's what I am trying to accomplish:
I have worked with pull and push but I guess I'm not good enough with it.
Code:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 blue">
blue
</div>
<div class="col-md-3 col-md-pull-9 red">
red
</div>
<div class="col-md-9 col-md-push-3 orange">
orange
</div>
<div class="col-md-3 col-md-pull-9 green">
green
</div>
<div class="col-md-3 col-md-pull-9 purple">
purple
</div>
</div>
</div>
http://jsfiddle.net/bva5z74w/1/
I was watching this to see if anyone would come answer the obvious: don't use bootstrap push and pull for this. Use float right and no floats. Blue must be taller than red at the min-width, other than that I think this will work smoothly.
DEMO: http://jsbin.com/degeju/1/
CSS:
.blue {
background: blue
}
.red {
background: red
}
.orange {
background: orange
}
.green {
background: green
}
.purple {
background: purple
}
.red,
.blue,
.green,
.orange,
.purple {
height: 50px
}
#media (min-width:992px) {
.blue {
height: 600px;
float: right;
}
.red {
height: 300px;
float: none;
}
.orange {
height: 400px;
float: right;
}
.green {
height: 200px;
float: none;
}
.purple {
height: 200px;
float: none;
}
}
HTML
<div class="container">
<div class="row">
<div class="col-md-9 blue">
blue
</div>
<div class="col-md-3 red">
red
</div>
<div class="col-md-9 orange">
orange
</div>
<div class="col-md-3 green">
green
</div>
<div class="col-md-3 purple">
purple
</div>
</div>
</div>
The HTML you have will work perfectly, just remove the pull on the purple block:
HTML:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 blue">
blue
</div>
<div class="col-md-3 col-md-pull-9 red">
red
</div>
<div class="col-md-9 col-md-push-3 orange">
orange
</div>
<div class="col-md-3 col-md-pull-9 green">
green
</div>
<div class="col-md-3 purple">
purple
</div>
</div>
</div>
http://www.bootply.com/dMNG75tSf0
Edit:
The float on the left elements is causing them to collapse to fit their contents. However, with media queries you can set the height to be the same height as the adjacent right element.
#media (max-width:1199px) {
.red {
height: 360px;
}
}
#media (min-width:1200px) {
.red {
height: 300px;
}
}
The obvious drawback is this limits the fix to browsers that support media queries. Therefore, Christina's answer is better, assuming it works consistently across browsers.
div has a display type "block", by default this means that each div will be shown below another div.
this means that someway you've changed some of the css, specifically with floats or display:inline.
if you're not sure how to find and change this you can always make sure each div has width:100%;
that will make sure the div catches the whole width of it's parent container.

Twitter Bootstrap Banner - How to render

This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.

confused about percentages in dimensions of web-app

this is the first time, i'm building a totally scalable application with a css layout, when the user resizes the window the fields should shrink and grow accordingly. first i thought, easy, right? but now i'm really scratching my head over the dimensions, cause it seems like the margins are not quite right... i want to have a border-like separator thingy in between all the individual fields...
my code is this:
<div style='background-color:#000000;width:100%;height:100%;'>
<div style='width:100%;height:66%;margin-bottom:1%;'>
<div style='float:left; width:19%;height:100%;margin-right:1%;' class='app_14_concept_block'>keypartners</div>
<div style='float:left; width:19%;height:100%;margin-right:1%;'>
<div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>key activities</div>
<div style='height:49%;' class='app_14_concept_block'>key resources</div>
</div>
<div style='float:left; width:19%; height:100%;margin-right:1%;' class='app_14_concept_block'>value propositions</div>
<div style='float:left; width:19%; height:100%;margin-right:1%;'>
<div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>customer relationship</div>
<div style='height:49%;' class='app_14_concept_block'>channels</div>
</div>
<div style='float:left; width:19%; height:100%;padding-right:1%' class='app_14_concept_block'>customer segments</div>
</div>
<div style='width:100%;height:33%;'>
<div style='float:left; width:49%; height:100%;margin-right:1%;' class='app_14_concept_block'>cost</div>
<div style='float:left; width:50%; height:100%;' class='app_14_concept_block'>revenue</div>
</div>
</div>
the css is this:
.app_14_concept_block{
background-color:#ffffff;
}
.app_14_concept_block:hover{
background-color:#eeeeee;
}
and this is what it looks like at the moment (the blue thingy there is part of my app viewer layout that would open comments) - my main concern is the added empty(black) space on the right, at the end of the rows:
jsfiddle here: http://jsfiddle.net/gbMZy/51/
i also tried setting the "customer segments" width to 20% - sadly to no avail:
screenshot:
jsfiddle: http://jsfiddle.net/gbMZy/52/
Maybe this solution Footer Items Expanding with Viewport Evenly could also work in your case.
Percentage width won't play well together with borders or margins.
A possible workaround is to have wrapper containers with full 20% / 50% width and then elements with border etc. inside them. This should help to avoid flickering and random spacings.
So, in your case this could look something like: http://jsfiddle.net/qC4JV/1/
HTML:
<div class="top">
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border bottom"></div>
<p>value</p>
</div>
</div>
<div class="bottom">
<div class="cell">
<div class="border right"></div>
<p>value</p>
</div>
<div class="cell">
<p>value</p>
</div>
</div>​
CSS:
body, html{
height: 100%;
background: #000;
}
.top{
height: 60%;
}
.bottom{
height: 40%;
}
.cell{
float: left;
height: 100%;
background: #fff;
position: relative;
}
.cell .border.right{
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background: #000;
}
.cell .border.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background: #000;
}
.top .cell{
width: 20%;
}
.bottom .cell{
width: 50%;
}
​
Set the font-size explicitly in the first div and then use 'em' to adjust the row margins.
But I'm unsure whether there will be scalability issues or not ..
When using percentages in this manner, the way browsers round values to obtain discrete pixel values will often result in remainders. if 1% of the total width of the viewport is not an exact number of pixels, the browser will round up or down, resulting in a few pixels too many or too few, hence the jittery divs and unequal margins.
Even Twitter's Bootstrap framework, a very well developed system, suffers from the same issues when using its fluid grid system.
I hate to say it, but if you absolutely have to create a layout like this, and the unreliable element dimensions are not acceptable, using a table may be the way to go.
On the other hand, if you go with white 'borders' instead of black, the margin jitteriness will be less noticeable.
Your HTML is painful to read. You should really separate styles out into CSS instead of writing everything inline like that, it's harder to read/debug and makes it very easy to make a mistake.
Here is a little bit better of a solution: http://jsfiddle.net/gbMZy/51/
Percentage always will be calculated in round values manner on browser and will be justified according to total width of body or parent element wrap area/width. These dimensions will be assign after calculating inner and outer pixels width given to sub elements or padding styles as well as border given on element with specified size of pixels too.
HTML:
<div class="top">
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-1
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-2
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-1
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-3
</p>
</div>
<div class="cell">
<div class="border bottom">
</div>
<p>
Top Block-4
</p>
</div>
</div>
<div class="bottom">
<div class="cell">
<div class="border right">
</div>
<p>
Bottom Block-1
</p>
</div>
<div class="cell">
<p>
Bottom Block-2
</p>
</div>
</div>
CSS Styles:
body, html{
height: 100%;
background: #3355A9;
}
.top{
height: 60%;
}
.bottom{
height: 40%;
}
.cell{
float: left;
height: 100%;
background: #ffca77;
position: relative;
text-align:center;
font-weight:bold;
}
.cell p{
padding:10px;
}
.cell .border.right{
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background: #3355A9;
}
.cell .border.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background: #3355A9;
}
.top .cell{
width: 20%;
}
.bottom .cell{
width: 50%;
}
Try this solution on codebins: http://codebins.com/codes/home/4ldqpbt
So, you might be found a better solution because it has better user interface and clear vision to display exact result as we want.

Resources