I have two links: shopper and store. Both of these links are in there own separate left and right floats. The Store link is supposed to be in a right float, but it snaps out of its div when adding a border style to the left float. How do I get it back into place? Please have a look at http://jsfiddle.net/JuCKU/ for an example.
I completely forgot to update jfiddle with the new code. http://jsfiddle.net/JuCKU/3/
firefox is having the alignment issue while google chrome seems to render the layout correctly.
Drop the width from 50% to 49%. Since you have a border, it takes up space and by giving each div a width of 50%, the total is a bit too wide and the second div pop down a bit. Or get rid of the border.
jsFiddle Example
Change
#shopper, #store
{
width: 50%;
text-align: center;
}
To:
#shopper, #store
{
width: 49%;
text-align: center;
}
It's a rounding issue. It's not a rounding issue, 50% + 50% + 1px border is more than 100%. Making the width slightly less than 50% is a quick fix.
Change this:
#shopper, #store
{
width: 50%;
text-align: center;
}
for this:
#shopper, #store
{
width: 49.9999%;
text-align: center;
}
http://jsfiddle.net/JuCKU/4/
simple give margin-right:-1px in your shopper div
#shopper
{
float: left;
border-right: 1px solid #ccc;
margin-right:-1px;
}
Check this http://jsfiddle.net/JuCKU/6/
OR
you can use css3 box-sizing property for this but it's work till IE8 & above.
Check this http://jsfiddle.net/JuCKU/7/
Adding the border increases the overall size of the boxes to 50%+1px, so together their combined width is greater than 100% and something's gotta give.
You can use the CSS3 property box-sizing:border-box to incorporate the border into the total 50% width, or more specifically -moz-box-sizing in Firefox, -webkit-box-sizing in Chrome/Safari and simply box-sizing in Opera. Unfortunately IE doesn't yet support this.
So add this to your code.
#shopper, #store {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
More info - http://www.css3.info/preview/box-sizing/
As mentioned by others the bulletproof solution across all browsers is to reduce the width of your boxes to fractionally less than 50%.
Give the divs some widths
see http://jsfiddle.net/JuCKU/1/
Related
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I have a problem and I guess there is a common solution but i didn't know how to search for it properly.
I want 2 div floating next to each other, both take 50% each of the width. Now I want to give each of them some padding. What happens is, that they wrap around, instead of being displayed next to each other, because they are bigger then 50% now. What's the hack here?
some code:
#nw_main_line1_l {
height: 512px;
width: 50%;
float: left;
padding-right: 11px;
background-color: red;
}
#nw_main_line1_r {
height: 512px;
width: 50%;
float: left;
padding-left: 11px;
background-color: green;
}
What happens here is that the green one is below the red one. If i delete the paddings, everything is fine and they float like excepted.
kind regards :)
This is due to the padding. You can either reduce the width or use the modern way with:
* { box-sizing: border-box; }
More info on box-sizing here.
You basically found the answer of the problem yourself, but did not explicitly name it.
Removing the padding fixes the issue. And if you would exchange the padding for a border (or use both) you will notice that the boxes are broken again.
This is due to the fact that at least in Firefox' box model the resulting box width (e.g. of a div) will be
2 * [Border-Width] + 2 * [Padding-Width] + width
Maybe you can use CSS3 flexible boxes to conveniently circumvent your issue.
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
I have a square div of fixed size and wish to place an arbitrary size image inside so that it is centred both horizontally and vertically, using CSS. Horizontally is easy:
.container { text-align: center }
For the vertical, the common solution is:
.container {
height: 50px;
line-height: 50px;
}
img {
vertical-align: middle;
}
But this is not perfect, depending on the font size, the image will be around 2-4px too far down.
To my understanding, this is because the "middle" used for vertical-align is not really the middle, but a particular position on the font that is close to the middle. A (slightly hacky) workaround would be:
container {
font-size: 0;
}
and this works in Chrome and IE7, but not IE8. We are hoping to make all font lines the same point, in the middle, but it seems to be hit-and-miss depending on the browser and, probably, the font used.
The only solution I can think of is to hack the line-height, making it slightly shorter, to make the image appear in the right location, but it seems extremely fragile. Is there a better solution?
See a demo of all three solutions here:
http://jsfiddle.net/usvrj/3/
Those without IE8 may find this screenshot useful:
If css3 is an option, then flexbox does a good job at vertical and horizontal aligning:
UPDATED FIDDLE
.container {
display:flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}
How about using your image as a background? This way you could center it consistently everywhere. Something along these lines:
margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
This is REALLY hacky, but it is what we used to do in the ie6 days.
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px; // half of whatever the image's height is, assuming 24px
margin-left: -12px; // half of whatever the image's width is, assuming 24px
}
I may be missing something in this example, but you get the idea.
Have you tried the following:
img {
display: block;
line-height: 0;
}
I usually use this hack, but I haven't really checked it that thoroughly in IE8.
Here is a small JS Fiddle I have made: http://jsfiddle.net/rachit5/Ge4YH/
I believe it matches your requirement.
HTML:
<div>
<img src=""/>
</div>
CSS:
div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
Everything is wrapped in a div with an id="main_wrap"
the main wrap has this style:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.
For example:
html, body { margin: 0; padding: 0; }
div {
background: #111;
color: #eee;
padding: 1em; /* This doesn't add to width - still at 100% width */
border: 2px solid #5e5; /* This also doesn't add to width - still at 100% width */
}
<div>Test</div>
Try add overflow hidden:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden . overflow:hidden will hide the scroll bar if user zooms in the page.
Working 100%
if you are using bootstrap it takes
margin-left & right 15px (or) -15px
you need to change 15px to 0px
Example
.main_wrap .row{
margin-left:0px;
margin-right:0px;
}
If you change width to 100% it helped you, but if you don't want, just try add external <div style="width:100%"></div> like this:
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>