I have parent block (graphic) and children (from 10 to around 40). I use display:block for childs and parent, but blocks goes out parent div. Float:left isn't solution.
Blocks order in parent:
Float left
1 2
3 4
5 6
6 7
But i need:
1 6
2 7
3 8
4 9
5 10
Screnshots:
Without float:left
Float:left
So, i need: if children goes out parent, this child and follow goes to new line.
can you please add this code in your LESS file
LESS
div.gen
{
.title
{
*
{
display: inline-block;
padding-left:10px;
margin-left: 10px;
font-size:36px;
vertical-align:top;
}
span
{
margin-left:-10px;
margin-right:10px;
}
select
{
vertical-align:middle;
margin-top:5px;
font-size:24px;
}
}
}
div.graphic
{
margin-top:25px;
margin-left:20px;
height: 300px;
width: 950px;
background-color:rgba(55,55,55,.5);
display: block;
.block_gr
{
width:50%;
height:32px;
margin-top:10px;
float:left;
}
.punkt
{
font-size:24px;
position:relative;
float:left;
}
.times
{
margin-right:30px;
border:1px solid black;
height: 30px;
width: 205px;
position:relative;
float:right;
.time
{
overflow:hidden;
word-wrap:normal;
border: 1px solid black;
width: 50px;
overflow:hidden;
height: 28px;
text-align: center;
display: inline-block;
position:relative;
line-height: 28px;
margin-right:-5px;
}
}
}
I solved the problem with flexbox
div.graphic
{
margin-top:25px;
margin-left:20px;
height: 300px;
width: 950px;
background-color:rgba(55,55,55,.5);
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
Related
I can't figure out how a div can take the whole height of a container.
In the following exampe I'd like the "photo" div to take the full height, so that the yellow and green content are on the right of the photo.
Here is the code:
#header {
background-color:#7b88d2;
text-align:center;
height: 20px;
}
#container {
max-width:800px;
border-style: solid;
border-width: 1px;
}
#main {
width: 100%;
height: 100%;
}
#photo {
float:left;
background-color:#FF3366;
padding: 10px;
}
#logo {
float:right;
background-color:#FF3366;
padding-right: 10px;
height: 100%;
}
#footer {
background-color:#669933;
text-align:center;
height: 20px;
}
#col1 {
float: left;
padding-left: 10px;
}
#col2 {
margin-left:auto;
margin: 0 auto;
}
#txt_container {
padding-left: 10px;
background-color:#ffffcc;
}
#col3 {
display: inline;
float: right;
padding-right: 10px;
}
I can't declare the height in pixels because the height of the photo in unknow.
Demo here: https://jsfiddle.net/wsfnqvyn/
Thanks for your help.
Sounds like it's senseless. An image can be smaller or higher than your div (I don't know if it is relevant or not to what you are trying to explain). Try to use css background method instead.
e.g. Define the properties of your .photo class and then insert the code below to your html.
<div class="photo" style="background-image: url(image.jpg)"></div>
In this case, your .photo class should include this one line at least.
.photo {
background-size: cover;
}
Remember this method can restrict some CSS interactivity in rare cases.
I updated your jsfiddle : See the updated one: https://jsfiddle.net/wsfnqvyn/6/
I use display:table and table-cell to achieve this.
#header {
background-color:#7b88d2;
text-align:center;
height: 20px;
}
#container {
max-width:800px;
border-style: solid;
border-width: 1px;
}
#main {
width: 100%;
height: 100%;
display:table
}
#photo {
display:table-cell;
background-color:#FF3366;
padding: 10px;
}
#logo {
display:table-cell;
background-color:#FF3366;
padding-right: 10px;
}
#footer {
background-color:#669933;
text-align:center;
height: 20px;
}
#col1 {
float: left;
padding-left: 10px;
}
#col2 {
margin-left:auto;
margin: 0 auto;
}
#txt_container {
display:table-cell;
padding-left: 10px;
background-color:#ffffcc;
}
#col3 {
display: inline;
float: right;
padding-right: 10px;
}
I'm using display:flex ,
I'm working with a ul list of elements. Don't know Why i get 2 different Result :
Problem issue with chrome :
Browsers_Pic
This is what I'm trying to do:
http://jsfiddle.net/0fbdgfcq/26/
ul {
max-width:800px;
display: flex;
flex-direction: row-reverse;
background-color: blue;
height: 100px;
max-width: 500px;
min-width: 100px;
padding:0;
}
.box{
/* Clean */
}
.g p{
white-space:nowrap;
text-align:center;
color:white;
text-decoration:none;
font-size:3vw;
}
.g li {
flex: 1 0;
width: 15%;
height: auto;
color:white;
font-size:3vw;
list-style-type: none;
word-wrap: break-word;
}
.g img {
width: 100%;
height: 100%;
max-width:100px;
max-height:100px;
}
Off-hand I'd say the problem is the width:15% you have applied which is overriding the flexing of the list items.
Try
.g li {
flex: 1 0 15%;
}
JSfiddle
Try adding the following:
ul {
Position: relative;
}
.g p {
Position: relative
}
This is to prevent your paragraph from overflowing.
That might fix the issue.
If not try adding it to your li as well.
I want divs to go from left to right but also to be evenly distributed in the content of the page with width: 100%;
Can this be done in CSS without using any JS or Display:Flex which actually allows you to do it with flex-direction .... but its not compatible with IE8 and IE9!
#container {
width: 100%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#container:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
div {
width: 27%;
display: inline-block;
zoom: 1;
position: relative;
background-color:lightblue;
text-align:center;
color:red;
height:100px;
border:1px solid black;
margin: 10px;
}
p {
maring:0;
padding:0;
line-height:80px
}
<div id="container">
<div><p>A</p></div>
<div><p>B</p></div>
<div><p>C</p></div>
<div><p>D</p></div>
<div><p>E</p></div>
<div><p>F</p></div>
<div><p>G</p></div>
<div><p>H</p></div>
</div>
Here is my code.
So basically ... The first div to be always on the left, the 3rd to be always on the right and the one in the middle. But everytime you add a new div it should be added from left to right. Not left > right > middle.
Already have the correct answer from #Sofiene DJEBALI.
Add float:left; to your div in your css :
div {
width: 30%;
display: inline-block;
zoom: 1;
position: relative;
background-color:lightblue;
text-align:center;
color:red;
height:100px;
border:1px solid black;
margin: 10px;
float:left;
}
https://jsfiddle.net/bvgn46hu/28/
I have this CSS Code:
html,body {
font-family:Arial;
font-weight:bold;
}
.container {
text-align:center;
}
.box {
width:475px;
display: inline-block;
margin:10px 20px 0 auto;
padding:12px;
border:1px solid black;
min-height:60px;
text-align: center;
float: left;
height: 200px;
}
.box h2 {
font-size:44px;
margin-top:4px;
margin-bottom:0;
}
.box p {
font-size:60px;
border:1px solid black;
margin-bottom:0;
}
but the divs with the two lines of text in make the values/numbers display lower than all the other divs with only one line of text.
how can i make all the values/numbers display in the same place inside the the .box divs?
Here is a fiddle with the full code: http://jsfiddle.net/8kex9/
With your code, you could do something like this: JS Fiddle
Giving them both absolute positions, will cause them to be positioned based on parent, rather than the sibling. You just can't add too many lines of text, or else it will run into each other.
.box h2 {
font-size:44px;
margin-top:4px;
margin-bottom:0;
position: absolute;
width: 465px;
}
.box p {
position: absolute;
font-size:60px;
border:1px solid black;
margin-top: 120px;
width: 465px;
}
I'm trying to make 2 divs appear on separate lines within an outside div. Right now I have display:inline-block set for both of them, but I'm not sure how to change this to make them appear on separate lines.
Here is what my code looks right now, I would like John Doe and 100 to appear on separate lines within the leader div:
http://jsfiddle.net/ZnuPR/
HTML
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="name">John Doe</div>
<div class="score">100</div>
</li>
</ul>
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: inline-block;
}
.score {
display: inline-block;
}
You could simply float .ranking and then leave .name and .score as display: block.
http://jsfiddle.net/ZnuPR/7/
.ranking {
/* ... */
float: left;
}
The fastest solution is to set the ranking to "float:left;" and the name and score to "display:block;". Block level elements span 100% by default which will make sure the 2 elements are on seperate lines.
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
float:left;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: block;
}
.score {
display: block;
}
http://jsfiddle.net/ZnuPR/2/
I think this is what you mean:
http://jsfiddle.net/ZnuPR/6/
Don't use inline-block and remove the height from the container, it will automatically adjust to the height it needs to be.
http://jsfiddle.net/ZnuPR/8/
Added a .details wrapper and some floats.
.ranking {
float:left; /* Floating */
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.details {
float:left; /* floating */
}
.name {
display: block; /* Changed to block */
}
.score {
display: inline-block;
}
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="details">
<div class="name">John Doe</div>
<div class="score">100</div>
</div><!-- end details wrapper-->
</li>
</ul>
I think this could be useful:
http://jsfiddle.net/ZnuPR/10/
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
width: 100%;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
width: 100%;
}
.score {
width: 100%;
}
This is what I did:
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
I got rid of display: inline-block and height