I have a total of 3 divs - how to get them to appear as per the following image.
I can get 2 together using float:left, however withe 3rd one keeps sitting underneath div A.
Any ideas?
Thanks
Wrap B and C in additional div similar to A (with float left as well)
Check out masonry.js.
The reason why floats cannot be used in this case is that the float will clear after the tallest element in the row, therefore bumping element C under element A.
Alternatively, you can place A in a sub-parent floated to the left, and B and C in a sub-parent floated to the right. However, this makes dictating the order of items in a responsive/fluid layout difficult. The solution can be simplified as follow:
<div>
<div class="col">
<!-- A -->
</div>
<div class="col">
<!-- B + C -->
</div>
</div>
For the CSS:
.col { float: left; width 50%; }
Related
What is the browsers logic to position elements like this:
Basically, as I understand this can be recreated without bootstrap with a simple container block and and width: 33.333333% blocks of different heights. Why is the d block not floating to the left, under a block?
Fiddle: https://jsfiddle.net/8qbuczau/
You would expect that the d block would sit on the new line with the e and f block but the reason it does not is because there is enough horizontal and vertical space on the first row for it to sit underneath the c block.
If you take away the line breaks from the b element then d will be forced to the next line as there is no more vertical space for it to fill.
.row {
overflow: auto;
}
div
{
border: 1px dashed maroon;
box-sizing: border-box;
}
div.col-md-4
{
margin-bottom: 1em;
width: 33.333333%;
float: left;
}
<div class="container">
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-4">
b
</div>
<div class="col-md-4">c</div>
<div class="col-md-4">d</div>
<div class="col-md-4">e</div>
<div class="col-md-4">f</div>
</div>
</div>
If you add more line breaks to the b element you will see that e and f also have the same behaviour.
Per the w3 spec:
If the float reference is not a line box, the element generates a box
that is floated to the block-start and line-start outer edges of the
float reference.
Also:
If the float reference is not a line box, the element generates a box
that is floated to the block-end and line-start outer edges of the
float reference.
With floats, they will naturally try to move to the start or end of their containing element going line by line if there is enough space. What stops this from happening is that usually there is not enough space for them to sit on the end of the previous line so they reposition themselves at the beginning of the next line
If you want the d become new row why dont you split it into 2 different <div class="row">
Total col in 1 row should be max 12. Never try if you make it become more than 12, may be thats what make the positioning become messy.
I have two div-columns of different height which I like to have the same height. I achieved this using the padding-margin hack with the following css for my div-columns:
.lane1 {
padding-bottom: 800px;
margin-bottom: -800px;
}
The html is displaying a flow-diagram. I would like to have a line from the end of each lane to the bottom of the two-lane part to have a continuous diagram.
I tried to achieve this with an additional div with class .LineFilling that is a line going down, but I don't know how heigh the line should be. So I put
position: absolute;
overflow: hidden;
in the .lane1-class and made the .LineFilling-element of height 600px, but that doesn't work, since the overflow is displayed. Is there a way to have the .LineFilling-element extend to the end of the lane? Or extend further but the overflow being cut?
Thanks for help.
EDIT: I posted the code online here: Click here to see code
Yes it is possible with pure css.
I have used display table-row and table-cell properties to achieve it.
HTML:
<div class="parent">
<div class="child">
<p>line 1</p>
</div>
<div class="child">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</div>
CSS:
.parent{display:table-row;}
.child{display:table-cell;border:1px solid #ccc;padding:10px;}
p{margin:5px 0;}
See fiddle.
Update: probable solution DEMO
Pure CSS solution
Here is a DEMO of that solution.
In this DEMO, you see multipple Rows,
each Row can have a variable number of columns without stating anything in the markup, and without fixing any width. (the width is always divided evenly between the columns).
Each column is called ElementsHolder, and can have any number of Elements you want.
all the column in a row will always have the same height, and the last arrow in the row will fill that space.
In the DEMO you can see 3 Rows.
The First Row has the starting point, so no stretch needed there.
The Second Row has 3 ElementsHolder, without stating anything special in the markup, 2 of them will stretch to fill the gap.
The Third Row has 2 ElementsHolder, behave as expected.
notice that the stretching works regardless of the Elements height. (some of them have 2 or 3 lines of text, and it works perfectly)
If you want to use that technique, you only have to implement the other kind of boxes and arrows (Curve etc..)
The solution is done by using the new CSS flex model.
the direction is set via flex-direction: row;,
Each row has ElementsHolders that gets equal width.
each one of those ElementsHolder is also a flex box, but this time his direction is opposite (flex-direction: column;).
the child's of ElementsHolder are Elements & Arrows, I dont want them to have equal height, but to span excatly the natural height. except the last arrow, that should span the rest of the container.
all of that is achieved using the flex property with the appropriate values.
More about the flex-model can be found HERE
I don't know if I really understand what you need. I've tried the following
Adding a new absolute element in the laneContainer with height: 100%
#straightLine {
background-color: #FFBF80;
height: 100%;
left: 104px;
position: absolute;
width: 3px;
z-index: 5;
}
Plus some small modifications to some other objects, you'll find them in the fiddle...
http://jsfiddle.net/RRupc/9/
Is something like that what you want?
Rather than adding another div to fill the space, wouldn't it be easier to add a class to the div on the left column, and style that to fill any spacing/line requirements you have?
So you could have:
HTML:
<div class="twoColumn">
<div class="column">
<div class="step doubleRow">
<p>One step covering two rows here</p>
</div>
</div>
<div class="column">
<div class="step">
<p>Single size step</p>
</div>
<div class="step">
<p>Single size step</p>
</div>
</div>
</div>
have you seen these 2 plugins?
jQuery Isotope
jQuery Mansonry
Eventually there is a solution for you!?
Take a look.
FlexBox could be worth a look too.
if you are ok with IE10 +
Auto Align Heights (CSS)
align-items: stretch
Good Reads here and here
Cheers,
Rob
Simple question I want to divide a div in to two columns I am using to divs with
http://jsfiddle.net/petran/WnKW3/
display:inline-block
and it works fine , when I add widths with sum of 100% the second column appears
underneath seems that it doesn't feet on the parent window, if the widths sums
up to 99% is working my question is if that should always be the sum of columns ?
That is because of the gap between the two child div elements in HTML code. you need to remove the gap between the two div's to which you are giving display: inline-block. Just remove it. It will work fine.
<div class="container">
<div class="col1">
col1
</div><div class="col2"> <!-- removed whitespace -->
col2
</div>
</div>
Working Fiddle
For more information go through this link
There are many other ways to fix this. which you can find here
The white space between your divs take up space so your total width is greater than 100% thats why it wraps. Remove the space and you'll see
<div class="col1">
col1
</div><div class="col2">
col2
</div>
http://jsfiddle.net/WnKW3/1/
I wrote below code to display 3 divs in a 600x400 container, but got below problem. Please help.
<DIV A style="float:left;width:200px;;height:200px;"></DIV>
<DIV B style="float:left;width:400px;;height:400px;"></DIV>
<DIV C style="float:left;width:200px;;height:200px;"></DIV>
Instead you need to float a container that contains the two smaller divs, a-la:
<div style="float:left">
<div style=";width:200px;;height:200px;"></DIV>
<div style="float:left;width:200px;;height:200px;"></div>
</div>
http://jsfiddle.net/ExplosionPIlls/r7b7e/
If A and C are both floated, they won't wrap anyway unless the width of the container is small enough to make them wrap. However, the container (of all three divs) also needs to include the larger div, which makes that impossible. Instead you need to wrap them in their own container.
Your div B should be float: right;
I have two divs, one with float: left and the other one with float:right. They display side-by-side, but when I add a third div it displays over the two floating divs and not behind as i'm trying to.
<div id="left_side" style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>
What I want to do: http://dl.dropbox.com/u/20836988/intended.png
what I actually get: http://dl.dropbox.com/u/20836988/what%20i%20get.png
I've tried adding vertical-align: bottom to the last div without results. Also I've tried adding a div containing the two float divs and then the third div but I always get the same result. I'm sure it must be a very basic question but I can't find the answer anywhere...
below_side needs a float and a clear:both;
currently left and right are floated - which takes them out of the document flow. which means that below side ends up in the wrong spot.
if you put the float: left on the below-side it will also take it out of the docment flow and put it in the same space as the left and right (relatively) then you add the clear: both so that it appears below left and right
<div id="left_side" style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>
Add clear: both to your below_side div.
See this link.