How do you horizontally distribute 3 divs with the least amount of code?
I have 3 divs that have the same class, and I need to distribute them horizontally, with 19 pixels of space between each div.
My solution currently is to give the first 2 divs a right margin of 19 pixels, and assign a separate class to the 3rd div that gives it a left margin of 19 pixels.
This gets the job done, but I feel like there may be a better way of doing it. Ideally, all 3 divs would still have the same class.
See: http://jsfiddle.net/thirtydot/q6Hj8/
.yourDivClass + .yourDivClass {
margin-left: 19px
}
That uses the adjacent sibling combinator to apply margin-left to every .yourDivClass which is preceded by a .yourDivClass - in other words, all except the first.
You only need two columns with a right margin; the third column needs no additional margin. Border added so you can see it in a fiddle.
div.hasMargin
{
margin-right: 19px;
}
div.column
{
border-color: black;
border-style: solid;
border-width: 1px;
float: left;
}
Here is a fiddle
Related
I currently have two elements:
.item-one {
margin-bottom: 24px;
}
..other-elements..
.item-two {
margin-top: 48px;
}
These items are fine on their own, but say, if I removed the ..other elements.. between them, so they'd be one after another, I would be left with a total margin (visually) of 72px.
The ..other elements.. have a consistent 24px, because of the flow, but my app is dynamic and users can switch places of elements.
Unfortunately, this is highly undesirable as it'd result in bad looking spaces.
I'd like to write something like
.item-two [if-div-is-previous -> .item-one] {
//this will set the margin to 0 only if preceded by .item-one
margin-top: 0px;
}
In short, I'm trying to keep a consistent distance between all the elements on the page of 24 px, even when items that have different margins than 24px are one after another.
.item-one + .item-two { } //if .item-two is next to .item-one
That's not how margins work. CSS have vertical collapsing margins.
You're margins will always be 24px, not 48. As long as the two are adjacents and in the same formating context.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
EDIT: with the information you added I understand that your problem is that the following adjacent elements may have bigger margin. You can reset them with the ~ following selector
#one~*{
margin-top: 24px !important;
margin-bottom: 24px !important;
}
https://codepen.io/anon/pen/VMzwvq
I have a page with a row of 100px and 4 columns of 25px each. I seem to get at odd behavior. Please take a look at this fiddle http://jsfiddle.net/GmU2k/
My question is should all of the columns be on the same line?
Fiddle
Better use box-sizing: border-box by adding below css on column-3: That happens because of your 1px border.
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
Check this fiddel
http://jsfiddle.net/GmU2k/2/
.column-3 {
width: 24%;
border: 1px solid red;
float: left;
}
You gave the width as 25% and a border of 1px. So 4 divs width = 100% + border width
Thats why 4 divs are not shown in one line. Because there is not enough space.
Once you decrease the width of inner divs then there will be enough space. Or you can remove the border, so that inner divs will have enough space to be shown in a single line.
Note: The simple concept is there should be enough space for the divs to be shown in single line. If there is not enough space then they will flow to the next line.
Change the column-3 width to 24%.
I have block in my site and i want to do something like that:
http://s13.postimg.org/6ue9a8bfr/Untitled_3.png
but what happens to me is this:
http://s15.postimg.org/derz2m8h7/image.png
this is my div csS:
background-color: #ffffff;
width: 37.2%;
border-top: 4px solid black;
margin: 14px 0.4% 14px 0.4%;
float: left;
-webkit-border-radius: 2px;
border-radius: 2px;
How i can do this?
Thanks!
Old way:
Use a table with 1 row (tr) and 3 cells (td), put your DIVs in those cells, make sure the cells are valign=top.
People that shun table layout way:
Use 3 container DIVs that will represent your columns, relatively position them side by side (float:).
Modern way:
Use flexbox positioning https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes or use the CSS column-* properties http://playground.html5rocks.com/#columns
Use three separate container divs to represent the three columns. Within each column, which has been set the appropriate width, make the divs inside the containers and set them at 100% each, thus filling up the entire width of the column container forcing the other div elements underneath. Then add appropriate margins.
i have a parent div, which can change its size, depending on the available space. Within that div, i have floating divs. Now, i would like to have spacing between these divs, but no space to the parent div (see drawing).
Is there a way to do this with CSS?
Thank you
I found a solution, which at least helps in my situation, it probably is not suitable for other situations:
I give all my green child divs a complete margin:
margin: 10px;
And for the surrounding yellow parent div i set a negative margin:
margin: -10px;
I also had to remove any explicit width or height setting for the yellow parent div, otherwise it did not work.
This way, in absolute terms, the child divs are correctly aligned, although the parent yellow div obviously is set off, which in my case is OK, because it will not be visible.
You can do the following:
Assuming your container div has a class "yellow".
.yellow div {
// Apply margin to every child in this container
margin: 10px;
}
.yellow div:first-child, .yellow div:nth-child(3n+1) {
// Remove the margin on the left side on the very first and then every fourth element (for example)
margin-left: 0;
}
.yellow div:last-child {
// Remove the right side margin on the last element
margin-right: 0;
}
The number 3n+1 equals every fourth element outputted and will clearly only work if you know how many will be displayed in a row, but it should illustrate the example. More details regarding nth-child here.
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Note2: The :nth-child() selector is supported in all major browsers, except IE8 and earlier.
Add margin to your div style
margin:0 10px 10px 0;
http://www.w3schools.com/css/css_margin.asp
I'm late to the party but... I've had a similar situation come up and I discovered padding-right (and bottom, top, left too, of course). From the way I understand its definition, it puts a padding area inside the inner div so there's no need to add a negative margin on the parent as you did with a margin.
padding-right: 10px;
This did the trick for me!
Is it not just a case of applying an appropriate class to each div?
For example:
.firstRowDiv { margin:0px 10px 10px 0px; }
.secondRowDiv { margin:0px 10px 0px 0px; }
This depends on if you know in advance which div to apply which class to.
A litte late answer.
If you want to use a grid like this, you should have a look at Bootstrap, It's relatively easy to install, and it gives you exactly what you are looking for, all wrapped in nice and simple html/css + it works easily for making websites responsive.
I need to make sure that two elements always 100 pixels apart. There are no errors with my code, but for some reason the margin-bottom on the the P tag is set to 50 pixels and the margin-top on a DIV below it is also set to 50 pixels.
Instead of being a total of 100px apart, they are only 50. Can someone explain this? I do not have any floats on the page so it's not due to a clearing issue. All html and css has been validated.
This happens in the latest version of Chrome and FIrefox 3.6.
Here's an example of my code:
#content p {
margin-bottom: 50px;
}
#content #posted {
border-top: 1px dotted #ccc;
line-height: 20px;
margin-top: 50px;
}
Margins overlap on top of each other. The maximum margin of the elements will be the margin between two elements.
If this is not what's happening in IE, it's an IE bug, as this is how CSS was designed to work.
You could use padding instead, or just make sure the margin of both elements is 100px.
Margins do not stack like that. The bottom element only sets a 50px margin from the top element, not the top element's margin. Therefore you need to make the margins 100px.