For some reason, in the following fiddle the nav is not perfectly centered. It's not by much, maybe 3 mm on my monitor, but it has been bugging me why.
http://jsfiddle.net/RMBs6/
Here's a snippet of what I think might be the problematic code (but check the fiddle out too/first):
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 940px;
text-align: left;
}
.nav {
padding: 0px;
text-align: center;
}
Using display: inline-block will mean that your items aren't 'flush' against each other. So having a background will really show this up. I presume that's why you've used the -4px margin on the <a>.
Option 1 - display: inline-block
If you must use display: inline-block then I'd suggest removing the -4px on the <a> and using margin: 0 -2px on the li. That will bring it in on both sides. You can see this working here (note that I took the liberty of making the border only 1 pixel):
http://jsfiddle.net/RMBs6/6/
Option 2 - float
Using float will make the list items flush next to each other. However, using text-align: center on the container won't make it centered now. You'll need to define a width and use margin: 0 auto.
Option 3 - display: table
This is my favourite option. It's a way of making the list items fit perfectly in the container. You won't need to define a width (px or %) on the list items, or the child items. They behave like cells in a table.
http://jsfiddle.net/RMBs6/7/
To show the initial problem clearer (as I understand it), here's a beautiful picture.
It is centered. But it is centering based on the width you specified for the wrapper. Just changed 940px to 500px and it worked nicely here.
If you really want something that work everytime, you can use %.
Something like this:
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 90%;
text-align: left;
}
Try putting a max-width on your wrapper
.wrapper {
margin: 0 auto;
margin-top: 3em;
max-width: 940px;
text-align: left;
}
Try
.navigation ul
{
list-style: none;
padding: 0;
width: 90%;
margin: 0 auto;
}
and
.wrapper {
margin: 0 auto;
margin-top: 3em;
width: 90%;
text-align: left;
}
well as far as I can see, it's not centered about 4px: the 4px you set as negative margin for every link
margin-right: -4px;
getting rid of it and using another method than display:inline-block (float for example) or just remove any white space and line breaks between the list items will do it.
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).
I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.
Here is my fiddle: http://jsfiddle.net/071ad2hg/1/
I already found the problem and it is from the following code:
.grid_12 { width: 100%; }
When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.
Beacuse body has 8px margin you can change that by adding margin 0 to body css tag
demo http://jsfiddle.net/ckqkyaqd/
body {
font-family: 'elegant_luxmager';
color: #444948;
margin:0;
}
Add this to your body in the css.
margin: 0;
and set a pixel width for your grids.
.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}
I would suggest using a .wrapper instead.
.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
<div class="wrapper"></div>
Found your issue:
It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation.
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
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 have ul where li elements are floating left. I want to align those li elements to center of ul.
Goal:
======>>>
My try:
My try always result this
Jsbin:
http://jsbin.com/EGoVAg/19/edit
EDIT:
width of #wrapper is not fixed ! I use 320px just to show you result pictures !
Firstly, remove the float: left; from .widgetPhotoGallery li.photo. display: inline-block (which is already included) is all you need to correctly position the elements:
.widgetPhotoGallery li.photo{
background-color: blue;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
Then all you need to do is simply give your ul some padding (36px evens out both sides):
.widgetPhotoGallery .photogallery{
background-color: lime;
list-style: none;
padding:0 36px;
margin: 0 auto;
text-align: left;
}
Working JSBin demo.
On a side note, you don't need any of those !important declarations. The styling is identical without them. If you need to override existing styling you should look into CSS Specificity instead.
Your only option is to set a fixed width and do:
#wrapper {
display: block;
margin: 0 auto; /* center it */
width: XXX;
}
You can use media queries to set the fixed width at certain breakpoints, if you like, or you could use max-width instead of width
http://jsbin.com/EGoVAg/23/edit
You may not like this answer (judging by your large font, bolded comment about #wrapper not being a fixed width), but there is no other way to achieve what you want.
You have to set a fixed width to the ul. So in your example, each li has 118px of width and 2px of margin on each side. To fit two li's in a row set this to .widgetPhotoGallery .photogallery:
width: 244px;
Notice that the background will become smaller, so you can simply put it to .widgetPhotoGallery .widgetContent
.widgetPhotoGallery .widgetContent {
background-color: lime;
}
Here's the update JSbin.
I have a container div and 5 child div's with
{display: inline-block}
so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?
Fiddle: http://jsfiddle.net/VHkNx/
Inline block elements still take care of the line-height/font-size. So adding this:
line-height: 0;
to #container will fix it.
Demo
Try before buy
Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.
One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).
jsFiddle Demo
P.S - line-height: 0 will also work.
One simple way of fixing this is to add vertical-align: top to the child elements:
.thing {
vertical-align: top;
display: inline-block;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
This way, you don't need to adjust line heights or font sizes.
As noted earlier, a similar layout can be realized using floats. Both approaches are valid.
See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/
Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.
You can use floating elements instead of inline elements:
#container {
background-color: Green;
width: 500px;
overflow: hidden;
}
.thing {
float: left;
background-color: Red;
height: 20px;
width: 18%;
margin-left: 1.25%;
margin-right: 1.25%;
}
#first {margin-left: 0px;}
#last {margin-right: 0px;}
Demo: http://jsfiddle.net/VHkNx/2/
Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!