I am working on this site: https://dev.notevenpast.org/brian-levack-possession-and-exorcism/
In this page I am attempting to center an image within a div with an id of monthly-feature-banner. Here are the stylings for the banner and the image:
#monthly-feature-banner {
width: 100%;
}
#monthly-feature-banner img {
display: block;
margin: 0 auto;
}
Oddly, though, in both Chrome and FF the image margins are not equal.
Question: Why is this happening?
Question: What can I do to fix it?
EDIT: The answer below suggesting text-align: center; had the same issue as margin: 0 auto; It should work, but it doesn't. Also, the box-sizing fix helps if I remove it from the entire page, but it has side effects that make it impractical.
A comment below from #Alohi correctly pointed out that adding clear: left; to the containing div along with the margin: 0 auto; has the desired effect. I will accept the first answer that contains that information.
Remove #monthly-feature-banner img and add text-align: center to #monthly-feature-banner
Unless you intend to modify #monthly-feature-banner to something else the width will already be 100%, so width: 100%; or any display:block; styles you have are useless, a div itself is a block.
In short:
#monthly-feature-banner {
text-align: center;
}
Fiddle: http://jsfiddle.net/Gs6rG/
If the image continues to be pushed to the right you could try adding clear: left;, which disallows floating elements on the left.
Try this
#monthly-feature-banner {
width: 100%;
margin: 0 auto;
}
Related
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.
I am trying to center my a .img-link tag within a thumbnail but haven't had any luck.
Here is a link to an example of what I am doing http://jsfiddle.net/Dhk3M/ .
Is this possible?
Give .thumbnail text-align:center. Write like this:
.thumbnail {
text-align: center;
}
Check this http://jsfiddle.net/Dhk3M/1/
to auto center an element, it has to have a fixed width so you can apply margin-left: auto;
and margin-right: auto;
.img-link img {
width: 267px;
margin: 0 auto;
display: block;
}
this is valid if you can actually set the element width in your css, that means you know the element will always have the exact same width. alternatively:
text-align: center;
will work for inline elements (like an img tag)
I'm working on a product catalog page, and the group of images needs to be centered but I have yet to find a way to do so, since they're all floated in a div that's a 100% in width.
I'm looking for a way to center those images horizontally without losing the flexibility of their floating properties.
Here's a link to the catalog on the website: http://internetvolk.de/katalog/
try using display: inline-block; istead of floating and add text-align: center to their parent container)
Augment with the following rules:
#katalog {
text-align: center;
}
and
.imageLink {
/** float: left; <-- REMOVE! */
display: inline-block;
}
if you give #katalog a width - calculate this from the number of images and their margins. e.g.
#katalog{
width: 960px; /*just an example*/
margin: 0 auto;
}
#katalog {
margin: 10px auto 0;
overflow-y: hidden;
max-width: 940px;
min-width: 810px;
}
Use max-height and min-height to keep flexibility, I'm defining a max-width to keep it centered in all screens by adding margin: 0 auto;
Ok, I have the following layout/CSS:
div#wrap {
margin-left: auto;
margin-right: auto;
position: relative;
width: 1400px;
}
div#header {
float: left;
margin: 50px 15px 0 50px;
width: 135px;
}
div#blog {
display: inline;
float: left;
margin: 50px 15px 0 50px;
width: 1080px;
}
div#site {
float: left;
width: 100%;
}
with:
<div id="site">
<div id="wrap">
<div id="header"></div>
<div id="blog"></div>
</div>
</div>
So, site covers window, 'wrap' is fixed width and is centered and 'header' and 'blog' are inside 'wrap' with defined width.
The problem is as usual with IE6. 'blog' is shown under the 'header'. So it seems that float and/or margin does not work.
It seems that it's not a double margin float bug, at least in DebugBar I see correct margins, but also there are some offsets (50px for header), which I don't know what it is, actually. Anyway, i tried to add 'display: inline' to both 'header' and 'blog', and it does not help.
I don't have ie7 to see, but it does show correctly in ie8.
I went through several tutorials on floating bugs for ie6, but could not find a solution for my problem (or i might have missed it).
Any ideas how to 'heal' it without adding extra div's (i hope it's possible with css, like with doublemargin bug)
p/s/ total width of divs with margin is 1345 < 1400.
EDIT1:
the only thing that is strange is 'wrap' has 0 height.
EDIT1: the only thing that is strange is 'wrap' has 0 height.
Please read http://www.quirksmode.org/css/clearing.html . However, the described issue doesn't appear in IE6 because of another bug; floats are automatically cleared.
Also, to prevent double-margin bug, make sure you define display:inline for all floating elements. Avoid adding display: inline to #wrap, it'll cause the previous issue (#blog appearing under #header).
edit: I was able to reproduce the issue at reznikdavydov.com. Inside #header, there is a <div class=menu> which has width: 300px set. The bug in IE6 causes that the wrapper (#header) is incorrectly expanded so that div.menu cannot overflow out of it. This is the reason why #header and #blog cannot fit side by side: the computed with of #header is 135px in modern browser, but 300px in IE6. The solution is to remove the width:300px rule from .menu selector.
it seems you have unneeded CSS, i would start from here and see if it works
div#wrap {
margin:0 auto;
width: 1400px;
}
div#header {
float: left;
margin: 50px 15px 0 50px;
width: 135px;
}
div#blog {
float: left;
margin: 50px 15px 0 50px;
width: 1080px;
}
div#site {
width: 100%;
}
My dilemma is this (and should be simple, I suspect): I have a container and a set of items (both divs). The following CSS applies:
.container {
float: left;
width: 100%;
}
.item {
margin: 32px;
text-align: center;
position: relative;
float: left;
}
The .item itself is a container that could have almost any set of arbitrary elements, but they need to be center aligned inside of it (in my case, it typically contains a thumbnail image and a small caption of text beneath it). While the above CSS allows each .item to flow horizontally the way I like, I can't figure out how to make the whole set center aligned (as opposed to flowing from left to right like it does now).
edit
Change .item { display: block; } to .item { display: inline-block; }, take away .item { float:left; } and add text-align: center; to .container
You can see it here: http://jsfiddle.net/JMC_Creative/RQrRb/
You could also put an .inner div with width:75%; margin: 0 auto; and then put your .items in that, if you are looking to have some space on the sides.
You'll want to take a look at this tutorial from Mozilla. It can be center aligned by just setting the parent container to text-align:center;
Cross Browser Inline Block
.container {
width: 100%;
}
.item {
margin: 32px;
text-align: center;
}