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;
}
Related
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;
}
I am using this CSS for a really simple image gallery:
.product_container {
width:100%;
display:block;
}
.product_images {
width:45%;
display:inline-block;
border:1px solid black;
}
.product_images .large {
}
.product_images .small img {
display:inline;
float:left;
margin:5px;
width:151px;
}
i want to have a large image and then rows of 3 under that image, i created an example in a fiddle here
https://jsfiddle.net/jdd9hzqo/
when the page is resized, the small images are moving but i want them to stay in rows of 3 and resize themselves but keeping to the same size as the .product_container
Fiddle:https://jsfiddle.net/jdd9hzqo/2/
Changes to be made:
.product_images {
width:100%;
display:inline-block;
border:1px solid black;
}
.product_images .large img {
width:100%;
}
.product_images .small img {
display: inline;
float: left;
width: 33%;
box-sizing: border-box;
}
https://jsfiddle.net/jdd9hzqo/1/
Remove float:left; in .product_images .small img {
And add:
.small {
white-space: nowrap;
}
For the resize add something like width: 30%; in .product_images .small img {
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 a post header div with height of 70px/4.375em
In it is a category h2 and a p timestamp
I want it to be aligned as demonstrated in this picture
(made in Photoshop)
Here is my HTML:
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
And my CSS:
.post-header{
height:4.375em;
width:25em;
margin-bottom:0;
float:left;
}
.category{
color:white;
display:inline;
float:left;
margin:0.625em;
}
.timestamp{
color:white;
display:inline;
float:right;
margin:0.625em;
}
Please help me with the CSS to get the design that I want
You can change your CSS as follows:
.post-header {
height:4.375em;
width:25em;
margin-bottom:0;
display:block;
}
.category {
color:white;
display:inline-block;
width:45%;
margin:0.625em;
}
.timestamp {
color:white;
display:inline-block;
text-align:right;
margin:0.625em;
width:40%;
}
This way, you get better control over your layout since you can specify both the width and the vertical align of the element. As we're at it, I'd use percentages for margins, but of course it goes on you
Visit fiddle to see it in action
You could try the following. Instead of floats, use inline-blocks with text-align: justify.
This only works if there at least two lines of text, so generate an extra blank line with the pseudo-element .post-header:after.
.post-header {
height: 4.375em;
width: 25em;
margin-bottom: 0;
float: left;
text-align: justify;
}
.category {
color: white;
margin: 0.625em;
display: inline-block;
}
.timestamp {
color: white;
margin: 0.625em;
display: inline-block;
text-align: right;
}
.post-header:after {
content: "";
display: inline-block;
width: 100%;
}
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
EDIT: figured it out - see the answer below for solution.
Background: I have two elements, an h1 and a span. I'm trying to place the h1 "Title" element on the left of the container element and the span "category" element on the right of the container, which I've done with float: left and :right.
Problem: I'd like a dotted line to appear between the h1 and span elements. If possible, I'd like to use a pseudo-element for this since it's purely aesthetic, so I'm trying to get the h1:after pseduo-element to fill the remaining width of the container element between the h1 and span.
I'm trying to keep my HTML as close to the following as possible:
<header>
<h1>Title</h1>
<span class="category">Category</span>
</header>
My CSS so far - the :after pseudo-element is currently positioned beneath the h1 element, as opposed to between the h1 and span:
header {
display: block;
background: cyan;
width: 80%;
margin: 0 auto;
}
h1 {
display: block;
float: left;
}
h1:after {
display: block;
float: left;
width: 100%;
border-bottom: 1px dotted black;
content: " ";
}
span {
display: block;
float: right;
background: green;
}
use this code:
jsFiddle
HTML
<div class="container">
<span>title</span>
<span class="category">category</span>
</div>
CSS
div{
width:100%;
position:relative;
height:50px;
border:1px solid;
}
span{
line-height:50px;
background:#fff;
padding:0 10px;
float:left;
position:relative;
z-index:1;
}
span.category{
float:right;
}
.container:after{
content:"";
position:absolute;
width:100%;
height:0;
border-bottom:1px dotted #4c5660;
top:50%;
left:0;
}
OK after more research, I discovered that what I'm looking for is called a dot leader. While the W3C Working Draft has a section on them here, they don't seem to be well-implemented yet. I found another approach on SO here. Using that answer, I revised my code as follows:
HTML:
<header>
<h1>Title</h1>
<span>Category</span>
</header>
CSS:
header {
overflow: hidden;
}
h1 {
float: left;
padding: 0 .4em 0 0;
margin: 0;
}
span {
float: right;
padding: 0 0 0 .4em;
margin: 0;
}
/* Dot Leader */
header:after {
content: "";
display: block;
overflow: hidden;
height: 1em;
border-bottom: 1px dotted;
}
Here's a JSFiddle with the result: http://jsfiddle.net/dx48R/