This question already has answers here:
Pure css Chessboard with div & no classes or ids, is it possible?
(15 answers)
Closed 4 years ago.
I have multiple elements displaying floated left to create rows of 4 elements. I have made them alternate background colour:
div > div { float:left; width:25%; height:50px; background-color:black; }
div > div:nth-child(2n) { background-color:white; }
<div>
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</div>
However, what I really need is to alternate between black-white-black-white and white-black-white-black to create a chess board effect. I don't want to alter the HTML if possible. So what I really need is way of alternating an alternate every 4 elements.
Simply move your selector to one before 2n -> 2n-1
.board {
width: 90px;
}
.board div {
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid #ddd;
}
div > div { float:left; width:25%; background-color:black; }
div > div:nth-child(2n-1) { background-color:white; }
<div class="board">
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</div>
Related
This question already has answers here:
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 6 months ago.
I need the 3rd out of 4 children of a div to take up the remaining space. Here is some sample code im working with https://jsfiddle.net/68s5q34v/
<div class="container">
<div class="menu">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="remaining">
remaining
</div>
<div class="three">
three
</div>
</div>
</div>
.container{
width:100%;
background-color:tomato;
padding:4px 0;
}
.menu{
background-color:orange;
width:300px
}
.one,.two,.three{
background-color:dodgerblue;
}
.remaining{
background-color:green;
}
.menu,.one,.two,.three,.remaining{
padding:5px;
}
div{
display:inline-block;
border:1px solid black;
}
the width of [one][two][remaining][three] are unknown.
[one],[two],[three] should only take up as much space as they need for their inner text.
[remaining] should take up what remains, pushing [three] to the end, essentially not showing any orange.
note:
There are similar questions, but! i cant find one that matches my question with the detail that my child elements does not have a set width.
Go for display: flex approach;
Apply display: flex for .menu and flex: 1; for .remaining
.container{
width:100%;
background-color:tomato;
padding:4px 0;
}
.menu{
background-color:orange;
width:300px;
display: flex;
}
.one,.two,.three{
background-color:dodgerblue;
}
.remaining{
background-color:green;
flex: 1;
}
.menu,.one,.two,.three,.remaining{
padding:5px;
}
div{
display:inline-block;
border:1px solid black;
}
<div class="container">
<div class="menu">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="remaining">
remaining
</div>
<div class="three">
three
</div>
</div>
</div>
<p>
the width of [one][two][remaining][three] are unknown.
<br/><br/>
[one],[two],[three] should only take up as much space as they need for their inner text.
<br/><br/>
[remaining] should take up what remains, pushing [three] to the end, essentially not showing any orange.
</p>
I have a list of product divs containing two more divs each displayed vertically within - top one containing an image and bottom one text. The text is variable in size so the outer divs size also is variable. These outer divs float left and go 3 to a row until a div with long text happens then the next row starts immediately after that column, leaving a gap.
So if I have a row where the 2nd div has 3 lines of text to the other two's 1, the 4th div will start not in the first position on the next line but in the 3rd.
Here is an image demonstrating what I see now vs a second what I would like to do:
And what I'm aiming to do
Do not use float. Take a look at this fiddle:
JSFiddle Demo
CSS:
.block {
width: 33.33%;
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
.inner {
min-height: 100px;
margin-bottom: 10px;
background: #000;
}
You can create a row for the div elements, this will produce the layout you need! I have also provided a CSS only solution where the class clearfix will do the same thing as row class!
CSS3:
.row{
display:flex;
}
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="row">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="clearfix">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="clearfix">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
HTML
<div class="flex-container">
<div class="box">img</div>
<div class="box">img</div>
<div class="box">img</div>
</div>
<div class="flex-container">
<div class="box">txt</div>
<div class="box">txt</div>
<div class="box">txt</div>
</div>
CSS
.flex-container{
background:red;
display:flex;
width:100%;
height:auto;
margin:0% auto;
padding:1% 0;
}
.box{
min-width:100px;
height:auto;
padding:1%;
margin:0 1%;
flex-grow:1;
background:green;
}
Also, Please chech whether you have cleared all floats
Please see Using CSS Flexible Boxes MDNweb docs
I'm a newbie with html so please be patient.
I'm trying to align 4 divs in parallel where the first,third and fourth div are static,the second div is empty and i need it to occupy the remain place e.g "width:auto".
I don't want to use table to solve the problem.
Is there a way to solve it using divs?
HTML:
<div class="container">
<div class="content" >
first
</div>
<div class="empty">
</div>
<div class="content">
third
</div>
<div class="content">
fourth
</div>
</div>
CSS:
.container{
strong textwidth:1020px;
height:40px;
}
.content{
position:relative;
background-color:#2cc2e7;
height:40px;
width:142px;
float:right;
margin-right:5px;
}
.empty{
background-color:#f1d486;
height:40px;
width:auto;
margin-right:5px;
}
You will need to change the order of the elements:
<div class="container">
<div class="first content">first</div>
<div class="content">third</div>
<div class="content">fourth</div>
<div class="empty"></div>
</div>
And then just float the first one to the left, other two to the right, and the .empty one, don't float it but set an overflow to auto —or hidden.
.content {
float: right;
width: 142px;
}
.first {
float: left;
}
.empty {
overflow: auto;
}
http://jsfiddle.net/GTbnz/
If you are prepared to add below the empty div then you could use the following:
<div class="empty">
</div>
with a style sheet of:
.container {
width:1020px;
height:40px;
display:table;
width:100%;
}
.container div {
height:40px;
display:table-cell;
}
.content {
background-color:#2cc2e7;
width:142px;
max-width:142px;
}
.empty {
background-color:#f1d486;
}
This was whichever of the 4 div's has a class 'empty' will auto-expand to fill the available space and the other div sizes will all be 142 px.
this problem has been bothering me for some time. So I have created some visual descriptions of my problem
First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here
EDIT// Sorry heres my HTML and CSS
<style>
.left { float:left; }
.right { float:right; }
</style>
<div id="container">
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
</div>
NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch
/EDIT
My floats result in this
This is what I want
Float one left , one right, and give first the clear:both property
<div class="left clear"></div>
<div class="right"></div>
<div class="left clear"></div>
<div class="right"></div>
css
.left {float:left}
.right {float:right}
.clear {clear:both}
Example
You can use CSS3 column-count property for this. Write like this:
.parent{
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 2;
column-gap: 50%;
}
.parent div{
width:50px;
height:50px;
margin:10px;
}
.left{
background:red;
}
.right{
background:green;
}
Check this http://jsfiddle.net/UaFFP/6/
Add the first left div, then the first right div and after them add <br style="clear:both"> and repeat the procedure.
Edit: Here's an updated answer:
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
Suppose you have another div in the middle of them. Then use this chronological order:
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
Or if you don't, just add another div that provide a style clear:both to it.
<style type="text/css">
.parent {width:50px; border:1px solid red;}
.left {float:left; }
.right{float:right;}
.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}
</style>
<body>
<div class="left parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="right parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
Mind it would be odd not to have a central DIV, if that is a case float the parent DIVs left, at say widths of 20% 60% 20%.
column-count is already widely supported - http://caniuse.com/#feat=multicolumn
So if old browsers doesn't bother you consider using it.
Try this:
.leftcolums {
float: left;
}
.rightcolums {
float: right;
}
.clear {
clear: both;
}
<div class="leftcolums">
<div class="left">1</div>
<div class="left">2</div>
<div class="left">3</div>
</div>
<div class="rightcolums">
<div class="right">4</div>
<div class="right">5</div>
<div class="right">6</div>
</div>
<div class="clear">7</div>
Using the :nth-child selector and clearing after 2 divs:
div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(2n) {
background-color: green;
float: right;
}
Live example
Otherwise use this fairly hacky method, which requires no additional markup:
div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(n) {
clear: both;
}
div:nth-child(2n) {
background-color: green;
float: right;
margin-top: -50px; //match this to the div height
}
Live example
I have two divs side by side. I want div that is on left hand side to take up as much room as it needs without pushing the other div (on right) to next line.
Here is what I have right now: http://jsfiddle.net/RALza/
HTML
<div id="container">
<div id="divA"> left text </div>
<div id="divB"> right text </div>
</div>
CSS
#divA
{
float:left;
border:1px solid blue;
width:100%;
}
#divB
{
float:right;
border:1px solid red;
}
<div id="container">
<div id="divB"> right text </div>
<div id="divA"> left text </div>
</div>
#divA
{
overflow:auto;
border:1px solid blue;
}
#divB
{
float:right;
border:1px solid red;
}
will work.
But you should specify width of floating elements.
You can use CSS flexible boxes:
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div id="divA">left text</div>
<div id="divB">right text</div>
</div>
Try this fiddle: http://jsfiddle.net/RALza/6/
It works by changing the order of the two divs and making the first div a normal block element without a float.
<div id="container">
<div id="divB"> right text </div>
<div id="divA"> left text </div>
</div>
and
#divA
{
border:1px solid blue;
}
#divB
{
float:right;
border:1px solid red;
}