I am struggling with my website, I am trying to get the divs at the bottom to go in the center. The main text section centers and displays fine, its only the footer where the text won't align in the center. Has anyone got any ideas what I am doing wrong?
Here is my css code.
#footer{
float: left;
width: 100%;
height: 100px;
background-image: url(images/jf_footer.png);
color: #C7C7C7;
font-size: 0.75em;
}
#footercontainer{
width: 960px;
margin:0px auto;
margin-top: 20px;
}
#footertext{
float: left;
text-align:center;
margin-top: 15px;
color: #C7C7C7;
font-size: 1em;
}
#footerlinks{
float: left;
}
HTML:
<div id="footer">
<div id="footercontainer">
<div id="footertext">Copyright NV Blinds 2012</div>
<div id="footerlinks">
<ul>
<li>Home</li>
<li>About</li>
<li>The Collections</li>
<li>Distributors</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Its hard to guess what exactly you are looking for.. i've aligned the links side by site and the #footerContainer is at the center -- you can check it if the window size is more than 960px.. well,enough said -- check the demo
DEMO
Not sure about your HTML but I guess it may be because you use float:left in your footer related styles.
I think the main reason that you don't get text aligned in the center is the fact that using floating on containers (div) will make them have width equal to content, but not 100%.
So text-align (which only has effect on inline elements like links, spans, inputs) can't align the content in the center because it already takes the full size.
I guess the problem is here: using float:left with conjunction of text-align:
#footertext{
float: left;
text-align:center;
}
See my CSS below with notes. I've included the bare minimum you need to get what I believe is your desired effect. (If you want both the #footertext and #footerlinks to be on the same line, just add display:inline to both ids.
#footer {
width: 100%;
}
#footercontainer{ /* corrected spelling to match HTML id */
width: 960px;
margin: 0px auto; /* horizontally centers div */
}
#footertext{
text-align: center; /* horizontally center text */
}
#footerlinks{
text-align: center; /* horizontally center text */
}
#footerlinks ul {
list-style: none; /* remove bullets from list */
}
#footerlinks ul li {
display: inline; /* make li elements inline */
}
Related
Observed a strange thing with CSS position : absolute in header is that unless there is a float:left in the menu below, the text of the menu is not centered vertically and stays at the top. You can see this by running the snippet given in this page and in full width. I have put a media query for float:none in lower screen width which cancels the float:left in higher screen-widths.
Now, why is this behaviour ? Why is float:left keeping the menu text center vertically when position:absolute is applied to header and vice-versa ? I did not find anything on this on searching.
Edit -
Some answers are saying that this is happening due to "collapsing" of margins. But they are not explaining why the h1 of header is not "collapsing" and behaving this way ? Why only the h1 of menu is "collapsing" ? It seems more of a selecting overlapping of some elements rather than collapsing.
Edit2-
Request the answer givers that if they want to break up the snippet for convenience of their explanations, they should also put in their answer the full snippet or its modification besides the parts of snippet. Because divs do not act in isolation. The answer should have the header with position: absolute, its h1 and the margin-top applied to the h1 of the div below the header.
Please see this snippet -
div.header {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: auto;
text-align: center;
color: #EE82EE;
background-color: #000000;
}
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 72px;
color:black;
height: 100px;
background-color: red;
float: left;
padding:0px;
}
#media screen and (max-width: 766px){
.submenu {
float:none;
}
}
<div class="header">
<h1>HEADER </h1>
</div>
<div class="submenu">
<h1>MENU</h1>
</div>
Edit:
As I explained in my comments, the h1 in your header doesn't collapse because it uses position:absolute - which, as you can see below, is one of the fixes to prevent collapsing margins. The overlapping is only happening because your header is absolutely positioned, so it will appear on top of everything else in the page.
To summarise loosely, collapsing margins happen when vertical margins touch on block elements that have no separation between them (e.g. borders or padding), are not floated, not absolutely positioned, not fixed and have overflow:visible (the default value). There are some other cases but that covers the vast majority causes, including yours.
Answer
What you're seeing is the effect of collapsing margins.
The CSS spec says that when the vertical margins of two elements touch, the two margins will be combined to form a single margin.
This also occurs with parent/child elements when there is no separation between the first (or last) child and the parent - in this case the collapsed margin ends up outside the parent.
In your case, your h1 has a default margin from the browsers stylesheet. This is being collapsed into its parent's margin i.e. the submenu element by default because it is a block element.
Prevent margin collapsing: There are a number of ways to prevent a margin of the child from collapsing including:
float
position: absolute.
change the display to one of: “table-cell”, “table-caption”, or “inline-block".
add an overflow other than visible, e.g. overflow:auto
add a "separation" between the parent and child, e.g. a border or padding.
When you add the float to your child, this is one of the methods that prevent the margins from collapsing, so you still have the space from the margin appearing at the top of your h1 that contains the word "Menu".
See some examples:
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 0px;
color:black;
height: 100px;
background-color: red;
float: none;
padding:0px;
}
.container { border:2px solid #ff0;}
.container:after {
content: "";
display: table;
clear: both;
}
h1{ margin:30px 0;}
.submenu.hasfloat {float: left;}
.submenu.hasoverflow {overflow: auto;}
<p>The top margin of this h1 is collapsed into the parent's margin. </p><p>The parent's top margin is 10px, and the h1 has a top margin of 30px, so when collapsed the parent now takes on the child's margin because it is larger - you can see the margin surrounded with the yellow border:</p>
<div class="container">
<div class="submenu">
<h1>Collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent is <b>floated</b>:</p>
<div class="container">
<div class="submenu hasfloat">
<h1>Not collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent has <b>overflow:auto</b> (i.e. any value other than visible):</p>
<div class="container">
<div class="submenu hasoverflow">
<h1>Not collapsed</h1>
</div>
</div>
Example: Showing that the issue still exists even if the header is not absolutely positioned.
div.header {
position: relative;
left: 0%;
top: 0%;
width: 100%;
height: auto;
text-align: center;
color: #EE82EE;
background-color: #000000;
}
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 72px;
color:black;
height: 100px;
background-color: red;
float: left;
padding:0px;
}
#media screen and (max-width: 766px){
.submenu {
float:none;
}
}
<div class="header">
<h1>HEADER <small>- position:relative</small></h1>
</div>
<div class="submenu">
<h1>MENU <small>- top margin is still collapsing</small></h1>
</div>
References: Read more about collapsing margins from:
Mozilla.org: Mastering margin collapsing
W3.org CSS3 Specification
Sitepoint: Collapsing Margins
CSS Tricks:What You Should Know About Collapsing Margins
The position: absolute applied to the header makes the div FIXED while all other divs become relatively MOVABLE. So, to make the others also fixed, we give them some other properties like display:inline-block, float:left etc.
Also, need to give a margin-top to the div below the absolute div to offset the collapsing margin
Please see working code with these fixes applied and which has all the divs at https://codepen.io/anon/pen/QqRgRB
The snippet is as follows -
div.header {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: auto;
text-align: center;
color: #EE82EE;
background-color: grey;
}
.menu {
text-align: center;
width:100%;
margin:0;
margin-top: 72px;
color:black;
height: 100px;
background-color: red;
float: left;
padding:0px;
display: inline-block;
}
.submenu {
text-align: center;
width:100%;
margin:0;
margin-top: 0px;
color:black;
height: 100px;
background-color: yellow;
display:inline-block;
padding:0px;
}
#media screen and (max-width: 766px){
.menu {
float:none;
}
}
body {
margin:0px;
}
<div class="header">
<h1>HEADER </h1>
</div>
<div class="menu">
<h1>MENU</h1>
</div>
<div class="submenu">
<h1>SUBMENU</h2>
</div>
Whenever I center text in my css, it also centers the images too. Why is that? The text is inside a div ("left") and the images are inside the second div ("right"). Here is the HTML -
<div class="left">
<p>
BANKS</div>
<div class="right">
<p>
<img src="http://www.dogtraining-hampshire.co.uk/dog_training_classes_puppy_1.jpg" border="0">
</div>
And the CSS -
#wrapper {
width: 100%;
overflow: auto;
text-align: center;
}
.left, .right {
width:48%;
margin-bottom: 5px;
}
.left {
clear:both;
float:left;
margin-right:1%;
}
.right {
float:right;
margin-left:1%;}
}
I've tried adding "#wrapper img" to the CSS and setting the images to float left but this hasn't worked either.
Here is a jsfiddle of the full css and html - http://jsfiddle.net/rHEJA/
Downvoters
Any reason for the downvote? I am happy to change my answer!
Images are inline elements, so they abide by the rules given in text-align. If you don't want them to follow it, you can very well give another rule like:
#wrapper img {text-align: left;}
Or, in a better way, just to center the div, you can also do something like:
.centerDiv {width: 50%; margin: auto;}
This makes the <div> to be centred.
This is just what text-align: center; does as a CSS property. Images will also align to the right if you set it to text-align: right;.
You can change your CSS to include the following:
#wrapper img { text-align: left; }
I am struggling to get the header logo on http://inksharks.com centered in most desktop browsers. It does center when scaled to a mobile or tablet view. I have tried several things this was the closest I got to fixing it but it altered my footer as well.
.wrap-inner .twelve.pane {
margin-left: 0 !important;
width: 930px;
}
On .logo, h1.logo remove float: left;. Then on .logo img, .logo .text-logo, .logo .description put
CSS:
.logo img, .logo .text-logo, .logo .description{
display: block;
margin: 0 auto;
}
<h1 class="logo img-only">
</h1>
add an align attribute to this, and it will look like
<h1 class="logo img-only" align="center">
</h1>
It will work fine
This will center align your logo:
h1.logo {
float: none;
}
div.wrap-inner {
text-align: center;
}
I am overriding the float: left on your h1.logo, it's better to remove it though if you can.
Also remove padding-top:44px from .nav-right .navigation-wrap to fix the space between the logo and your content.
I have a HTML section "all" that wraps around two other sections. I'm having trouble getting the website to adjust the height of the "all" section based on the length of stuff I put into the other two sections.
<section id="all">
<section id="left_content">
<p>Something here.</p>
</section>
<section id="right_content">
<p>Something here.</p>
</section>
</section>
I currently have the height set at a fixed size of 700px. I was wondering if it was possible in the CSS, to have that section's height be related to the size of the left_content and right_content sections.
#all {
width: 900px;
height: 700px;
margin: 0 auto;
padding-top: 20px;
background: #F4F4F4;
}
#left_content {
float: left;
width: 570px;
margin-top:-20px;
padding: 0px 20px 10px 20px;
line-height: 25px;
font-size: 12px;
}
#right_content {
border-left:4px solid #cccccc;
float: right;
width: 250px;
padding: 0px 10px 20px 20px;
line-height: 20px;
font-size: 12px;
}
Don't give #all a height
Clear your floats
Your wrapper cannot determine a height while child items are floating. You need an element that "ends" the floating. <div style='clear:both'></div> is a common way to clear floats. Clearfix is another technique.
Read more: http://css-tricks.com/all-about-floats/
Remove the height declaration for #all (like Diodeus said). You will then need to apply either a clearing element below the two content divs (like a footer), or apply a clearfix to the div #all.
For instance:
/* For modern browsers */
#all:before,
#all:after {
content:"";
display:table;
}
#all:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#all {
zoom:1;
}
This is a direct copy & paste of Nicolas Gallagher's excellent micro clearfix.
I have a series of images (about a 100 or so) that have been resized so that they fit in a background box that is 130x130. The images are either 130 wide or 130 high. How do I style the image so that they appear in the middle of the 130px box.
This is the effect I want to achieve: http://i.imgur.com/LY1Ag.png
Here's another method that has two main differences: avoids the use of background images (the use of which is semantically weird as Nightfirecat mentioned) and puts the images within an unordered list. The latter isn't necessary but is arguably follows CSS best practices.
I haven't tested extensively but on recent Firefox, Chrome and IE for PC. I had to add a hack for IE7 based on this page's suggestions. That's the reason for the empty <span> for each list item.
CSS:
<style type="text/css">
#boxes {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
}
#boxes li {
float: left;
border: 1px solid #333;
margin: 30px;
}
#boxes li div {
position: relative;
width: 130px;
height: 130px;
text-align: center;
display: block
}
#boxes li div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto
}
</style>
<!--[if IE 7]>
<style type="text/css">
#boxes li div * {
vertical-align: middle;
}
#boxes li div img {
position: relative;
}
#boxes li div span {
display: inline-block;
height: 100%;
}
</style>
<![endif]-->
HTML:
<ul id="boxes">
<li><div><span></span><img src="wide1.jpg"></div></li>
<li><div><span></span><img src="wide2.jpg"></div></li>
<li><div><span></span><img src="wide3.jpg"></div></li>
<li><div><span></span><img src="tall1.jpg"></div></li>
<li><div><span></span><img src="wide4.jpg"></div></li>
<li><div><span></span><img src="tall2.jpg"></div></li>
</ul>
Done quickly, so it's entirely possible that there are some bugs.
If you use them as backgrounds for a div, you're all set:
CSS:
div.box-images div {
float: left; /* has them left-align */
height: 130px;
width: 130px;
margin: 12px; /* gives them gutters in between */
background-position: 50% 50%; /* ensures they're centered */
background-repeat: no-repeat;
border: 2px solid #ccc;
}
HTML:
<div class='box-images'>
<div style='background-image: url(images/sample1.png);'></div>
<div style='background-image: url(images/sample2.png);'></div>
[etc.]
<br style='clear: both;' />
</div>
I personally wouldn't use background images.
I would, if possible, apply a class to each box that holds these image. the box would have set height and width as you mentioned.
Then, with jQuery or javascript, add a class depending on the images height or width. so if the width is 130px, add the class of top and bottom padding. If the image is 130 high, add the left and right padding class.
Hope this makes sense and helps you. Let me know if you need me to elaborate.
Although I only tested in fx, chrome and IE9 but you can use vertical-align: middle + line-height: 130px on the image like this:
css:
div.box {
width: 130px;
height: 130px;
text-align: center;
line-height: 130px;
}
div.box img {
vertical-align:middle;
}
html
<div class="box">
<img src="image1.jpg">
</div>
<div class="box">
<img src="image2.jpg">
</div>
I'm getting a little bit of a push though, when the image is the same height as the box. Anyone else know why? You can see it here: http://jsfiddle.net/9bu5Z/1/