Edit: A note to anyone reading this, the whole reason it didn't work for me is because I was using DOCTYPE TRANSITIONAL. Which no change in HTML or CSS whatsoever, switching to DOCTYPE STRICT made it work. This is true for at least Chrome, FF, and IE8.
I have tried many many solutions offered online and none of them seem to work for me. I am trying to vertical-align an image inside a div (the image is already horizontal-aligned).
The image can be any width and any height (up to 70px) so I can't use a fixed margin or anything like that.
Here is my HTML+CSS:
<head>
<style type="text/css" media="all">
#list ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#list li {
border: 2px solid #DDD;
margin-bottom: 3px;
height: 110px;
}
#image {
width: 75px;
height: 110px;
line-height: 110px;
float: left;
}
#image img {
vertical-align: middle;
display: block;
margin: auto;
}
#event {
margin-left: 75px;
}
</style>
</head>
<body>
<div id='container'>
<div id="list">
<ul>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
<li>
<div id='image'>
<img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
</div>
<div id='event'>
<h1>Text</h1>
<h2>More Text</h2>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
You can't use vertical-align on a block element. An image is usually an inline element, but you have yours explicitly set to display: block. Remove that, and set the line-height of the parent div to the div's height.
Works here: http://jsfiddle.net/YnzR9/1/
#image {
width: 75px;
height: 100%;
float: left;
line-height: 110px;
text-align: center;
}
#image img {
vertical-align: middle;
}
Set the "line-height" of the div to the same value as the height of the div.
Update: Assuming you want the image vertically aligned and centered, use the following.
#image {
width: 75px;
height: 110px;
float: left;
line-height: 110px;
text-align:center;
}
#image img {
vertical-align: middle;
}
Related
I have changed the footer's background color to yellow but the code just is not working.
I have been working on this for past 2 hours. Please don't bash me out!
Just help. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#footerMain{
min-width: 1000px;
background-color: yellow;
}
.footerLeft{
position: absolute;
height: 20px;
width: 80px;
}
.footerRight{
position: absolute;
margin-left: 800px;
height: 20px;
width: 80px;
}
</style>
</head>
<body>
<footer id="footerMain">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
</body>
try this , HTML
<footer id="footerMain" class="clearfix">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
CSS:
.clearix{
zoom:1;
}
.clearfix:after, .clearfix:before{
line-height: 0;
content: '';
display: table;
}
.clearfix:after{
clear:both;
}
#footerMain{
background-color:yellow;
}
div.footerLeft{
width:50%;
float:left;
}
div.footerRight{
width:50%;
float:right;
}
Because you are using position absolute; so basically #footerMain has no height, but still, you better not use position absoute, more robust way would be floating property
#footerMain{
min-width: 1000px;
background: yellow;
height: 100px; /* add height & add more height, because h1 has margin */
}
.footerLeft{
float: left; /*remove position: absolute;*/
height: 20px;
width: 80px;
}
.footerRight{
float: right; /*remove position: absolute;*/
height: 20px;
width: 80px;
}
<footer id="footerMain">
<div class="footerLeft">
<h1>Hello</h1>
</div>
<div class="footerRight">
<h1>Bye</h1>
</div>
</footer>
Your #footerMain element contains only absolute-positioned elements. Therefore, it is considered empty as far as layout goes. Consequently, its height is zero, making it invisible.
Add some height to it - probably 20px to match the height of the elements.
Add a height rule to footerMain like 40px
When I place a fixed size display-block <span> element inside a <div> it causes a weird margin or padding (I don't know) at the bottom of the <div>. When there is text inside the <span> element, everything is fine. What's the reason for this? How can I fix it? I tested on Firfox and Chrome.
Weird space http://picster.at/img/0/9/6/0968c75ddf29ad07cb71eee2cff472a9.png
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
</div>
<br>
<div class="outer">
<span class="inner"></span>
</div>
</body>
</html>
Update:
Floating would be an alternative to display-block elements. Perfectly valid, however I would like to understand what's wrong with display-block in this example. Also, it doesn't look like a white-space problem to me, as this would only affect margin to the left/right (correct me if I'm wrong).
It is because you are using inline-block;, this is the best example of how inline-block is different from floats
Demo
.outer {
background: grey;
padding: 4px;
overflow: hidden;
}
.inner {
float: left;
background: cyan;
height: 40px;
width: 40px;
}
inline-block leaves whitespace of 4px margin.
More Info
This hack works great for me.
Demo
.inner:after{
content: '\00a0';
}
inline-block is messing it up
If your intention of setting it as inline-block was to set a row of .inner's, set change the inner to block, and float left.
Then use a div with clear: both to fix the issue that normally the floating causes.
Here's your code modified:
<head>
<style type="text/css">
<!--
.outer {
background: grey;
padding: 4px;
}
.inner {
display: block;
background: cyan;
height: 40px;
width: 40px;
float: left;
margin-right: 4px;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<div class="outer">
<span class="inner">Foo</span>
<div class="clear"></div>
</div>
<br>
<div class="outer">
<span class="inner"></span>
<span class="inner"></span>
<div class="clear"></div>
</div>
</body>
</html>
It can be solved by setting the "line-height" of the outer element to 0. This solves pretty much every case.
Don't forget to make sure the inner element doesn't inherit that though, to do this you can just set it to "line-height:initial".
.outer {
background: grey;
padding: 4px;
line-height:0;
}
.inner {
display: inline-block;
background: cyan;
height: 40px;
width: 40px;
line-height:initial;
}
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
how do i can stretch my div according text
I want to stretch height of a div , with the text user posted
look at the screen shot its clear.
CSS :
.cmnt{ width: 570px; margin-top: 10px; margin-bottom: 10px; float: right; margin-right: 15px; clear:both; }
.cmnt .body{ width: 570px; background: #333333; min-height: 90px; height: auto; }
.cmnt .text{ width: 513px; float: left; font-family: arial; color: #FFF; }
.cmnt .arrow{ width: 570px; height: 7px; background: url(../img/comment_arr.jpg) no-repeat 17px top; }
.cmnt .info{ width: 470px; height: 20px; font-family: arial; font-size: 14px; color: #FFF; float: left; text-align: left; }
HTML :
<div class="cmnt">
<a name="comment-id" />
<div class="body">
<div class="text">
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
text<br/>
</div>
<img class="avatar" src="assets/img/cmnt-u.jpg" align="absmiddle" />
</div>
<div class="arrow"></div>
<div class="info">
smith (date)
</div>
<div class="rp">
reply ↓
</div>
</div>
Image
Parent :
<div class="comment">
<div class="cmntHeader">Comments</div>
<div class="cmntBody">
<center>
....
</center>
</div>
</div>
You can try adding a float: left CSS property to your outer container.
.cmnt .body{ float: left; width: 570px; background: #333333; min-height: 90px; height: auto; }
Here's a fiddle for you
http://jsfiddle.net/znQa8/
Hope it helps.
The height of a container is automatically adjusted, if not specified, according to the child (not floated) elements.
Because the div (class=text) is floated, its height doesn't take into account. Whenever you used a float, systematically try to clear it after to resolve the height problem.
<div class="text">
...
</div>
<div style="clear:both"></div>
min-height would be your solution.
it could be a possibility to add:
div.body
{
height: auto;
}
but i'm not sure it isn't killing the whole layout
In reference to My Head Hurts you need to clear your floats:
.cmnt .body
{
overflow: hidden;
}
What is happening is that you have a floating container with floating children.
In this case, the floating container "ignores" the children dimensions. This is probably a side effect of the implementation of the real primary objective of float (that was to have floating images on wrapped text).
In this article you can see the floating purpose and a list of workarrounds:
http://www.ejeliot.com/blog/59
And this is what I think is the best solution so far, the micro clearfix (best about it is that you can put in you css and reuse it whenever you need it again):
http://nicolasgallagher.com/micro-clearfix-hack/
Just add this css block to your css file:
/*THE CLEARFIX HACK*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
And then add the clearfix class to the "body" div.
jsfiddle: XZRH5
When I create an HTML div element with no content, it disappears.
When the div is populated, like this HTML, then it works right.
<!doctype html>
<head>
<style>
.nav {
width: 26%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #FF0000;
}
.content {
width: 56%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #0000FF;
}
</style>
</head>
<body>
<div style="width: 600px;">
<div class="nav"><p>nav</p></div>
<div class="content"><p>content</p></div>
</div>
</body>
</html>
I get the following (expected) output:
However, if I change the div element with the class = nav to no content:
<div class="nav"></div>
The red box disappears:
It's like there is no div there! How can I always have the program show the div with no content?
When the div is empty the element has no height. So what's actually happening is that it's there but has 0 height.
You could put something in it (like or give it height and/or line-height. I'd suggest giving the other div the same height.
Put a non-breaking space in it. That's what I do when I need something, but not nothing. You may also be able to give it an explicit height to get the same result.
Make sure the contains some kind of content. is usually the best. It ensures that there is at least something for the browser to display/render. This also might be a cause of your DTD.
Another thing that call cause this is improperly nested tags or tags that are not closed.
Make sure all tags are properly nested and closed.
This approach lets the div be empty, by using inline-block display. You force the height.
CSS:
.nav {
width: 26%;
height: 2em;
display: inline-block;
float: left;
background-color: #FF0000;
}
.content {
width: 56%;
height:2em;
display: inline-block;
background-color: #0000FF;
}
HTML:
<div style="width: 600px;">
<div class="nav"></div>
<div class="content"><p>content</p></div>
</div>
Alix,
you need to add a height value to the class .nav
<!doctype html>
<head>
<style>
.nav {
width: 26%;
height: 50px;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #FF0000;
}
.content {
width: 56%;
display: inline;
float: left;
margin-left: 2%;
margin-right: 2%;
background-color: #0000FF;
}
</style>
</head>
<body>
<div style="width: 600px;">
<div class="nav"></div>
<div class="content"><p>content</p></div>
</div>
</body>
</html>
after you add a height value also add a display property to the nav class like:
height:1em;
display:block;