I have following HTML markup. There are two .item divs in a row, each of them having a different height.
Is it possible to clear the floats after every second div without changing the markup? Every second div has the class .last-item.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item last-item"></div>
<div class="item"></div>
<div class="item last-item"></div>
</div>
CSS:
.wrap{
border: 1px solid #000;
width: 200px;
overflow: hidden;
}
.item{
width: 50%;
background: yellow;
margin-bottom: 10px;
float: left;
}
Demo:
http://jsfiddle.net/R7VHX/
.item:nth-child(2n+1) { clear: both; }
This is equivalent to:
.item:nth-child(odd) { clear: both; }
which clears after every second item (in other words, every third).
More info at http://www.w3.org/TR/css3-selectors/#nth-child-pseudo.
You can use the nth-child(odd) selector :
.item:nth-child(odd){
clear: both;
}
Related
I want four divs to appear on the same line. I can make three of them do it but the other won't unless I make the total width that the four divs take up less than 100%.
This shouldn't happen though, right? They should be able to, in total, take up 100% of the page width if there is nothing else 'in the way'? Below is a snippet with my code of what I mean.
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
font-size: 10px;
}
.wrapper {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0.5%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.inner {
display: inline-block;
vertical-align: top;
width: 25%;
}
.half {
width: 12.5%;
}
<div class="wrapper">
<div class="inner" style="background-color: red;">Div 1</div>
<div class="inner" style="background-color: blue;">Div 2</div>
<div class="inner" style="background-color: green;">Div 3</div>
<div class="inner">
<div class="inner half" style="background-color: purple;">Div 4 - First Half</div>
<div class="inner half" style="background-color: Teal;">Div 4 - Second Half</div>
</div>
</div>
I haven't checked to see if aligning the divs on the same line using float: left will make a difference to the problem as I need to use display: inline-block for aligning other thighs in the divs in my actual code.
So does any one know how to get the last one to appear on the same line?
Because you need to add float: left; to inner to make it behave as expected.
Also Adam is right, 12.5% will be 12.5% of the already 25% width container. I've removed the inner class from the half divs and changed their width to 50%.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
overflow: hidden;
font-size: 10px;
}
.wrapper {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0.5%;
margin-left: 0.5%;
margin-right: 0.5%;
}
.inner {
display: inline-block;
vertical-align: top;
width: 25%;
float:left;
}
.half {
float:left;
width: 50%;
}
<div class="wrapper">
<div class="inner" style="background-color: red;">Div 1</div>
<div class="inner" style="background-color: blue;">Div 2</div>
<div class="inner" style="background-color: green;">Div 3</div>
<div class="inner">
<div class="half" style="background-color: purple;">Div 4 - First Half</div>
<div class="half" style="background-color: Teal;">Div 4 - Second Half</div>
<div style="clear:both;"></div>
</div>
</div>
Your CSS doenst contain a class thats called "inner half" so you are combining two. You have multiple width's. Your first calls is inner so it takes 25% + 12.55
Try clearfix. Just apply a class="clearfix" to the parent element. This is the easier and the more modern way around this, as compared to floats. The bigger advantage is that you can re-use it all over your HTML DOM much more easily than the approach you're taking.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
I'm trying to set a button's display property as table-cell but it doesn't behave like one.
Any help would be appreciated.
jsFiddle Demo (The demo contains a fixed container height, but I need it to work without it).
No fixed sizes Demo.
DOM:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<button class="item"></button>
</div>
CSS:
.container {
border: 5px solid blue;
display: table;
table-layout: fixed;
}
.item {
border: 3px solid red;
display: table-cell;
}
The result:
Edit: I need it to work entirely like a table cell, even without fixed sizes.
Note that some solutions seem to work fine on Chrome but don't work on FF.
How about using a label? That way you get the functionality of the button, but the visibility of the label. Tested in Firefox and Chrome. Updated example for form submission.
No JavaScript is involved with the clickability of the cell region
Works without a fixed height on the container
Works when a different cell has a larger height than the one with the button
Works with multiple button cells
HTML:
<form onsubmit="alert(); return false;">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container">
<div class="item">4</div>
<div class="item">5<br><br><br>Extended cell</div>
<label class="item">Button 1<button type="submit"></button></label>
<label class="item">Button 2<button type="submit"></button></label>
</div>
</form>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
}
.item button {
background-color: transparent;
position: absolute;
left: -1000px;
height: 1px;
width: 1px;
overflow: hidden;
}
JSFiddle here.
http://jsfiddle.net/Rhhh7/7/
In this example I've wrapped the button in the div class="item" just like the other div's. But this time, I've styled the button separately to stretch to the height and width of the div.
.item button{
background:transparent;
padding:0;
border:0;
width:100%;
height:100%;
}
EDIT:
Here's the fix http://jsfiddle.net/Rhhh7/10/
To address the Firefox issue.
Add this to the class "item":
.item {
border: 3px solid red;
display: table-cell;
height:100%;
vertical-align:top;
}
In order for the td to have a height of 100%, the parent must have height of 100% as well. The vertical-align:top then sets the button to the top of the div instead of the default, middle.
button.item { width: 100%; height: 50px; }
You could always just wrap the button in a div.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"><button>Button</button></div>
</div>
CSS
button{
width:100%;
height:2.75rem;
}
So I guess at the end of the day, the final solution here is it might not be possible cross-browser without a fixed unit of measurement :(
this seems to work:
HTML
<div class="container">
<div class="item">Some text to make the cell bigger</div>
<div class="item"></div>
<div class="item"><button class="button-item"></button></div>
</div>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
background: transparent;
}
.button-item{
border: 5px;
-moz-border:5px;
height:100%;
width: 100%;
}
Fiddle Demo
How it looks on FF:
Wrapping in a div is a solution but I can't understand why you cannot change the display property for button elements like you can all other elements. For example you can make a link tag act like a div tag.
This prevents doing stuff like changing the display order of buttons:
http://codepen.io/bakers37/pen/emoKvK
In Chrome/Firefox this doesn't work as expected.
HTML
<div class="wrap">
<div class="btn bottom">Back</div>
<div class="btn top">Continue</div>
</div>
<div class="wrap">
<button class="btn bottom">Back</button>
<button class="btn top">Continue</button>
</div>
CSS
.wrap {
display: table;
margin: 20px 0 30px 0;
width: 100%;
}
.btn
{
display: block;
width: 100%;
margin: 5px 20px;
padding: 10px;
position: relative;
background: #ccc;
}
.top {
display: table-caption;
}
I have following html
<div id="parent">
<div id="one">one</div>
<div id="two">two</idv>
</div>
<div id="other">some</div>
And this is the css
#one, #two{
display: table-cell;
vertical-align: middle;
height: 47px;
background: red;
}
#parent
{
display:table;
border-collapse: separate;
border-spacing: 10px 0;
}
#other{
background: blue;
height: 200px;
}
As described in the question the clear both is not working but behaving like before div as if table-cell. The solution for this is to remove display: table;. But I would like to know is there any idea without removing display: table; and display: table-cell; from #one,#two divs.
demo
It's a typo.. You should've seen the red syntax on the js fiddle
<div id="parent">
<div id="one">one</div>
<div id="two">two</div>
</div>
Demo
This here
<div id="two">two</idv>
Should be
<div id="two">two</div>
Note: You've not used clear: both; in your demo, and you don't even
require it, as you are not floating the elements, display: table; just changes the
display of the elements rendered, yes it does make them inline because of table-cell
doesn't mean they need to be cleared. You need to use clear property only when you've
floating elements.
For more info on clear: both;
This is my HTML
<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>
How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.
My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:
div {
float: left;
width: 200px;
height: 100px;
border: 1px solid #000;
display: block;
clear: left; }
div.5 {
float: none;
clear: none;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/mvwSL/
You have a few options:
Float and negative margins:
.five{float:right; margin-top:-500px;}
Demo
Or margins only
.five{margin:-500px 0 0 200px;}
Demo
Or relative positioning:
.five{position:relative; top:-500px; left:200px;}
Demo
Or absolute positioning:
.five{position:absolute; top:0; right:0;}
(Make sure the container is set to position:relative;)
Demo
First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:
CSS :
div {float:left;clear:left}
div.c5 {float:right}
jQuery
$("div.c5").insertBefore("div.c1")
See this fiddle
#Wex
div:last-child{
float: none;
clear: none;
display: inline-block;
}
Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.
#outer {
width: 500px;
margin: 300px 0 0 10px;
}
.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
<html>
<body>
<div id="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
</div>
</body>
</html>
I have an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.
CSS
#container
{
width: 400px;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 180px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
HTML
<div id="container">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div>
This can be viewed at Demo1
But what I want is like this result. The only thing is that the height of the individual items can be different.
Hope I have made everything clear.
Thanks in advance
Additional clarification
The content elements will be generated dynamically in server and will be passed to the client.
Also the order should be like 1,2,3,4,...
The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.
You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....