I have created an html stuff with bootstrap 2.3.2 and not 3 The html is having one div with four child div's. The code is as given below
<div class="row-fluid column">
<div class="span3 testOne">Sample One
<br>Sample One
<br>Sample One
</div>
<div class="span3 testTwo">Sample Two
</div>
<div class="span3 testThree">Sample Three
<br>Sample Three
<br>Sample Three
</div>
<div class="span3 testFour">Sample Four
</div>
</div>
The code is working fine but I am facing two issues.
I am getting space in between the child div's
If one child div is big (containing more data) then the small div (containing less data) height is not proportional to the big one
what I expected to achieve is something like as shown below
Can anyone please tell me some solution for this
Note: I can't use flex since it wont work in IE8, also I need to use bootstrap 2.3.2 with proper responsive
JSFiddle
I would make a css tag such as .nomargin{margin-left:0px!important;} and add the class to the relevant divs testOne, testTwo, testThree, testFourand ensure the widths are set correctly
1) The first issue can be solved by downloading the development version of Bootstrap. This has LESS files. Here you can go to /less/variables.less. The variable #gridGutterWidth is set to '20px'. If you make this '0px', the width between the columns will disappear.
You have to compile the less files. You can find out how here: http://lesscss.org/
2) The second issue is harder to solve. It's probably best to use solution #1 (using negative margins) from here:
How can I make Bootstrap columns all the same height?
For css modify class as:
.column{
overflow: hidden;
}
.testTwo{
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.testThree{
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Related
I have this code:
<div class="col-sm-4">
<h4>{{$TagName->TagName}}</h4>
<img style="
width: 200px;
height: 200px;
";
class="img-responsive"; src="images/{{$TagName->TagName}}.jpg">
</div>
So my idea is to make(like this):
***text***
*imageeee*
Instead of:
text******
imageeee**
The * means the space that occupies, I dunno how to represent better the solution that I am seeking.
I used the text-align:center to div, and 2 display:block to the html elements but it doesn't work either.(I'm using also bootstrap if it counts)
Some ideas how to solve this?
The html
<div class="col-sm-4 text-center">
<h4>this is text</h4>
<img style="
width: 200px;
height: 200px;
";
class="img-responsive imageCentered"; src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png">
</div>
the css
.imageCentered{
margin:0 auto;
}
here is jsfiddle
here are two approaches to centering a column in Bootstrap 3:
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
In markup this would look like:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method, it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.
Approach 2 (the old margin:auto)
You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class.
Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto but is missing float:none. You can add that to your CSS to make it work with the grid system.
I know that this is a common asked question but I cannot figure out how to solve my situation.
I have a form with two divs inside a Tab and I would the divs have the same height.
Here the code: http://www.bootply.com/AgakDOBgH0#
How can I do?
a quick workaround is to set a fixed height for the column,
since you define styles inline change this selector (twice), for ex. 250px:
<div class="col-sm-6 padded_div" style="padding-right: 20px; height: 250px; background-color: red">
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
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.
This question already has answers here:
How can I reorder my divs using only CSS?
(27 answers)
Closed 6 years ago.
Given that the HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render as
content 1
content 2
content 3
My question:
Is there a way to render it as below by using CSS only without changing the HTML part.
content 1
content 3
content 2
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
See here
However, support for this is only in current versions of most browsers still.
Edit Time moves on and the flexbox support improves..
This works for me:
http://tanalin.com/en/articles/css-block-order/
Example from this page:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
As stated there, this should work in most browsers. Check link for more info.
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
Basically, you'd have to use Javascript for it to be reliable in any way.
This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.
I was messing around in Firefox 3 with Firebug, and came up with the following:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.
Hope it helps, nd
I got it to work by doing this:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.
One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.
If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.
with jquery you can simply do:
$('#content2').insertAfter($('#content3'));
I don't think there's a way to do it with CSS, except to force fixed positioning of each of the divs and stack them that way.