this code work fine with FF and Chrome, but with IE not.
How fix this code with IE (9,8,7)?
<html>
<head>
<style type='text/css'>
.center{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
</body>
The reason it's not working in IE9/8 is because you are missing your DOCTYPE. It still won't work in IE7, but if you make your span display block and adjust your margins, you can get it to look the same. See my example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.center{
background-color: #336699;
width: 200px;
height: 200px;
display: table;
}
.sub{
display: table-cell ;
vertical-align: middle;
text-align: center;
}
</style>
<!--[if IE 7]>
<style type='text/css'>
.sub {
display: block;
margin: 70px auto;
</style>
<![endif]-->
</head>
<body>
<div class="center">
<span class="sub">
Some text text...<br />
An some more text...
</span>
</div>
</body>
vertical-align: middle to the div will not vertically center its contents. It will attempt to align the paragraph with the previous and following elements. Since the div is a block level element (and, so are the surrounding elements), vertical-align: middle will have no effect at all.
you can use line height to center its content.
use this
body { padding: 0; margin: 0px;}
.Center { margin: 0 auto;}
it is welcome everywhere
Related
As I was trying to get more familiar with vertical-align property I came across a problem. The default value of the property is baseline, which aligns the baseline of the element with the baseline of its parent. I made the h2 element at the bottom of the code display as inline-block to see how it behaves and that's when I got surprised. Shouldn't it show just right above the border of the body same as the blue box shows, instead of being somewhere in the centre of the body? It looks like aligning those boxes(divs) vertically affects where the baseline of the body is, but why? Please, click "Full page" when running the code snippet to see the behaviour.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical align</title>
<style>
body {border: 1px solid black; line-height: 1;}
.box {
display: inline-block;
width: 150px;
vertical-align: middle;
}
.tall {
height: 300px;
background-color: lightblue;
}
.short {
height: 100px;
background-color: green;
}
.middle {
height: 200px;
background-color: yellow;
}
.square {
display: inline-block;
width: 5px;
height: 5px;
background-color: red;
vertical-align: middle;
}
h2 {display: inline-block;}
</style>
</head>
<body>
<h1>Vertical Align</h1>
<div class="box tall"></div>
<div class="box short"></div>
<div class="box middle"></div>
<h2>Picture aligned <div class="square"></div> within text</h2>
</body>
</html>
I expected h2 to go down as you can see in the picture below.
I highly recommend reading this vertical-align article to gain in-depth understanding of the property.
The element is aligned this way because baseline aligns it with the baseline of the text inside the parent element.
In your case, the text baseline is pushed down by the large inline-block divs. The h2 aligns with this text. If you want it to align with the bottom of the other inline-elements (as shown in your image), add the style vertical-align: bottom to your h2.
This article explains the different vertical-align values very well:
https://css-tricks.com/what-is-vertical-align/
When you are using inline-block, it is better to handle your elements by positioning them.See my changes in css-style for h2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical align</title>
<style>
body {border: 1px solid black; line-height: 1;}
.box {
display: inline-block;
width: 100px;
vertical-align: middle;
}
.tall {
height: 300px;
background-color: lightblue;
}
.short {
height: 100px;
background-color: green;
}
.middle {
height: 200px;
background-color: yellow;
}
.square {
display: inline-block;
width: 5px;
height: 5px;
background-color: red;
vertical-align: middle;
}
h2 {
display: inline-block;
width:300px;
size:10px;
vertical-align:bottom;
}
</style>
</head>
<body>
<h1>Vertical Align</h1>
<div class="box tall"></div>
<div class="box short"></div>
<div class="box middle"></div>
<h2>Picture aligned <div class="square"></div> within text</h2>
</body>
</html>
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).
I have the following simple html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
#page {
position: relative;
width: 1000px;
min-height: 300px;
margin: 0 auto;
border: 1px solid red;
background-color: green;
}
#allcontent {
position: static;
top: 225px;
margin: 225px auto 0px auto;
width: 850px;
background-color: blue;
}
#content {
border: 1px solid white;
}
</style>
</head>
<body>
<div id="page">
<div id="allcontent">
<div id="content">
<p>This is content</p>
</div>
</div>
</div>
</body>
</html>
It looks exactly like I want it to look like, but if I remove the border from #page it totally screws up the layout. I can't figure out why. I know, I could have a transparent border as a workaround, but it seems odd...
Because you have margin:225px auto 0px auto in your <div id="allcontent"> that pushes the whole content down.
Instead of using margin, use position:absolute/relative to position your element in your <div id="page">.
The margin for #allcontent is pushing it down.
http://jsfiddle.net/2QjYG/
what is the proper code for this?
in div style code. I know how to use float but only 2 divides. But in 4 divides, I don't know.
Just float them all left and if necessary add a right margin of -1px so that the borders overlap nicely. Here's an SSCCE, just copy'n'paste'n'run it:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</body>
</html>
Floating will still work for any number of div's, they'll line up next to each other until they fill the width of the container, at which point they will start to wrap to the next line.
Just add float: left for every div.
Also, if you don't want your 4 divs to wrap to the next line when the window gets resized you can place your 4 divs inside a parent div and set the width of that parent div.
Here is an example based on BalusC's code above:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2684578</title>
<style>
.box {
float: left;
width: 100px;
height: 100px;
margin-right: -1px;
border: 1px solid black;
}
.parent {
width: 404px;
height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div>
</body>
</html>
I would like the parent-div (red) to grow with the green child-div.
Now it just stops at the viewport.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
* {
font-family: verdana;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>
I don't want to use display:table; since it does not work well in IE.
Any ideas?
Use display: inline-block; on the parent <div> and it will work as expected
Make the parent div float:left; and it will be expanded as desired.
I know I'm late, but here's what I do to fix the problem:
Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.
Here's the modified code:
.clear{
clear: both;
/* make sure there is no height set to it */
line-height: 0;
height: 0;
font-size: 0em;
}
<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
<div style="background: green; width: 2000px;">dxyf</div>
<div class="clear">/div>
</div>
Works in FF3 and IE7, but not tested in other browsers though.
Hope to, at least, help you with your problem.
Use display:table; on the parent div. Or you can put the parent div into a cell of a table.
There's too much complicated advice here. Here's a tip: instead of tinkering with table-cells, and clear and floats, just make sure the child has a border that's equivalent to the padding you were looking for the parent. Borders are always drawn outside, so it'll do what you want.
This should work...
<div style="margin: 30px; background: red;">
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>
...in all browsers, without a problem. HTH.
See this solution from quirksmode.org. It's pretty simple, just apply this class to the container/parent div:
div.container {
overflow: hidden;
width: 100%;
}