I have a regular Bootstrap 3 CSS setup. I want to apply the same heights to columns inside a row and have been looking at using display:table and display:table-cell. This method works but it naturally seems to apply vertical padding on the columns with less content.
Take this HTML for example:
<div class="row">
<div class="col-xs-4">
<div class="block">
Content for block<br />
Some more content<br />
And a bit more<br />
Last bit
</div>
</div>
<div class="col-xs-8">
<div class="block">
Content for block<br />
Only some more content
</div>
</div>
</div>
Then this CSS:
.row {
display: table;
width: 100%; }
.row > div {
float: none;
display: table-cell;
vertical-align: top; }
.block {
height: 100%;
background: red; }
Now the columns do have the same height, but the .block, which has the red background does not reflect this, because the second column has bottom padding applied which I cannot remove.
See this fiddle for an example: http://jsfiddle.net/cyan8fjz/
Is there a solution to get my .block to use the full height:100%? Ideally I do not want to absolutely position the .block because of the left and right padding on the columns (which may change at different screen resolutions).
Note I haven't included the Bootstrap CSS in my example above but I have in the fiddle. Assume it is relevant and included in all examples.
You could use like this ' padding-bottom: 1000em; margin-bottom: -1000em; trick.
Here's an example: Link
Related
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I have a mobile website with 4 banners that appear side by side. When I get to a certain screen width, I want 2 of them to drop below the other 2. Part of the problem is that I have used width: 24.96% to obtain the right total width of all 4 divs to fit the body.
CSS
.small_banners .banner_block {
display: block;
max-width: 100%;
height: auto;
width: 24.96%; }
.small_banners {
float: left;
clear: both;
width: 100%;
margin: 0 0 15px; }
HTML
<div class="small_banners">
<div class="banner_block">
<div>
Content
</div>
</div>
<div class="banner_block">
<div>
2nd piece of content
</div>
</div>
<div class="banner_block">
<div>
3rd piece of content
</div>
</div>
<div class="banner_block">
<div>
The 4th piece of content
</div>
</div>
</div>
When the screen reaches 958px I want the 3rd and 4th divs to drop below the 1st and 2nd, using a simple media query: #media all and (max-width: 958px) {
this should work.
#media (max-width: 958px) {
.small_banners .banner_block{
width:50% !important;
}
}
Kishan's method does indeed work if implemented correctly! Here's a fiddle that illustrates using the css max-width property to change the width of the 4 .banner_block elements depending on the screen width.
https://jsfiddle.net/evc670st/1/
Note elements with class banner_block use display:block and float:left to stack horizontally. If you don't want to float these elements, you can use display: inline-block, but make sure there is no whitespace in between your html markup.
Source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I understand the container > row > col-size-# css format for creating responsive columns. There is an area of our site where we need to use defined column widths inside a container and do not use the container > row > col-size-# format.
.special-area{
width: 300px;
}
.special-area .one-third{
width: 100px;
padding: 0px;
margin 0px;
display: inline-block;
}
The expected outcome is 3 columns each 100px wide displayed side by side in 1 row.
Instead, we are getting 2 columns side by side and the 3rd column underneath the 1st.
How can we make 3 columns side by side?
You used display:inline-block, that means those divs are acting like words. And you know, for word, a space is counted. You can use following to collapse spaces.
.special-area{
white-space: nowrap;
}
.special-area .one-third{
white-space: normal;
}
Float the inner DIVs and they'll be on the same line, like in this fiddle.
The HTML
<div class="special-area">
<div class="one-third"></div>
<div class="one-third"></div>
<div class="one-third"></div>
</div>
The CSS
.special-area{
width: 300px;
}
.special-area .one-third{
width: 100px;
padding: 0px;
margin 0px;
display: inline-block;
background:red;
height:1px;
float:left;
}
Height and background color added to demonstrate.
Chris Coyier deftly explains why this happens and presents multiple solutions at http://css-tricks.com/fighting-the-space-between-inline-block-elements/
The solutions by #Iqbal and #MatthewJohnson work. Another option that doesn't require css is to type the html differently:
<div class="special-area">
<div class="one-third">
Content</div><div class="one-third">
Content</div><div class="one-third">
Content</div>
</div>
I have a very straightforward HTML page that displays content in two columns. To format the columns I'm using <div> as the outer container (display: table-row) and two inner <div> as the actual columns (display: table-cell). One of these columns has a padding at the top. The markup looks like the following - extra markup and styles omitted for clarity:
<style>
.row { display: table-row }
.cell { display: table-cell; border: 1px solid black; width: 150px }
.content { background-color: yellow }
</style>
<div class="row">
<div class="cell">
<div class="content">Some content; this is not padded.</div>
</div>
<div class="cell">
<div class="content">More content; padded at the top.</div>
</div>
</div>
I'm getting this:
But I expected this:
The behavior is the same whether the padding-top is applied to the cell or the content. Am I missing anything? Thanks.
You can achieve your two desired results just by using padding and margin on your div with the class content. Remember, padding will contribute to the overall width and height of an object, so that will extend the background color.
First screen shot:
<div class="content" style="margin-top: 10px">More content; padded at the top.</div>
Second screen shot:
<div class="content" style="padding-top: 10px">More content; padded at the top.</div>
Is there a way to have two columns, that match each other in height, without using table cells, fixed heights or Javascript?
Using a TABLE
<table>
<tr>
<td style="background:#F00;">
This is a column
</td>
<td style="background:#FF0;">
This is a column<br />
That isn't the same<br />
height at the other<br />
yet the background<br />
still works
</td>
</tr>
</table>
Using DIVs
<div style="float:left;background:#F00" >
This is a column
</div>
<div style="float:left;background:#FF0" >
This is a column<br />
That isn't the same<br />
height at the other<br />
yet the background<br />
still works
</div>
<div style="clear:both;" ></div>
The goal is to make both backgrounds extend the full height regardless of which side is taller.
Nesting one in the other wouldn't work because it doesn't guarantee both side are the correct height.
Unfortunately, the preview showed the working HTML, but the actual post stripped it out. You should be able to paste this into an HTML file and see what I mean.
http://www.xs4all.nl/~peterned/examples/csslayout1.html
this is the kind of thing you want, give them both a height of 100% (using this css trick) and they'll stretch out to the height of the containing div!
edit: forgot to mention, put them in a container div!
Edit:
<html>
<head>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
#container
{
background-color: #333333;
width: 500px;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
#colOne, #colTwo
{
width: 250px;
float: left;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
#colOne
{
background-color: #cccccc;
}
#colTwo
{
background-color: #f4f5f3;
}
</style>
</head>
<body>
<div id="container">
<div id="colOne">
this is something</div>
<div id="colTwo">
this is also something</div>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Just because nobody's said this, a lot of times people just fake the existence of even columns, by having a background image which tiles itself all the way to the bottom of the outer container.
This gives the appearance that the content is in two equal columns, even though one ends before the other.
Use the Faux Column CSS technique to solve this problem.
Given the following:
<div class="contentSidebarPair">
<div class="sidebar"></div>
<div class="content"></div>
</div>
You can use the following styles:
/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
#FFF is the bgcolor of your content */
div.contentSidebarPair {
background: #FFF url('sidebar.gif') repeat-y top left;
width: 800px;
margin: 0 auto; /* center */
zoom: 1; /* For IE */
}
/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
div.sidebar {
float: left;
width: 200px;
}
div.content {
float: left;
width: 600px;
}
There! Simple and effective. Absolutely zero JavaScript involved. And if you want to create more complex layouts (liquid layouts), you can adapt this technique using background-position. A tutorial is available here.
display:inline-block
With a trick, it even works in IE:
<div><span>
col1
</span></div>
<div><span>
col2
</span></div>
div {display:inline;}
span {display:inline-block;}
Yes, it is possible - pure CSS and no hacks - equal height columns.
Check this this article - it is very well written.
It's straightforward if you are dealing with browsers which support CSS2.1 (IE8 and above, all other major browsers). If this is your markup:
<div>
This is a column
</div>
<div>
This is a column<br />
That isn't the same<br />
height at the other<br />
yet the background<br />
still works
</div>
This would be your CSS:
div { display: table-cell; }
If you need more than one row in the layout you will have to add some wrapper elements in there, but otherwise this works straight off.
Theres a simple way of achieving this with clever HTML and CSS.
First the HTML:
<div id="container">
<div id="col1">
this is column 1
</div>
<div id="col2">
this is column 2<br />
it is obviously longer than the first column <br />
YEP!
</div>
</div>
Please note the lack of clear:both unsemantic div.
Now the CSS:
#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }
The overflow hidden in the container rule makes sure that the container expands to the size of the contained floated divs (and gets rid of the unsematic clearing div that everyone loves so much).
The background of the container applies to the first column. The background of the col2 div applies only to the second div. This is what gives us the illusion that both divs are always the same height.
Simple, semantic solution in 3 lines of CSS. Enjoy
EDIT: Please comment on reason to vote down, otherwise I have to guess why my answer is wrong. In this case I had forgot to add the width property to the container so that it plays nice with IE6/7. Please check the revised CSS above.