This question already has answers here:
Select every Nth element in CSS
(4 answers)
Closed 7 years ago.
Let's say I have 860px width area, where I need put 4 divs (200px width) and 3 spaces beetween them (20px).
If there would be only 4 divs at all, I can use
.div {width:200px; margin-right:20px}
.div:last-child {margin-right:20px;}
But there can be any number of divs, but only for comes to one line, so I can't use last-child. But width of one line is always 860px.
How to remove margin-right from fourth div in line? Or how to make this spacing correctly?
If you are targeting every 4th div element, you need to use nth-of-type with an expression of (4n+4) so it will select every 4th element.
div:nth-of-type(4n+4) {
color: red;
}
Demo
Note: Am using a general element selector here, so you need to add a
. before the div as you are using a class named .div
So what you need is a grid system, use nth-child:
div{margin-left:20px;}
div:nth-child(3n+1) {
margin-left: 0;
}
This
.div:nth-child(4){margin-right:0px;}
should work.
But I think you could simply do:
.div{margin-left:20px;}
.div:first-child{margin-left:0px;}
Because the first element will never change.
#Mr. Alien has given a best answer. But in your case you can do like this also (as if of your full width)
<div id="main">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
</div>
when you give margin-right to #main > div the last one is also have margin,
so alternatively you could do
#main{margin-right: -10px; /*what margin you have given to #main > div */}
Someone has posted answer with this
.div + .div{margin-left:20px;}
but deleted it.
It works for me and looks nice. Is it correct way to do this?
Related
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
I am looking at some css code and i do not understand this line. The code has a div called shape which contains six other divs each containing an image.
which images does the following code select? As i said the div shape contains six others divs, so why does the code below select only one image?
#shape > div{
}
Actually A > B is a specialization of the more generic A B:
A B will apply to any element B being somewhere inside an element A.
A > B will only apply to elements B who are direct children of an element A.
Simple example:
CSS
.a .b {
color: red;
}
.a > .b {
color: blue;
}
HTML
<div class="a">
<div class="b">Hello</div>
<div class="c">
<div class="b">World!</div>
</div>
</div>
You can try this example right here at jsFiddle.
As you can see, the blue color isn't applied to the second instance of an element with the class b, because it's no direct child; only a descendant. Otherwise both elements would be blue, due to the second definition (.a > .b) following later.
This selects any DIV that is a child of the element with the ID shape.
this applies the styles to divs which are direct children of element with id #shape
Demo: Fiddle
in the demo the style is not applied to section > div because the container div is not a direct child of #shape
> is the child combinator, also known as the direct descendant combinator.
That means the selector #shape > div only selects divs that sit directly inside a tag with ID #shape
Demo : http://jsfiddle.net/JDs9G/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS 2 Column layout: Column height
I am trying to create 2 columns that are even in length. I got it to work to an extend, but would like to know how to limit the size of the outer div to the inside content. This way the outer div re-sizes depend on either columns required length to display all the content within.
Right now my code adds a lot of extra height.
Thanks in advance!
Here is a jsfiddle with my code:
http://jsfiddle.net/Bk77A/
I won't repeat all of you code, but basically you need a clearfix, then set the container height:auto; position:relative. Also, why do you have soooo much padding and negative margin on your main content? Get rid of it.
<div id="wrapper">
<div.... innner divisions that are floated>
</div... end of all inner divs>
<div class="clearfix></div> (clearing our floats)
</div> (closing our wrapper)
css:
#wrapper {
height:auto;
position:relative;
additional styling
}
.clearfix {
clear:both;
}
Get rid of this padding-bottom: 9999px for both your columns
I have two sibling divs sitting below each other, both contained in the same parent div.
The requirement is that the divs need a certain amount of space between them, let's say 20px, but the space beween the inner divs and the parent div needs to be the same on all sides (top, right, bottom, left), in this case 0px.
The constraint here is that the inner divs need to have the exact same markup, so I can't apply a different or additional class to just one of them. Also I can't add any markup between the child divs or only above or below one of the child divs.
What would be a good way to solve this problem with CSS (no javascript), in a cross-browser compatible way?
Thanks!
#parentdiv div {
margin-top: 20px;
}
#parentdiv div:first-child {
margin-top: 0;
}
should do it. Alternatively, you could try
#parentdiv div + div {
margin-top: 20px;
}
Which solution to use depends on browers’ support of either the :first-child pseudo-class, or the + adjacent selector. Any modern browser (thus, discounting IE6) should support both.
you could insert another div inbetween them and make its height 20px? or is putting the first inner div into a new div and then making the new divs bottom margin 20px an acceptable solution?
As others have already stated, you cannot use a pure CSS approach that will work in IE6. However, why not use a minified, basic jQuery framework - without the ui it will be tiny - and then you can call the first child and apply the margin to that:
$("#parentdiv:first").css({ marginTop: 0 })
That way you'd have already applied the margin-top:20px; in your css, now you're removing it from the first child only. I know you said you did not want a javascript approach, but you're not left with much choice, unless you're willing to re-engineer ie6 and resurrect him for us?
Hope this helps someone somewhere.
Two divs sitting below each other? Do you mean they're stacked vertically, one on top of the other? Margin-top would do it as long as you don't have padding on the parent div.
Try this example.
<html>
<head>
<style>
div.parent {
background-color: #AAA;
}
div.child {
background-color: #CCC;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"> </div>
<div class="child"> </div>
</div>
</body>
</html>
You'll notice that as long as there's nothing inside the parent above the first child its margins won't extend the parent div.
If they're side-by-side and floating that's a different story, margin-left doesn't work the same as margin-top. You might be able to use margin-right on both divs but fix the width of the parent and set overflow to hidden in order to chop off the extended margin - but I'm not sure about compatibility on that kind of thing.
Are you absolutely certain you've got no way to distinguish the two divs? Finding a way around that constraint might do a lot to help you.
I have html:
<div class="field-label"><label>Email: </label></div>
<div class="field"><input class="input" ......></div>
and piece of css:
.field-label { clear:left; float:left; padding:0.5em; width:6em; }
.field { padding:0.5em; }
And it worked fine. But for some elements I wanted to apply following change:
when I add width to .field class layout goes to blazes: element with .field class appears under element with field-label class. Container of whole form is width enough to hold elements with field-label & field class.
Why is it happening, did I miss something in css basics?
Thanks ,Pawel
Did you take into account that padding, margin etc. is not included in width?
You might be better off using spans instead of divs for this layout, as spans are inline elements they might behave better than divs. Also, do you have a live example?
If the label and the field should appear on one line, you have to have a around the two 's witn an explicit width wide enought to contain the two others.
I am trying to put 2 columns into a website, I've got that to work fine but for whatever reason, the rest of the page doesn't change size to suit the content in the left column. Here is how it looks: www.kelownafoodspecials.com/indexsides.php.
Pretty stuck so any advice would be greatly appreciated. Thanks,
K
You should add <div style="clear:both;"></div> directly after your #contentright
you must float your #content div also. For any elements decalres as float:left(or right), if their containing elements are not also floated elements, the containing elements will not expand to fit the content and it will overlay it's containing element as you are seeing there.
Try this (assuming none of your content is meant to overflow)
#content {
overflow: hidden;
}
I just tried it using Firebug, and nothing appears to be chopped off (and the #content will expand to contain it's floated child).
You could append a <div class="clear"/> whose style could like like:
.clear {
clear:both;
display:block;
float:none;
}