Hi I have bunch of dynamic divs that are getting generated, but I dont know how to pad them internally and align them with left and right edges?
any help would be appreciated.
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>
So you'll have your spacing as you want :)
Cheers
I would recommend checking out bootstrap. Does most of the css for you:
http://getbootstrap.com/examples/grid/
You can put your div within the <div class="col-md-4"> or you can simply add a class to it like: <div class="col-md-4 my-class"> and add some padding to it like:
.my-class {
padding: 10px;
}
If you chose to add an idder div, you add the padding to the <div class="col-md-4"> and simply style your inner div.
<div class="col-md-4">
<div class="my-class">Text</div>
</div>
And style it like:
.col-md-4 {
padding: 10px;
}
.my-class {
background: red;
}
If you wrap your column boxes in a you should be alright. If the padding is still off, you can alter the margin of the row, and then you don't need to mess with the individual column divs.
Example
.row {margin-left:-15px;margin-right:-15px;}
Related
It is my fault, I am trying to re-ask the question.
I have some code like this:
<style>
div {
float: left; width: 150px; padding: 10px;
margin: 10px; color: #fff;
}
</style>
<div style="background: #c33">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #3c3;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #33c;">
c<br>c<br>c<br>c<br>c<br>c<br>c
</div>
<div style="background: #399;">
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
</div>
<div style="background: #939;">
e<br>e
</div>
<div style="background: #993;">
f<br>f<br>f<br>f<br>f
</div>
<!--
... and so on ...
-->
when my visitor's screen has enough width, it is works fine like this.
when the screen become smaller, it still works fine at beginning.
but good time doesn't last long, when continually shrink screen size, it displayed like this.
some space appeared between c(the blue one) and e(the purple one).
then a(the red one) and f(the yellow one).
when shrink to 2 columns, a c and e are totally separated.
So, my question is, every my block have certain(fixed) width, uncertain(fluid) height, there is no max-width of this "block area" or say "the parent node of these blocks" or container whatever.
Can I just remove these unnecessary spaces using pure css way?
Hope this time I explained clearly, and thank you for reading my post.
You might try to left float only two, and float right the other:
.aaa,
.bbb,
.ccc {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.bbb {
float: right;
}
.aaa,
.ccc {
float: left;
}
<div class="aaa" style="background: #933">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="bbb" style="background: #393">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div class="ccc" style="background: #339">
c<br>c<br>c<br>c<br>c<br>c
</div>
Grid, flex... and even simply using floats and clears:
<style>
div {
width: 200px; padding: 10px;
margin: 20px; color: #fff;
}
</style>
<div style="background: #933; float: left;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393; float:right;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339; clear:left;">
c<br>c<br>c<br>c<br>c<br>c
</div>
To some extent you can do that, if you use left AND right floats as shown below and put a wrapper around it to let the right-floated elements not go too far right:
div {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.a {
float: left;
}
.b {
float: right;
}
.wrapper {
width: 520px;)
<div class="wrapper">
<div style="background: #933" class="a">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393" class="b">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339" class="a">
c<br>c<br>c<br>c<br>c<br>c
</div>
</div>
Like others have said, there are plenty ways of doing it, but I'd use flexbox.
Just wrap the two boxes on the left in a container div, and use display:flex on that container, and set the flex-direction property to column and they should stack on top of one another.
Here's a great website to pick up the basics - http://flexboxfroggy.com/
Oddly enough, the closest you could get is using damn CSS columns..
Yeah, that's right. I just said "CSS Columns"
Declaring an auto column layout using your divs width as column width, and making sure no div will wrap into multiple columns with break-inside: avoid; you can get pretty close.
body {
columns: 150px;
column-gap: 2em;
}
div {
break-inside: avoid;
}
https://jsfiddle.net/p0yLs5sh/1/
And yes, I know. I just said columns. Thought that would never be an answer.
GitHub use margin:40px and padding:24px. To use only margin or padding is not good? ex. margin:64px or padding:64px. I want to know the reason why GitHub use both of them.
<style text="css">
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
</style>
<p class="alt-lead text-center text-gray mb-6 pb-4 col-md-10 mx-auto">
Open source software is free for you to use and explore. Get involved to perfect your craft and be part of something big.
</p>
<div class="clearfix gut-lg">
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-future.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Shape the future of software</h3>
<p class="alt-text-small text-gray">Your contributions help make technology better for everyone, developers and non-develo alike.</p>
</div>
</div>
</div>
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-best.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Work with the best in the field</h3>
<p class="alt-text-small text-gray">Amazing developers use GitHub. Contribute code to projects that change how software&nbs built.</p>
</div>
</div>
</div>
<div class="float-left col-md-4">
<div class="clearfix mb-4 text-md-center">
<div class="float-left mr-4 float-md-none mr-md-0 mb-md-3"><img src="https://assets-cdn.github.com/images/modules/site/iconsnsource-ico-grow.svg?sn" alt="" aria-hidden></div>
<div class="overflow-hidden">
<h3 class="alt-h4 mb-2">Grow your skills and help others</h3>
<p class="alt-text-small text-gray">Whatever your skill level, working on open source software is a great way to learn newp;things.</p>
</div>
</div>
</div>
</div>
I guess you already know different between margin and padding. but wondering why they using both combined instead of one thing.
If you check their code. you will see they come from different class.
.mb-6 {
margin-bottom: 40px;
}
.pb-4 {
padding-bottom: 24px;
}
and If you dig a bit deeper you will see they have these classes in their framework.
.mb-1{ margin-bottom: 4px }
.mb-2{ margin-bottom: 8px }
.mb-3{ margin-bottom: 16px }
.mb-4{ margin-bottom: 24px }
.mb-5{ margin-bottom: 32px }
.mb-6{ margin-bottom: 40px }
and same things for padding pb-1 to pb-6
Now, If they want 64px space they have options to define a new class or re-use those class.
And they choose to reuse .pb-4 + .mb-6 to get 64px instead of define a new class just for one time using and without messing around with their framwork.
The reason why people would use margin and padding together would usually be due to the use of a background color, or background image.
If the background is left blank/transparent, it does not matter if you use a padding or a margin. However once you set the background color, the padding will increase the size of the element which includes the background color, while the margin will separate it from other elements creating white space in between.
Hope this helps you understand!
What I am understanding is that you went through GitHub's styles and noticed that they used both margin and padding in their CSS. Your question appears to be "Is using one/both preferred or does one method have an advantage?"
The answer to which is no, there isn't an advantage to using either, but you need to understand what margin and padding are
Margin
Margin is space between that element and elements around it. so saying margin:5px on something will put a five pixel wide margin around the entirety of the element, ensuring other elements do not "touch" it.
Example:
Notice that there is a very visible gab between the first element and the second element. And there is even a gap between the left side of the container and the first element.
.row > * {
float: left;
min-width: 25%;
max-width: 30%;
margin: 5px;
background-color: blue;
color: white;
}
<div class="row">
<div>Hi</div>
<div>Hello</div>
</div>
Padding
Padding, on the other hand, is how much space there should be between the edges of an element and the element's own contents. padding:5px says that there is a a sort of boundary inside the element five pixels wide on each side. To extend our first example:
Notice that there is a very small gap between the contents of each element's wall (where the background begins or ends) and the text content.
.row > * {
float: left;
min-width: 25%;
max-width: 30%;
margin: 5px;
padding: 5px;
/*Try removing/changing this value to see what effect it has.*/
background-color: blue;
color: white;
}
<div class="row">
<div>Hi, this text is longer so that we can see the border around the element and how much space there is between the walls of the element and the text.</div>
<div>Hello</div>
</div>
Tl;Dr
Margin is used to create a gap or some space between elements. Padding is used to create space between an elements contents and it's "walls."
So you seem to know
Padding is space inside the border, whereas Margin is space outside
the border.
Do you also know that that means, if you have margin set to elements following by the same elements it will just take the biggest possible value. So if margin-bottom is bigger than margin-top of the following element it will take margin-bottom.
So example gap will be margin-bottom from first element 20px.
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
margin-bottom: 20px;
}
div.two {
margin-top: 5px;
}
<div class="one"></div>
<div class="two"></div>
Kinda same example gap is again 20px but this time it is the margin top from the second element.
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
margin-bottom: 5px;
}
div.two {
margin-top: 20px;
}
<div class="one"></div>
<div class="two"></div>
And here what happens if you use padding. If you use your browser debugger you will see that now the gap should be 27px (25px from both elements padding + 2x1px border)
* {margin:0; padding:0;}
div {
width: 100px; height: 100px;
background-color: orange;
border: solid 1px black;
}
div.one {
padding-bottom: 5px;
}
div.two {
padding-top: 20px;
}
<div class="one"></div>
<div class="two"></div>
So to answer the why. If you know this you can have reasons to use one over the other.
What is happening
What I want
As you can see, the Amy grey box and rectangle grey box are not positioning themselves on the same line. This is strange considering my codes uses the Bootstrap col sys to put both grey boxes on the same row.
My cols add up to 12 so I'm not sure what is happening. I do notice, however, if I make the cols add up to 11, then both grey boxes are put on the same line. But this is not a fix I want as I would like my cols to add up to 12 and have both boxes appear on the same line.
If anyone could help me solve this it would be greatly appreciated!
My code
HTML
<div class="row student-row">
<div class="col-xs-2 student-box">
<h1>Amy</h1>
</div>
<div class="col-xs-10 worksheet-box">
...
</div>
</div>
CSS
.student-row{
margin: 20px 10px 10px 10px;
}
.student-box{
margin-right: 10px;
}
.worksheet-cell{
margin-top: 10px;
margin-left: 10px;
width: 20%;
}
.worksheet-group{
margin: 10px 15px 20px 15px;
}
JSFiddle
You've overridden the margins that Bootstrap set and set your own. Now the box needs more space so it doesn't fit.
Remove those margins and the two boxes fit side by side.
.student-row{
/* margin: 20px 10px 10px 10px;*/
}
.student-box{
background-color: #F5F5F5;
font-weight: 700;
text-transform: uppercase;
/* margin-right: 10px; */
}
Your style is breaking since you are adding the following to your .row element in Bootstrap. If you play with the margin of the row it will break.
.student-box{
margin-right: 10px;
}
I recommend to use the following pattern:
<div class="row student-row">
<div class="col-xs-2 student-box">
<h1>Amy</h1>
</div>
<div class="col-xs-10 worksheet-box">
<!-- Add new elements row wise here -->
<div class="row">
</div>
</div>
</div>
I'm trying to work out how to achieve the following in Bootstrap 3:
I have a HTML page which is primarily based around bootstrap's fixed container grid.
Half way down the page I want a row with columns of different sizes.
I want the content (text / images) inside these columns to line up with the content inside the columns in the fixed container grid.
I want the background colours of the left and right furthest columns to bleed right to the edge of the page.
It may help if I illustrate what I'm trying to achieve:
Any help would be greatly appreciated!
Update: as requested here's some code examples of what I currently have: http://www.bootply.com/ZzOefJGRRq As you can see the text and columns in the fluid container are not lining up correctly.
Bootstrap 4
Use position absolute before or after elements with width: 50vw
Codepen
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 c-col-bg--red">
...
</div>
<div class="col-lg-6 c-col-bg--blue">
...
</div>
</div>
</div>
CSS
.container-fluid {
max-width: 1000px;
}
#media (min-width: 992px) {
div[class*="c-col-bg"] {
position: relative;
}
div[class*="c-col-bg"]:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
width: 50vw;
}
.c-col-bg--red:after {
right: 0;
background: red;
}
.c-col-bg--blue:after {
left: 0;
background: blue;
}
}
You can use :before elements and some classes
https://jsfiddle.net/ex3ntia/wa8myL9v/2/
.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}
UPDATE
added media query for small devices
https://jsfiddle.net/ex3ntia/wa8myL9v/3/
UPDATE 2
I have added the following line to fix the big horizontal scroll on chrome browsers.
body, html {overflow-x: hidden;margin: 0;padding: 0;}
TLDR; no framework has this out of the box, because covering all possible use cases is both very complex and would result in a huge amount of code.
It is doable but requires some amount of manual coding. The approach below works for 2 columns. More columns and breakpoints will require a more complex solution.
Sample markup:
<div class="container">
<div class="row">
<div class="col-5">default column</div>
<div class="col-7">default column</div>
</div>
</div>
<div class="container container--fluid">
<div class="row">
<div class="col-5">fluid column, aligned with above</div>
<div class="col-7">fluid column, aligned with above</div>
</div>
</div>
<div class="container container--bleed">
<div class="row">
<div class="col-5">
<div class="content">like fluid, but content is aligned with default</div>
</div>
<div class="col-7">
<div class="content">like fluid, but content is aligned with default</div>
</div>
</div>
</div>
scss for brevity
// assuming you have these values or able to set them
$max-width: 1140px;
$gutter: 8px;
$grid: 12;
$customColumns: [5, 7]; // columns you want to align
// sample grid
.container {
max-width: $max-width;
margin: 0 auto;
padding-left: $gutter;
padding-right: $gutter;
}
.row {
display: flex;
margin-left: -$gutter;
margin-right: -$gutter;
}
div[class^='col'] {
max-width: 100%;
padding-left: $gutter;
padding-right: $gutter;
position: relative;
}
#for $i from 1 through $grid {
.col-#{$i} {
width: calc(100% * #{$i} / #{$grid});
}
}
.container--bleed, .container--fluid {
max-width: none;
}
// custom grid rules for alignment
#media(min-width: #{$max-width}) {
#each $i in $customColumns {
.container--bleed, .container--fluid {
.col-#{$i}:first-child, .col-#{$i}:last-child {
width: calc(#{$max-width * $i / $grid} + ((100% - #{$max-width}) / 2));
}
}
.container--bleed {
.col-#{$i}:first-child {
padding-left: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
.col-#{$i}:last-child {
padding-right: calc((100% - #{$max-width}) / 2 + #{$gutter});
}
}
}
}
I created a codepen POC for a similar layout here: https://codepen.io/bariscc/pen/BajKpMP
You can implement the container-fluid to achieve this.
Basically your webpage will have the following structure:
<div class="container">
<p>Content here</p>
</div>
<div class="container-fluid">
<p>"Bleeded" content here</p>
</div>
<div class="container">
<p>And it continues with the fixed width!</p>
</div>
If you need to adjust the spaces between those containers, you can add your own classes or ID:s to each and kind of take it from there. Since containers in Bootstrap don't have much of a default styling, this is very efficient way of creating what you're looking to do in here.
EDIT: After inspecting the comments section and looking at the code you provided, I assume you want to have the fluid container, but keep the contents within it lined up with the fixed container, right?
For this, you can just put another <div class="container">...</div> in your container-fluid. Check the updated fiddle.
Where you have the special row, you need a div with container-fluid class encapsulating a div with container class (this is a fixed width class).
Then you need to account for the background colours either side. Either add additional divs within container-fluid each side of container and set background colour, or perhaps use a three column table.
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars