<div id="wr">
<div id="unknownWidthAndHeight">should be centered on both sides</div>
</div>
#wr {
display:table-cell;
width:400px;
height:100px;
border:1px solid red;
margin:50px;
vertical-align:middle;
}
#unknownWidthAndHeight{
display:table;
height:30px;
margin:auto;
border:1px solid blue;
}
Here is fiddle example:
http://jsfiddle.net/gdTGZ/2/
Need such support for IE7 without display:table etc. and without <table> usage.
1/ If you want to vertical center on IE7 try this technique using three divs :
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Ps : You'll always need to set the container height.
2/ The element that you want to horizontal center must have a width and margin:0 auto; otherwise you can try text-align:center
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wr {
display: block
width: 400px;
height:100px;
line-height: 100px; /* must be the same as height */
border: 1px solid red;
margin:50px;
}
#unknownWidthAndHeight{
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div id="wr">
<div id="unknownWidthAndHeight">should be centered on both sides</div>
</div>
</body>
</html>
Related
Below is the code. When i am trying to add margin:50px to the inner box, the outer box is also shifting 50px from the top. I think only the inner box should shift 50px from the top. But it is giving a different result.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
div, p {
margin: 0;
padding:0;
}
html {
background: #ccc;
}
.outer {
width: 600px;
margin: 0 auto;
background: #9CF;
}
.box{
background: #B7D19C;
width: 400px;
padding: 50px;
border: 2px solid black;
}
p {
background: #EEA458;
height: 100%;
}
/*add styles here*/
</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.</p>
</div>
</div>
</body>
</html>
Try overflow:hidden; property to the div outer
.outer{
overflow:hidden;
}
two simple solution:
1.
.outer{
padding:50px;
}
or
2.
.outer{
overflow:hidden;
}
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/
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you re-size the window all the content re-sizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe.
Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>
<style type="text/css" media="screen">
html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}
body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}
#top {
background-color:#00FF80;
height: 10%;
}
#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}
#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}
#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
I am afraid this is another case of IE getting it wrong, and FF getting it right. You cannot have 100% height and then have an additional margins or padding top or bottom, you will need to find another way. If you could post your html or a link we may be able to guide further.
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>
In the following, I'd like to alter the CSS such that the right-sibling is truly centered in the container div. (Edit: without using absolute positioning).
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
}
#right-sibling {
text-align: center;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
In its current implementation, the right sibling's centering is affected by the left sibling -- you can see this by adding display: none to the left-sibling's style.
(Note: I'd like to avoid modifying the HTML structure because, as I understand it, the whole point of CSS is to decouple the tag structure from the presentation logic, and this doesn't seem like a really crazy request for CSS to handle.)
TIA.
A trick I just used to get this to work is to have padding on the left of the container and we can encourage the left-sibling to sit inside this space by giving it an equal but negative margin.
To complete the picture we also put padding on the right of the container of an equal size to the width of the left-sibling.
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
padding-left:50px;
padding-right:50px;
}
#left-sibling {
border: solid 1px #000;
float: left;
width:50px;
margin-left:-50px;
}
#right-sibling {
border: solid 1px #000;
text-align: center;
}
#container2 {
width: 500px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container'>
<div id='left-sibling' style="display:none;">Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container2'>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
</body>
</html>
Try setting a width to the left-sibling and an equal padding-right: to the right-sibling
like so
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
width:50px;
}
#right-sibling {
text-align: center;
padding-right:50px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
You can change the float: left; on #left-sibling to position: absolute;.
This will take it out of the normal flow, so it won't affect right-sibling any more.
Of course, this could have other side-effects with your design.
You should always set a width on floated elements, otherwise things get weird :)
If you put a
border: solid 1px #000;
rule on both divs you will see what's happening - the #right-sibling div is filling the entire width of the parent div (#container), so although the text is actually aligned to the centre, it looks like it isn't!
The text-align attribute controls the alignment of the contents in the container where the attribute is applied. By adding the following styles it is easy to see:
#left-sibling { float: left; width:100px; border:1px Solid Blue; }
#right-sibling { text-align: center; width:100px; border:1px Solid Red; }
I would suggest adding a doctype to the document to avoid quirksmode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and the following styles:
#container { width: 500px; position:relative; border:1px Solid Black; }
#left-sibling { float:left; position:absolute; top:0px; left:0px; width:100px; border:1px Solid Blue; }
#right-sibling { width:100px; position:relative; margin-left:auto; margin-right:auto; border:1px Solid Red; }
You would of course want to adjust the size of the siblings to fit your needs. The borders does a nice job showing what's really happening.