I have this fiddle:
https://jsfiddle.net/qa5dr0x8/130/
I dynamically create divs, so i dont know how many will i have them and i dont know width of them. I manage to achive to have them in one line but there is a space after last div in container. What i want to to fill container with that divs even if i dont know width any of them. I would love to achive that without using flex. Any suggestion ?
<body>
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
you could use display: table instead of flex for the wrapper and use display:table-cell for the variable divs.
<div style="widht:30%">
test text
</div>
<div style="width:70%;border:1px solid black; display: table">
<div style="background-color:red;display:table-cell;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:table-cell;">
b1dfsd
</div>
<div style="background-color:blue;display:table-cell;">
c1d
</div>
</div>
https://jsfiddle.net/qa5dr0x8/131/
<body>
<div style="width:30%">
test text
</div>
<div style="width:70%;border:1px solid black;display:inline;">
<div style="background-color:red;display:inline-block;">
a1fsdfsdfsd
</div>
<div style="background-color:yellow;display:inline-block;">
b1dfsd
</div>f
<div style="background-color:blue;display:inline-block;">
c1d
</div>
</div>
</body>
If you want all in same line without space and without using flex then you can add css display:inline; in this div
<div style="width:70%;border:1px solid black;display:inline;">
Related
I am trying to fit image in with text link to flexbox container. The problem that it's break my container and it's become look like next on small screen:
<el-container>
<el-main>
<div class="top">
<div class="download-compiler">
<div class="dmd-download">
<el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
<el-link style="color: black; font-size: 1.3em;">DMD</el-link>
</div>
</div>
<div class="code-snippets">
<div class="code-snippets-header">
Samples:
</div>
<div class="code-snippets-content"></div>
</div>
</div>
<div class="middle">
<div class="main-app-img">
</div>
</div>
</el-main>
</el-container>
Here is minimal jsfiddle.
https://jsfiddle.net/dhoc4zw5/
I'm not really sure what you're trying to achieve, but in your jsfiddle, just removing height: 20% from class .top make the image and text always stay in the pink zone.
I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I have a problem with my divs. I created 3 divs with same classes. I want to create 3 cards with avatar and personal info on them, but these divs are "sticked". I want to make a gap between them (from right side), but when I make padding-right, there's no gap, but more background color. How can I separate these three divs without changing width?
Here's my code:
<div id="team">
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
<div class="id">
<div class="idContent">
<!--Here is content in a frame!-->
</div>
</div>
</div>
http://codepen.io/anon/pen/PbMBPy
Thanks for help!
You have to use margin-right: 25px; instead of padding-right: 25px;
use margin-right instead of padding-right
I've done quite a bit of searching here on Stackoverflow on how to solve this problem efficiently, but I still haven't seemed to find exactly what I'm looking for.
Basically, I have three columns that I want evenly spaced and centered across my page. However, when I set col-md-4 for all three columns, the end result is they are all three bunched up to each other. How can I make it so that there is space between the columns? Like 10-15px or so without forcing them onto another row.
Here is some example code:
<div class="row-fluid">
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
</div>
Maybe I'm just doing something wrong but I cannot seem to figure out how to make this work. I've seen several people suggest to just put them into another div with some padding but that doesn't seem to work for me.
Thanks for any help! I'm open to all suggestions!
Actually, your code already creates spaces between columns, because in bootstrap the column has 15px padding from each side.
Your code is working normally, check here: http://www.bootply.com/H6DQGdZxGy
It's a late answer but I guess that some people can be interessed by another explanation.
Bootstrap "cols" system is not made to decorate but to place elements in pages. If you need to space column contents, you need to wrap your content:
<div class="row-fluid">
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
Then you can add spacing on ".col-spaced" by using padding
.col-spaced {
margin-left: 15px
}
Note that:
margin will change you column size because the col-* should be placed to respect column layout
you may need to change col-* first and last child to fix some problem
A 'hacky' way to do what you want is to give the columns a border that is the same color as the background.
You can do something like:
[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
[class*="col-"]:first-child {
padding-left: 0px;
}
[class*="col-"]:last-child {
padding-right: 0px;
}
You might add a content to wrap it, otherwise you'll have those rules applied to all columns in your layout!
.spaced-columns [class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
So then you can use:
<div class="spaced-columns">
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
</div>
or you can create just a class like: spaced-col and then add a padding on it:
.spaced-col {
padding: 0px 10px;
}
and then you apply this class on your cols
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
So you'll have your spacing as you want :)
Cheers
If you use padding and change the background color, you may notice that the colors of the columns don't have much spacing between them.
Perhaps a better option would be
.col-md-4 {
margin-left: 5px;
}
You have the option to use column offsetting col-md-offset-*. You wouldn't be able to maintain the spacing of your columns (reduce 4 to 3), but I believe it should somewhat do the job for responsive spacing.
Check this out: twitter bootstrap grid system. Spacing between columns
You can put another div to place your content inside the .col div, as the below example:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
</div>
</div>
See it working here: https://codepen.io/pmfeo/pen/RVxPXg
That div will adjust to it's parent padding.
I have three column layout. In the third column I have two divs. First div is fixed. Second div is having minimum height of 50px. when the text content inside second div increases then its height should increase to a point where it reaches the bottom of third column and then it should show scrollbars.
So far I have applied my effort here:http://jsfiddle.net/Q2Ata/1/
I have tried to achieve this layout but when I add more text inside then the main table's height also inceases. This issue can be found in this fiddle.
http://jsfiddle.net/Q2Ata/2/
HTML code:
<div class="table">
<div class="table-cell">
<div class="column">Column 1</div>
</div>
<div class="table-cell">
<div class="column">Column 2</div>
</div>
<div class="table-cell">
<div class="column">
<div class="container">
<div class="header">
<div class="table-cell">Header</div>
</div>
<div class="content">
<div class="abc">
text content here ...
</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
.table {display:table;width:100%;height:200px;max-height:200px;table-layout:fixed}
.table-cell{display:table-cell;padding:10px;vertical-align:top}
.column{border:1px solid #000;height:100%}
.container{display:table;width:100%}
.header, .content{display:table-row}
{display:table-row}
.container .table-cell{border:1px solid #F00}
.abc{min-height:50px;padding:10px;border:1px solid #000;height:auto;overflow-y:auto}
You need to set a max-height on your element in order to have the overflow: auto working and you will have scroll bars when the maximum height has been reached.
http://jsfiddle.net/Q2Ata/4/