so for some reason there is some white space between my elements (using chrome browser). I tried inspecting it and couldn't solve the issue. Not sure what could be causing it at all. I hosted a demo page here so you can see what I am talking about.
So any idea what would be causing this? I'll provide my CSS below for the elements in question. As you can see the blue element to the left does not have this same issue so I assume it has something to do with the gear elements.
This is the only code I have on it right now:
.gear-item {
position: relative;
height: 320px;
width: 320px;
padding: 80px 25px 0px 55px;
display: inline-block;
clear: none;
}
.gear-item:nth-child(even) {
background: #252627;
}
the whitespace you see is the actual whitespace in the html, inline elements will show whitespace between then, the easiest solution is to float the elements
.gear-item {
position: relative;
height: 320px;
width: 320px;
padding: 80px 25px 0px 55px;
display: block;
float:left;
clear: none;
}
.gear-item:nth-child(even) {
background: #252627;
}
Inline elements are sensitive to the white space in your code. Remove the white space in your code between your divs and the space goes away.
Its caused by using inline-block. Apparently the same problem described here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/. So it's actually the whitespace in your markup!
A quick fix would be using floats instead for gear-item:
display: block;
float: left;
(or some of the other solutions outlined in the link I mentioned)
Related
I am making a search tool, and the search bar was originally a div, and everything was fine, but when I change it to input tags, the margin on the left disappears. Can someone please explain why this might be happening.
Here's my code (with header HTML removed for security reasons): http://jsfiddle.net/k3pv5cmh/
I have tried margin: auto, margin: 0 auto, and margin-left: auto with margin-right: auto. But none of these fix the problem.
On the JS Fiddle you can change the input tags to div tags and see the difference.
An input element is an inline element by default. A div is a block level element. So change your css to this:
#search-bar {
height: 50px;
width: 60%;
max-width: 800px;
background-color: white;
border: 2px solid rgb(230, 230, 230);
border-radius: 15px;
margin-right: auto;
margin-left: auto;
margin-top: 20%;
display:block;
}
Note: display:block;
Just add display: block; to your #search-bar definition. Input is basically line element, that means margin: auto; has no effect.
Inputs by default have style: display: inline-block;
Divs on the other hand, by default have style: display: block
The difference is in how much of container does each style takes.
You can see their differences here
If you want the same behaviour, you just have to put
style="display: block" in your input element and override its default style.
You can also add #container { text-align: center; } if you want to keep input tag inline. In this case you can get rid of left and right margins of input tag and put something next to it (may be button).
While I was coding a website, I happened to stumble upon something peculiar.
Here's my code:
HTML
<div id='a'><div id='b'></div></div>
CSS
html{height:100%}
body
{
margin: 0;
height: 100%;
background: green;
padding: 0 5%;
}
#a
{
height: 100%;
background: blue;
text-align: center;
}
#b
{
display: inline-block;
height: 100%;
background: red;
width: 50%;
}
And a JSFiddle, just in case: http://jsfiddle.net/ud3y1vh2/
The problem is that an unnecessary vertical scrollbar appears, even though none of the elements supposedly overflow. I'm familiar with the regular two-inline-blocks-next-to-eachother problem that causes whitespace to appear between the elements, but this seems to be a bit tougher nut to crack.
What I've thought of:
Removing any and all whitespace in the HTML
overflow:hidden on #a - Works, but can't be used for my website (user has to be able to scroll the content when needed)
font-size:0 on #a - Works, but can't be used, since my website uses ems for sizing #a and other elements. Not a viable solution for me.
Making #b a block-type element, or lowering it's height - Works, but not viable for my website.
So if you can come up with any ideas on how to remove the scrollbar (or rather, remove the cause of the scrollbar), I'd like to hear them.
The scrollbar can be removed by changing the vertical-align property of the inline-block element to a value such as top. The default vertical-align value is baseline, which is why the element is being aligned to the bottom (resulting in a scrollbar)..
Updated Example
#b {
display: inline-block;
vertical-align: top;
height: 100%;
background: red;
width: 50%;
}
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
I am getting 12px white space at the bottom of my pages. Upon inspecting the CSS it's not attributed to any element. According to CSS inspectors the height of both the body and html elements don't include this space...It's got me miffed.
The page is here if you want to take a look: Page
Thanks
Change the content of your .clearfix from a . to \0020 (which is a space). This will do the trick:
.clearfix:after {
clear: both;
content: "\0020"; /* change to this */
display: block;
height: 0;
visibility: hidden;
}
If you change the #footer-wrapper to this it will fix your problem
#footer-wrapper {
background-image: url('../images/green.jpg');
height: auto;
overflow: hidden;
}
I hope this helps.
part of it is related to your .clearfix::after. I added a line-height:0 to that, and most of it went away. I think your line-heights generally across the page are screwing with the layout a bit.
If you don't want to change line-height or something, you can just add padding to your footer like this:
#footer-wrapper {
margin-top: 35px;
padding-bottom: 20px;
}
Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.
Here is a screenshot:
Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":
#container
{
margin: 0 auto;
width: 750px;
background-color: #ffffff;
}
#top-panel
{
padding-left: 10px;
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
}
#left-panel
{
padding-top: 10px;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250px;
}
#right-panel
{
background-color: #ffffff;
float: right;
width: 449px;
}
.clear
{
clear:both;
line-height:0;
}
If anyone wants to see the actual site it is: Math Relay
When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.
it is the padding-left:10px; in the #top-panel
Set that to 0 and you'll see them line up.
Try using FireBug, that's how i found the issue.
The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.
Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:
The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)
The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.
The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.
It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;
Just add 10px to your #container and it will be good.
Remove the width: 100% from #top-panel.