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
Related
I have 2 divs I want to exactly overlap horizontally using negative margin-left.
HTML:
<div id=one></div>
<div id=two></div>
CSS:
body{margin:0px;padding:0px,border:0px}
#one {width:100px;height:100px;background-color:red;}
#two {width:100px;height: 50px;background-color:blue;}
#one,#two{display:inline-block;}
#two{margin-left:-100px;}
Before negative margin each div is 100px wide:
After negative margin the divs are 4px from overlapping exactly:
Why does setting a negative margin on the second div not cause it to exactly overlap the first div?
BTW, I'm just experimenting with margin-left...I know I can absolutely position the 2 divs inside a relative wrapper.
Thanks in advance for any enlightenment!
Inline elements are sensitive to their structure in your HTML. Since both divs are separated by a line break, they have a small "margin" between them like letters in a sentence would (which is pretty much the point of inline elements).
<div id=one></div> <!-- Here -->
<div id=two></div>
Change the structure of your HTML to remove this space:
<div id=one></div><div id=two></div>
Or you can use comments to negate the line break:
<div id=one></div><!--
--><div id=two></div>
Inline block has weird "bug" you could call it, that applies a 4px space between elements assuming a default font-size. This is created from the line-break between your div's. You'll find that you can fix this quite simply by making your negative higher.
margin-left: -104px;
This will fix your issue, but it's also not the only way to fix it.
You could do this... Instead of:
<div id=one></div>
<div id=two></div>
Delete the line-break between the div's so they are this:
<div id=one></div><div id=two></div>
This will also fix the issue.
You could alternatively set the font-size of their containing element to 0.
HTML:
<div class="container">
<div id=one></div>
<div id=two></div>
</div>
CSS:
.container { font-size: 0; }
But wait! There is more. You could comment out the line-break.
<div id=one></div><!--
--><div id=two></div>
You could drop the ending > to the beginning of the next element.
<div id=one></div
><div id=two></div>
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I've found a number of posts on stackoverflow that address similar problems to mine, but none of them are similar enough, and I just can't solve this... I have tabular output that may exceed a viewing area in width, height, or both. The output is accompanied by a header. If the output exceeds the height, the user should be able to scroll up/down, but the header must remain fixed. If the output exceeds the horizontal area, the user should be able to scroll left/right, and the header must move w/the content.
I've tried various combinations of overflow:scroll, overflow:scroll-x [and scroll-y], overflow:auto, w/the table header both part of the content, and separate from it. I've met w/only mixed success ; either I can get the header to scroll l/r along w/the content and it disappears on vertical scrolling, or I can get the header to remain fixed in case of vertical scrolling, but it remains fixed if the output is scrolled horizontally.
Here's a fiddle w/some html that I used as a starting point.
[code]jsfiddle code[/code]
Constraints
the output must be divs, as in the example. I can't use <table>
the solution must be css/html only, no j/s, jquery, etc.
Any help appreciated !
You can't achieve that with pure css/html even if you give an element position: fixed; or position: absolute;. by doing that you can't move the element because while scrolling element's position on the page does not change and it is impossible to get element's scroll value from css or html.
So the only solution you can find is in using javascript
If you can set a width to some of your divs this can be a starting point using pure css/html:
.row div, .head div {
display: inline;
}
.head, .rows {
width: 160px;
}
.rows {
height: 40px; // this height is set to force scroll
overflow-y: scroll;
}
.tbl {
width: 100px; // this width is set to mimic small width
overflow: auto;
}
<div class='tbl'>
<div class='head'>
<div>head 1</div> <div>head 2</div> <div>head 3</div>
</div>
<div class='rows'>
<div class='row'>
<div>data 1</div> <div>data 1</div> <div>data 1</div>
</div>
<div class='row'>
<div>data 2</div> <div>data 2</div> <div>data 2</div>
</div>
<div class='row'>
<div>data 2</div> <div>data 2</div> <div>data 2</div>
</div>
</div>
</div>
http://jsfiddle.net/jL4ch/
i figured this out. there are several things to take note of :
the widths can be made to function w/any inline block-structuring style, including inline-block, for example. you don't have to use table-cell. using only inline will cause the browser to disregard the width: elements.
it's pretty silly, but if you use overflow-x, you also have to state an overflow-y policy explicitly, or you get 2 scrollbars. the trick was to declare the axis w/the desired constraint as auto and the other overflow as hidden.
here is a jsfiddle that illustrates my solution. the fiddle has inlined widths because in real life, the tabular data will actually be generated dynamically and the column widths won't ever have the same values, as they do here in the example.
I really need your help on this one:
Right now I have divs just on top of each other, filled dynamically with diverse contents so the heights are changing.
What I want to do now is to place them in 2 rows. With a fixed width and "float:left" this kinda works already.
My english is not the very best so pls take a look at my example picture first:
As you can see there is this whitespace because of the third div which doesn't start right beneath the first div because of div number 2 which CAN BE higher as the first div.
I now wonder if there is a possibility to automatically position those divs higher so that there is no whitespace (they always should start right beneath the picture which is above wouth the whitespace, left or right).
LIKE THIS:
I hope you kinda understand what I mean :D Thanks in advance for replys!
EDIT:
Code-Example:
<div id="content">
<div class="xyz">BLABLA</div>
<div class="xyz">BLABLA<br>morebla!<br>EVEN MORE BLA</div>
<div class="xyz">BLABLA</div>
</div>
<style>
#content {
width: 648px;
}
.xyz {
width: 303px;
float: left;
border:1px solid black;
}
</style>
Remeber, heights are always different!
jQuery masonry makes your life a lot easier.. don't reinvent the wheel, especially when you're facing a classic css problem.
this will do it...
<div id="content">
<div class="column1" id="left">
<div id="div1">...</div>
<div id="div3">...</div>
</div>
<div class="column2" id="left">
<div id="div2">...</div>
<div id="div4">...</div>
</div>
</div>
Then just style column2 styles by defining widht values in your css.
Thanks,
#leo.
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>