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
Related
Also, I would like to center verticaly and horizontally things inside div. I tried, but nothing worked for me. I tried, adding absolute position. Then I can set width and height normally, but then I have problems width text(s) inside div: I cant center it vertically
Here is simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.Table{
background-color:red;
display:table;
height:400px;
width:300px;
}
.Row1{
background-color:blue;
display:table-row;
text-align:center;
vertical-align:middle;
width:20px;
height:100px;
position:relative;
}
</style>
<div class="Table">
<div class="Row1">
<p>Row1</p>
<!--<div class="Cell1"></div>
<div class="Cell2"></div>
<div class="Cell3"></div>-->
</div>
<div class="Row2">
<p>Test</p>
</div>
</div>
</body>
</html>
I think one solution is: Display inner div again as table, then set paragraph as table-cell. After that, I can easy center things using align-text or vertically-align. Also I can easily set width and height of this div.
You're question really isn't very clear. You cannot set the width of a table-row (it spans the entire width of the table) but you can set the width of a cell.
Here's an example CSS table with content centred in each cell.
HTML:
<div class="table">
<div>
<div class="cell1">Cell1</div>
<div>Cell2</div>
<div>Cell3</div>
</div>
<div>
<div>Cell4</div>
<div>Cell5</div>
<div>Cell6</div>
</div>
</div>
CSS:
.table {
/* a table */
display:table;
height:400px;
width:300px;
border-collapse:collapse;
}
.table > div {
/* rows */
background-color:blue;
display:table-row;
}
.table > div > div {
/* cells */
background-color:pink;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid red;
}
.table .cell1 {
/* a specific cell */
width:20px;
background-color:lime;
}
http://jsfiddle.net/TU9rj/
I'm building a 1 column responsive blog site.
I have a fixed position header with navigation, content section with x amount of blog posts (as excerpts) and a footer containing a contact form.
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
Everything is working as required apart from the height of the footer.
I would like to make the footer height match the height of the browser window, so that (apart from the fixed header) when you scroll to the bottom of the page the only the footer is visible and fills the browser window entirely.
How do I achieve this with css?
You can do this by setting the #footer as position:absolute; then setting both the width & height to 100%.
As long as your footer div is a direct descendant of the body, and the body has the margin and padding set to 0, setting the height of your footer to 100% should do.
This example should demonstrate:
<html>
<head><title>title</title><head>
<body style="margin:0; padding:0;">
<div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
<div id="content" style="height: 500px; background-color: red;">Blog Content</div>
<div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
</body>
</html>
you want some thing like this ??
HTML:
<div id="mainbody">
<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>
</div>
CSS:
html, body{
width:100%;
height:100%;
}
#header{
position:fixed;
top:0;
height:50px;
width:100%;
background:red;
color:white;
}
#mainbody{
padding-top:50px;
background:blue;
color:white;
width:100%;
}
#footer{
background:green;
position:absolute;
height:100%;
width:100%;
color:white;
}
DEMO
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/
Suppose I have a document like
<style type="text/css">
div {
border:1px solid;
padding:15px;
}
#i_am_relatively_positioned{
background-color:#fcc;
margin:50px;
padding:50px;
position:relative;
}
#inner {
background-color:#cfc;
}
#i_want_to_be_absolute_to_body{
background-color:#ccf;
left:0;
position:absolute;
top:0;
}
</style>
<body>
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>
</div>
</body>
Is there a way to make #i_want_to_be_absolute_to_body positioned absolute with respect to the body element, rather than its immediate relative container?
I know I can just use some negative top and left but that seems kludgey - is this my only option?
You can use a bit of javascript to do this (I'm assuming you can't change the markup?).
document.body.appendChild(document.getElementById('i_want_to_be_absolute_to_body'));
Is it important, that the Element "i_want_to_be_absolute_to_body" is in the Container "i_am_relatively_positioned"?
If not then this solution:
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>
My page ...
http://webpages.charter.net/jolove/Escort_Folder/test.html
thanks to: fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css
Now I have a functional footer that adheres to the bottom of the window ..
except now what I need to do is get the footer to stick to the bottom with the height of the scrollable area above the footer shrinking or expanding accordingly as the window height changes.
In other words, the window's vertical scroll bar should never appear.
John
If correctly understand what you're trying to do it can be done using divs with percentage heights. Here is the basic idea:
<div id="header" style="height: 10%"></div>
<div id="scrollableContent" style="height: 60%; overflow: auto"></div>
<div id="footer" style="height: 30%"></div>
Using the percentage heights each div will resize according to the window size and only the scrollableContent div will have a scroll bar.
i am not sure if you wish the following just try it. on the #poemScroller change the height:28em; to height:auto;
you can use static positioning to achieve the same behavior see this example
<html>
<head>
<style>
#header{
position:fixed;
top:0;
height:50px;
z-index:5;
width:100%;
}
#content{
/* margin top should be >= header height
this also applies for footer */
margin: 50px 0;
width:100%;
}
#footer{
position:fixed;
bottom:0;
height:50px;
z-index:5;
width:100%;
}
</style>
</head>
<body>
<div id="header" > <h1>This is header</h1> </div>
<div id="content" >
<p>alot of content</p>
</div>
<div id="footer" > <h1>This is footer</h1> </div>
</body>
</html>