I have 10 sets of DIVs nested in a parent DIV:
<div id="bar_block">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
<div class="bar bar9"></div>
<div class="bar bar10"></div>
</div>
I've used this CSS so far:
#bar_block {
width:350px;
height:75px;
}
.bar {
border:1px solid #000;
width:8%;
float:left;
margin-right:5px;
}
.bar1 {
height:10%;
}
.bar2 {
height:20%;
}
.bar3 {
height:30%;
}
.bar4 {
height:40%;
}
.bar5 {
height:50%;
}
.bar6 {
height:60%;
}
.bar7 {
height:70%;
}
.bar8 {
height:80%;
}
.bar9 {
height:90%;
}
.bar10 {
height:100%;
margin:0;
}
I wanted all of the bars to float left bottom. Absolute position didn't work for me since all of the bars will cramped together. Any ideas?
Try changing the CSS for the container and divs to:
#bar_block {
width:360px;
height:75px;
position:relative;
}
.bar {
border:1px solid #000;
width:24px;
bottom:0;
display:inline-block;
margin-right:2px;
}
The inline-block combined with the bottom and pixel width should do it.
jsFiddle example.
Related
I have two rows like this
<div class="container me">
<div class="message">
</div>
<div class="time">
</div>
</div>
<br />
<div class="container he">
<div class="message">
</div>
<div class="time">
</div>
</div>
with css like this
* {
padding:0;
margin:0;
}
.container {
width:500px;
height:50px;
outline:1px solid green;
}
.message {
width:250px;
height:50px;
border:1px solid red;
display:inline-block;
border-radius:5px;
position: relative;
}
.time {
width:50px;
height:50px;
background:orange;
}
.container.me .time {
float:right;
}
.container.he .time {
float:left;
}
and i am trying to make message block full possible width (100% minus time block), is it possible?
jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/
You can set width for .message to width: calc(100% - 52px); - this 52px is a width of your .time div (50px) + 2px for borders of .message (left and right)
Edit: For IE8 support you cannot use that, so you can try the tricky thing like this: https://jsfiddle.net/L2pqhnsq/
3 Column with float left, each with 33.33% width. And I added padding to make the column looks more neat. But apparently the last DIV is pushed to new line. Any solution for this one? Here also I come out with reproduction for reference.
* {
padding:0;
margin:0;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
Use box-sizing: border-box, which forces the provided size to be the full size, including any order and spacing such as your padding.
* {
padding:0;
margin:0;
box-sizing: border-box;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
Padding unfortunately doesn't count by default in sizing, so the width + padding makes each actually wider than a third. box-sizing: border-box is a wonderful tool to combat this, making all padding & borders part of the width measurement:
* {
padding:0;
margin:0;
box-sizing: border-box;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
this is because of the padding. try putting box-sizing: border-box;, this will keep the container's width when a padding is declared.
* {
padding:0;
margin:0;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px;
box-sizing: border-box;
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
You want 3 * (padding-right + padding-left + width) to equal 100%.
Try
.col {
float:left;
width:31.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:1%;
}
Using CSS, I want to horizontally center two "boxes" I have within a div. The boxes are absolutely positioned.
Here is the JSFiddle: http://jsfiddle.net/p4sA3/8/
How would I achieve this without using specific widths?
HTML:
<button id="change">Change</button>
<div id="total-wrap">
<div id="hello-wrap" class="bunch">
<div id="box">
<p> Hello, this is text1 </p>
</div>
<div id="box">
<p> Hello, this is text2 </p>
</div>
</div>
<div id="goodbye-wrap" class="bunch">
<div id="box">
<p> Goodbye, this is text1 </p>
</div>
<div id="box">
<p> Goodbye, this is text2 </p>
</div>
</div>
</div>
CSS:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
position:relative;
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
}
.bunch {
position: absolute;
text-align:center;
}
I would do it with left:0; and right:0 as they are absolutely positioned.
DEMO http://jsfiddle.net/kevinPHPkevin/p4sA3/19/
.bunch {
position: absolute;
text-align:center;
left:0;
right:0;
}
Solution:
#total-wrap {
border:1px solid #000;
height:500px;
}
#box {
display:inline-block;
width:300px;
height:100px;
background-color:yellow;
margin:10px;
text-align:center;
}
.bunch {
text-align:center;
}
<div id="wrap">
<div id="left">Box1</div>
<div id="right">Box2</div>
</div>
#wrap {
background: #e7e7e7;
padding: 40px;
text-align: center;
width: auto;
}
#left, #right {
background: yellow;
display: inline-block;
padding: 20px;
}
Is this what you want?
#box {
position:relative;
display:inline-block;
width:100px;
height:100px;
background-color:yellow;
margin:10px;
}
DEMO: http://jsfiddle.net/p4sA3/11/
The thing is that as long the sum of the widths exceeds the container, the second div will be positioned beneath the first one
In this other demo I didn't use width: http://jsfiddle.net/p4sA3/13/
If you want to use jQuery:
Demo
keepCentered = function() {
$('#hello-wrap').css({'margin-left':($('#total-wrap').width()-$('#hello-wrap').width())/2});
$('#goodbye-wrap').css({'margin-left':($('#total-wrap').width()-$('#goodbye-wrap').width())/2});
}
$(document).ready(keepCentered);
$(window).bind('resize', keepCentered);
I am trying to achieve bar graph for a simple html page using my own css. I am in the initial stage of creating html and css. Below is my html and css.
fiddle: http://jsfiddle.net/ismailvtl/GJUmq/
I want my "bar" to stay on "line" even if I change the height of "bar".
HTML:
<div class="bar-holder">
<div class="bar car"></div>
<div class="bar fat"></div>
<div class="bar iron"></div>
</div>
<div class="line"></div>
CSS:
.bar-holder
{
height:auto;
width:100%;
float:left;
}
.line {
width:100%;
height:3px;
background:#000;
float:left;
position:relative;
}
.bar {
height:350px;
width:40px;
float:left;
margin-left:20px;
border:1px solid #dedede;
bottom:0;
}
.car {
background:blue;
height:240px;
}
.fat {
background:red;
height:300px;
}
.iron {
background:black;
height:330px
}
http://codepen.io/anon/pen/kiwqE
All your bars need to be absolute and have a bottom 0
I have a minor issue here. I'd like to center the red div and have the two green divs float to the right. The two right divs appear to drop down?
http://jsbin.com/ewihuh/1/edit
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0px auto;
}
.right1, .right2 {
color:white;
float:right;
width:100px;
background:green;
}
Live Demo
Hi now change to your html code and some change to css
Css
.headertop {
width:100%;
background:black;
text-align:center;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin:0 auto;
}
.right1, .right2{
color:white;
float:right;
width:100px;
background:green;
}
HTML
<div class="headertop">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
<div class="centerblock">Centered</div>
</div>
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="rights">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
text-align:center;
position:relative;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0 auto;
}
.rights {
position:absolute;
right:0;
top:0;
width:100px;
}
.right1, .right2 {
color:white;
width:50px;
background:green;
float:left;
}
DEMO: http://jsbin.com/ewihuh/7/edit