I know that page-break-after is used in printing html documents, but is there a browser equivalent?
Like I have this html:
<div class="c1">
<div>item1</div>
<div>value11</div>
<div>value12</div>
<div>item2</div>
<div>value21</div>
<div>value22</div>
</div>
and I want to see something like
item1 value11 value12
item2 value21 value22
The css:
.c1 > div{
display:inline-block
}
.c1 > div:nth-child(3n){
????page-break-after
}
I need a page break after every third div (:nth-child(3n)), but I can't figure out how to add it. Is there a way to achieve it (without adding new elements)?
Asuming you cannot alter the DOM (which I would advise), you can fix it with floats and clears:
.c1 > div { float: left; margin-right: 10px; }
.c1 > div:nth-of-type(3n+1) { clear: left; }
So you're floating the divs, but deny the 4th one to have a element at it's left, and thus forcing it on another line.
Fiddle example
Related
I need to align pic-text-pic in a row.
<style type="text/css">
#element1 {background: url('url1'); margin-right: 10px}
#element2 {margin-right: 10px}
#element2 {background: url('url2')}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
<div id="element3">
element 2 markup
</div>
I tried playing with it, just cant make it happend.
Any ideas?
You need to research the various display properties of CSS and how these create layout in the browser. DIVs are by default "block level elements" which means they're each going to break onto a new line.
For your example, you'll want to look into the "inline" or "inline-block" display properties, which will get your elements to line up next to each other (as long as there is enough space in the parent container). So, try this:
#element1,
#element2,
#element3 {
display: inline-block;
}
Try using <span> tags instead of <div>s.
Use display: inline-block:
#element1,
#element2,
#element3 {
display:inline-block;
}
use <span> and not <div>
How do I align foo to left and bar link to right?
<td>
<span>foo</span>
<span>bar</span>
</td>
You should use float to achieve that
Demo
td span:first-of-type {
float: left;
}
td span:last-of-type {
float: right;
}
Note that the pseudo I am using will target the first and the last span respectively, but if you are looking to support legacy versions of IE or other browsers, this will fail, using unique class for each span is recommended instead.
The only reason am using pseudo here is it saves me to declare classes, this is a huge advantage if you want to do this for each td
Also, I assume that you are not well informed for float or you must have tried to do so, if that's the case, you can refer my answer here for detailed information over float and also refer this, which isn't necessary for this scenario because you are using float in td except the floated elements, but if you have any elements or text apart from these two elements in the same td than make sure you clear the floating elements.
td > span:first-child {
float: left;
}
td > span:last-child {
float: right;
}
DEMO: http://jsfiddle.net/Px4un/
You can use inline styles, like this:
<td>
<span style="float: left;">foo</span>
<span style="float: right">bar</span>
</td>
Or plain CSS:
<style>
.left {
float: left;
}
.right {
float: right;
}
</style>
<td>
<span class="left">foo</span>
<span class="right">bar</span>
</td>
Please, don't use pseudo elements, like :first-child or :first-of-type, because it will be not cross-browser.
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
I want the btn next to the string. I can't figure it out even using CSS inline
<span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>
CSS:
.subscribe_button {
display: inline;
}
You have some invalid HTML here.
A block level element cannot be within an inline one, this is basic HTML knowledge.
What I suggest you do is wrap both elements in a div and use float: left;
<div class="wrap">
<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>
</div>
CSS:
.wrap
{
width: 300px;
}
.wrap h3,
.wrap span
{
float: left;
}
.wrap span
{
margin-left: 10px/*your value*/;
}
I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.
http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/
The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.
Try adding this to your CSS
.subscribe_button h3 {
float: left;
}
If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).
Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/
try:
display: inline-block;
Try following code
.subscribe_button h3{
display: inline;
}
use float:left for both h3 and button
I think you can do this with this code:
.subscribe_button > * {
display: inline;
}
'>' is a child selector and * matches to all element.
Yo can read more about CSS2 selectors: CSS2 Selectors
Suppose I have the following HTML:
<div id="Wrapper">
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
<div class="MyClass"></div>
</div>
and the following CSS:
.MyClass {
float: left;
margin-right: 5px;
}
All these elements are going to be positioned on one line with a space in between of 5px. The problem is that there will also be a space of 5px at the end. I want to have Wrapper really wrap the .MyClass divs so that there's no space on the edge.
Now I can think of several ways of doing this:
with jquery, set the right margin of the last element to 0.
with CSS create a new class - .MyClassForLastElement with marin-right set to 0.
creating a negative right-margin of -5px for .Wrapper.
I was wondering if there's an elegant and clever way of doing it.
Not sure if there is a perfect solution, I use to do that:
.MyClass {
float: left;
margin-left: 5px;
}
.MyClass:first-child {
margin-left: 0;
}
I do it with with first-child since it is supported in IE6-7 while last-child is not.
If you don't want the last child to have a margin-right use the last-child psuedo-selector.
.MyClass:last-child {
margin-right: 0px;
}
The following rules would provide the desired effect. First element will have no margin, but effectively any consecutive element would have margin-left:5px;.
.MyClass {
float: left;
margin: 0;
}
.MyClass + .MyClass {
margin-left: 5px;
}
Well supported across browsers, IE7+
the + adjacent selector matches an element that is a next sibling of another element, in the example above it's a .MyClass element following another .MyClass element
selectors as like this one
.MyClass + .MyClass {
margin-left: 5px;
}
More info http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors