I want to make a multi-segment progress bar.
It has to be horizontally centered, with a maximum width, but not a static one, so it can shrink if there is not enough space.
The problem is that sometimes the total progress is at 100%, but the segments could be at 33.33% and 66.66%.
The percentages are being calculated based on the width of the document, which may be an odd number, so the bar segments' widths are rounded in a way that leaves one pixel empty on the bar.
HTML
<div class="CENTER">
<div class="BAR">
<div class="SEGMENT ONE" style="width: 33.33%;"></div>
<div class="SEGMENT TWO" style="width: 66.66%;"></div>
</div>
</div>
CSS
.CENTER {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.BAR {
height: 10px;
}
.SEGMENT {
float: left;
height: 100%;
}
.BAR { background-color: #F00; border: 1px solid #000; }
.SEGMENT.ONE { background-color: #FDA; }
.SEGMENT.TWO { background-color: #ADF; }
Play around with the width of the window after it's big enough for the bar to reach its maximum width.
There will be a red one pixel wide section on the right side of the bar.
How can I avoid it?
Example: http://jsfiddle.net/CV6fp
Can you do it using that same HTML and without JavaScript, CSS?
Maybe with table display?
http://jsfiddle.net/CV6fp/6/
.CENTER {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.BAR {
height: 10px;
display: table;
width: 100%;
}
.SEGMENT {
display: table-cell;
height: 100%;
}
.BAR { background-color: #F00; border: 1px solid #000; }
.SEGMENT.ONE { background-color: #FDA; }
.SEGMENT.TWO { background-color: #ADF; }
Here is how I would do it:
http://jsfiddle.net/CV6fp/3/
Basically, drop the width property off the div with class TWO. Then make the same div NOT float left:
<div class="CENTER">
<div class="BAR">
<div class="SEGMENT ONE" style="width: 33.33%;"></div>
<div class="SEGMENT TWO"> </div>
</div>
</div>
And the style change:
.SEGMENT.TWO { background-color: #ADF; float:none; }
This means that second segment no longer floats:left, but I do think this may be what you are looking for.
Update: And finally after much soul searching, a CSS only solution to solve all the issues mentioned on this page:
http://jsfiddle.net/CV6fp/7/
Two changes to CSS: (1) segments set to float:right, and (2) .SEGEMENT.ONE to override that and always float:left
.SEGMENT {
float: right;
height: 100%;
}
.SEGMENT.ONE { background-color: #FDA; float:left; }
In this case you may need to reduce accuracy to the tenth's place and use a ceiling rounding function on the final segment. This way you would get 33.3% and 66.7%.
Try: .SEGMENT:last-child { float: none; width: auto !important; }. This should make the last segment to fill the remaining space.
Related
I'm currently trying to create a responsive form with an text field and a button next to each other, where the text field takes up the maximum available space and the button just uses what it needs.
This tutorial is what I've used so far to achieve this and its worked perfectly.
My issue is that this isn't really a responsive solution as if you remove the float using a media query to stack the field and button on top of each other, the button stacks on top of the text field instead of the other way around.
Here's a flexbox example I quickly whipped up. This is exactly how I need it to function but in a way that will work on IE8+ please.
Thank you
-
EDIT:
The button is content managed so using calc will not work in this instance & could contain multiple words which cannot break onto two+ lines.
Using percentage widths do not take into account the text inside the button. The button only needs to be the width of the text & padding. With a percentage there will either be excessive spacing on the button or there's a chance that multiple words inside the button will break onto two lines, I really need to keep them on one line which is where the non-responsive solution in my question comes in really handy. Unfortunately I really need it to be responsive. The button will always stay the same width no matter what size the container is, just the textbox that needs to adjust.
Does anyone know a way of achieving this please Preferably >IE8 (so no flexbox unfortunately)
-
What I have so far
https://jsfiddle.net/ncpk6qp9/
.container {
width: 300px;
border: 1px solid;
}
.left {
width: auto;
background: red;
overflow: hidden;
}
.right {
width: auto;
background: blue;
float: right;
}
.textbox {
width: 100%;
}
#media only screen and (max-width: 300px) {
.right {
float: none;
}
}
<div class="container">
<div class="right">
<input type="submit" />
</div>
<div class="left">
<input type="text" class="textbox" />
</div>
</div>
You can use percentage as width and display: inline-block;
Also, make sure you use font-size: 0px on the wrapper to remove inline-block spaces.
.container {
width:600px;
height:200px;
border:2px solid yellow;
font-size: 0px;
}
.left {
width:70%;
height:200px;
background:red;
overflow:hidden;
display: inline-block;
}
.right {
height:200px;
width:30%;
background:blue;
display: inline-block;
}
JSFiddle link
I can not test in old IEs, but I think that setting the div to position: relative when you reset the float should work.
I have changed the media query to work on hover, it's easier to check
.container {
width: 300px;
border: 1px solid;
}
.left {
width: auto;
background: red;
overflow: hidden;
}
.right {
width: auto;
background: blue;
float: right;
}
.textbox {
width: 100%;
}
.container:hover .right {
float: none;
position: relative;
top: 20px;
}
<div class="container">
<div class="right">
<input type="submit" />
</div>
<div class="left">
<input type="text" class="textbox" />
</div>
</div>
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I want to achieve the following effect: http://jsfiddle.net/3KJta/1/
However the solution I have uses a known width for the small div and the larger div. I need this to work with variable sized divs. The use case for this is a tooltip that appears above a smaller flexible sized element. The tooltip content isn't known and so the width could be anything.
So far I have:
<div class="small">
<div class="smaller"></div>
<div class="larger"></div>
</div>
and
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 2px solid black;
}
.small {
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 50px;
text-align: center;
}
.smaller {
width: 20px;
height: 20px;
border-color: red;
display: inline-block;
}
.larger {
width: 200px;
height: 200px;
border-color: blue;
display: inline-block;
margin-left: -75px /* NOTE: in reality, .small has a variable width, and so does .larger, so i can't just take off this fixed margin */
}
If you are ok with using css3 and only support modern browsers you can use transform: translateX(-50%); to center the bigger box (currently supported browsers).
See this example: http://jsfiddle.net/2SQ4S/1/
If you use and extra element you can do it:
<div class="small">
<div class="smaller"></div>
<div class="larger">
<div>I'm extra</div>
</div>
</div>
CSS
.larger {
position:relative;
left:50%;
width:8000%;
margin-left:-4000%;
text-align:center;
border:none;
}
.larger div {
width: 200px;
height: 200px;
border-color: blue;
margin:auto;
}
http://jsfiddle.net/3KJta/4/
although that does cause some issues with content being wider than the page so you would need it all in a container with overflow:hidden:
http://jsfiddle.net/3KJta/7/
All a bit ugly though. Perhaps there's a solution where you can avoid doing this. Maybe a JS solution that measures the size of the content you're trying to show and offsets it.
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.
div alignment one left next two top bottom last one right
it is nt coming like that when I'm doing
see this image
I would like to align the image like that with div tag, unfortunately when i aligned its not coming up like that,
how do i leyout all the images inside one div tag>?
here is my html code
<div class="site_contents">
<div class="header">
<div class="big_logo"></div>
<div class="work_nav"></div>
<div class="testimonial"></div>
<div class="cliants"></div>
<div class="testimonial"></div>
<div class="contact"></div>
</div>
</div
here is my css code
.site_contents {
height:auto;
width: 900px;
background-color: #666;
margin:0 auto;
}
.header {
background-color: #3CF;
height: 262px;
width:100%;
clear:both;
position:relative;
border:2px solid #000;
}
.header div
{
float: left;
}
.big_logo{
background-color: #06C;
height: 262px;
width: 459px;
background: url(images/sitetemplate_header.gif) 0 -21px;
}
.work_nav {
background-color: #F00;
height: 159px;
width: 170px;
}
.testimonial {
background-color: #3F9;
height: 104px;
width: 170px;
}
.cliants {
background-color: #09C;
height: 262px;
width: 171px;
}
.contact {
background-color: #30C;
height: 262px;
width: 101px;
}
could any one help me please
This is almost what you want. http://jsfiddle.net/
You need to be careful about a number of things.
work_nav and testimonial need to be in a separate div which I have included (container2)
The total width needs to be adjusted. I have changed it as well. You can play with it to make it according to what you need.
I have included borders as well to recognize each box. You should remove those borders and the width taken by the borders must be subtracted from the total current width. That means adjust the current width again.