My code was working when
<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style="height:100%; width:100%; border:solid;"></div>
</body>
</html>
But not working when i added display:table-cell; to div for using vertical-align
<!DOCTYPE html>
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style="height:100%; width:100%; border:solid; display:table-cell;vertical-align:middle;"></div>
</body>
</html>
I want the div to cover the whole white space in body
Your code should work now.
<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px; margin:0px;">
<div style='display : table; width : 100%; height : 100%'>
<div style='display : table-row;'>
<div style="border:solid; display : table-cell;">
</div>
</div>
</div>
</body>
</html>
Example
Rule of thumb : Always have a proper markup whenever display : table-cell is concerned.
You have to set the height to 100% for all parent elements then...
html, body {
height: 100%
}
Give it a try, it worked for me. And better remove all the CSS properties you set to the body-element before.
Having div.table > div.table-row > table.table-cell with height of its container is a bit tricky thing. One of the easiest way is that you can add
.table {
position: absolute;
}
in this case if you will add
.table {
height: 100%;
}
That will fit its parent height.
Related
I'm trying to center vertically a div inside an inline-block,
I used this inline-block to get automatically size of child in order to center my div.
The problem is my children div are floating... in order to constrain it to the left/right position.
Here is how the HTML look like :
<span class="block_container">
<div class="block_text"> <!-- float:right -->
<h1>TITLE</h1>
<p>lorem ipsum</p>
</div>
<div class="block_image"> <!-- float:left -->
<img src="test.png"></img>
</div>
</span>
However, I can't figure out this problem : http://jsfiddle.net/kl94/nH2sd/
Edit:
Here is what I want :
Here is what I tried :
http://jsfiddle.net/kl94/nH2sd/
To get the actual vertical alignment working the way you want it to work as per your attached screenshot, you have to change a few things.
1. Adding a display:table-row; to the parent block.
2. Removing all floats and replacing it with display:table-cell;
This will enforce the exact characteristic of vertical-alignment to co-exist and work the way you want it to work as per the attached screenshot.
Here is the WORKING DEMO
The HTML:
<span class="block_container">
<div class="block_image">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
</div>
<div class="block_text">
<div class="bgColor">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
<div>
</div>
</span>
The CSS:
.block_text {
/*background: red;*/
/*float: right;*/
width: 60%;
display:table-cell;
vertical-align:middle;
}
.block_image {
background: yellow;
/*float: left;*/
width: 40%;
display:table-cell;
}
.block_image img {
width: 100%;
max-width: 300px;
height:auto;
}
.block_container {
background:teal;
/*display:inline-block;*/
display:table-row;
}
.bgColor{background:red;}
Hope this helps.
You could try something like this: http://codepen.io/pageaffairs/pen/LlEvs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.block_text {
background: red;
display:inline-block;
vertical-align: middle;
}
img {
width: 40%;
max-width: 300px;
vertical-align:middle;
background: yellow;
}
.block_container {
background:teal;
display: inline-block;
}
</style>
</head>
<body>
<div class="block_container">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
<h1>TITLE</h1>
<p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
</div>
</div>
</body>
</html>
You can try to add this:
margin-top: 13%; at your .block_text selector in CSS.
I have a center aligned with 1060px width. Within this, I have two more divs as and with different background color/images and width of 260px and 800px respectively.
Now I need to make the height of the two child divs same, irrespective of the content inside them. If “child1” has huge content and we need to scroll down the browser to see it and “child2” has less content, then also “child2” should have the height extended to match with the “child1”. On the other hand if both “child1” and “child2” has less content and does not produce browser scroll, then both of the should occupy the height of the browser window. The code snippet is given below.
<html>
<head>
<style type="text/css">
* { margin:0; padding:0; }
.parent { clear:both; margin:auto; width:1060px; }
.child1 { background-color:#999999; float:left; width:260px; }
.child2 { background-color:#99CC00; float:left; width:800px; }
.child1a, child2a { float:left; width:100%; }
.child2a { border-bottom:1px solid #000000; height:500px; }
</style>
</head>
<body>
<div class="parent">
<div class="child1">
<div class="child1a">1</div>
<div class="child1a">2</div>
<div class="child1a">3</div>
</div>
<div class="child2">
<div class="child2a">1</div>
<div class="child2a">2</div>
<div class="child2a">3</div>
</div>
</div>
</body>
</html>
Is it possible to solve it using only CSS, or need to use JavaScript?
You can do using 'display:table-cell' .
http://jsfiddle.net/sWHKs/
I have two child divs in a parent div. first child div A has an absolute height and second div B should take the rest of the height available. How to do this? Basically for div, I want height like (100% - 37px)
<style>
#C{
height:100%;
width:500px;
}
#A{
height:37px;
width:100%;
}
#B{
height: ????;
width:100%
}
</style>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
#alter, for rest on the height you need to give padding to the div B according to the height of div A
#B{
padding-top:37px;
}
for example
I think the best way to achieve that is to give the parent div a min-height and then give div B a min-height of (min-height - 37)px. See code below
#C{min-height:600px; width:500px;}
#A{height:37px; width:100%;}
#B{min-height:563px; width:100%}
Sample Code:
<html>
<head>
<style type="text/css">
#C{min-height:600px; width:500px; background-color:yellow;}
#A{height:37px; width:100%; background-color:blue;}
#B{min-height:563px; width:100%; background-color:black;}
</style>
</head>
<body>
<div id="C">
<div id="A"></div>
<div id="B"></div>
</div>
</body>
</html>
I have added color to the divs just to differentiate them
If i am right display:inline should display div on the same line without any line break. This is my web page where display:inline simply makes my div invisible:
<html>
<head>
<style type="text/css">
.body{
max-width:3072px;
min-width:3072px;
margin:0px auto;
background:#293231;
}
.page1{
background:url('Main.jpg') no-repeat;
width:1024px;
height:211px;
}
.page2{
background:url('Page2.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.page3{
background:url('Page3.jpg') no-repeat;
width:1024px;
height:211px;
display:inline;
}
.wrapper{
display:block;
width:100%;
height:auto;
}
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I can see divs with class = page1, but page2 and page3 are invisible.
A non-block element can't have height/width specified like that (and with no content inside, it'll have nothing to give it size) - instead you want inline-block, like this:
display: inline-block;
You can see a full list of options for display here
Unfortunately, display: inline-block is not supported by older versions of IE. You can do this by floating your three inner div tags left, and undoing the float on the containing element. Here is the complete example (see my comments for the relevant changes):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; }
.page1{ background:url('Main.jpg') no-repeat; }
.page2 { background:url('Page2.jpg') no-repeat; }
.page3{ background:url('Page3.jpg') no-repeat; }
/* These next two lines are my changes. */
/* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; }
/* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; }
</style>
</head>
<body class="body">
<div class="wrapper">
<div class="page1">
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>
I want to create fixed footer but , is it possible with 960 gs , because I am having trouble with height of container div . I can no set it to %100.
<div class="container_12" >
<div class="grid_3" id="side-space"></div>
<div class="grid_6">
<div id="content-box"></div>
</div>
<div class="grid_3" id="side-space"></div>
</div>
I don't believe 960.gs has much to do with height.. it just deals with columns and clearing. Nice framework to start with. Try setting body to 100% and then setting #content-box to 100%. Here is a random example I came across
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed footer</title>
<style type="text/css">
body{
margin:0;
padding:0 0 <length> 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:<length>;
}
#media screen{
body>div#footer{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="footer"> footer </div>
<div id="content"> content </div>