Hello and nice to meet you.
I would like to ask the following.
<body>
<div style="border:1px solid #ff0000">
<pre>dfssdgfdsgsd sdgsdg
sgdsdsgsdg</pre>
</div>
<div style="border:1px solid #ff0" id="secondDiv">
ggg
</div>
</body>
Is it possible to make #secondDiv to take 100%(in height) of the remaining vertical space?
I don't want to use min-height(doesn't work in ie) or javascript.
Complete html http://paste2.org/p/1177197
Thanks.
ps:I know that there exist a lot of related questions so i'm sorry in case of a duplicate.
If you can use fixed height for the top div then it is easy to work around the second div, by using absolute positioning.
CSS
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
#head{
border:1px solid #ff0000;
height:50px;
}
#content{
position:absolute;
top:50px;
bottom:0;
width:100%;
border:1px solid #ff0;
}
HTML
<body>
<div id="head">
<pre>dfssdgfdsgsd sdgsdg
sgdsdsgsdg</pre>
</div>
<div id="content">
ggg
</div>
</body>
Demo: http://www.jsfiddle.net/RVTpT/
add #secondDiv { height:100%; } to your CSS.
I believe in order for this to work in IE you need to set
html, body { height:100%; }
as well
Related
I have the following CSS setup for use on two different pages;
#content{
width:960px;
margin-top:0px;
height:auto;
font-family:arial;
font-size:1.em;
background-color:#f2f2f2;
}
#left-div {
width:600px;
padding-top:20px;
text-align:center;
line-height:.5em;
display:inline-block;
float:left;
}
#right-div {
width:300px;
margin-top:40px;
margin-right:20px;
display:inline-block;
text-align:center;
float:right;
background-color:#e0e0e0;
}
#isa-left {
width:440px;
margin-top:40px;
margin-left:30px;
margin-right:10px;
display:inline-block;
text-align:justify;
float:left;
}
#isa-right {
width:440px;
margin-top:40px;
margin-left:10px;
margin-right:30px;
display:inline-block;
text-align:center;
float:right;
}
On the page where I use left-div and right div like this;
<div id="content">
<div id="left-div"> Content </div>
<div id="right-div"> Content </div>
</div>
here is what happens. In FF, IE, Safari, and Chrome it looks just I expect with the two divs next to each other with a background color of #f2f2f2 from the content div.
On the second page where I use the isa-left and isa-right with the same setup as above what happens is that the inner divs are still showing where I expect them but now the background color from the content div is not showing.
After finding a post on here with the same problem I added this line overflow:auto; to the content div.
Now both pages in FF the content appears outside of the content div, 960 pixels to the right, with the background color showing. In IE, Safari, and Chrome both pages appear perfectly.
My question is what is causing the two inner divs to escape the content div in FF once I added overflow:auto;? Or is there a way to fix it so that the background color shows through on the second page without using overflow:auto;?
Any suggestion is appreciated.
Try this. I think it might be the solution to your problem.
http://jsfiddle.net/6dBdx/
-Code Reference -
CSS:
.wrapper {
width:400px;
margin-top:0px;
height:auto;
font-family:arial;
font-size:1.em;
background-color:#f2f2f2;
margin-bottom:15px;
}
.wrapper > div.box {
padding-top:20px;
text-align:center;
line-height:.5em;
border:thin solid #999;
/* Adding this for example purposes */
height:150px;
width:150px;
}
.pull-right {
float:right;
}
.pull-left {
float:left;
}
.clear-fix {
clear:both;
}
HTML
<label>Float Left Only</label>
<div class="wrapper">
<div class="pull-left box">One</div>
<div class="pull-left box">Two</div>
<div class="clear-fix"></div>
</div>
<label>Float Left & Right</label>
<div class="wrapper">
<div class="pull-left box">One</div>
<div class="pull-right box">Two</div>
<div class="clear-fix"></div>
</div>
Quick notes, don't forget to add a clear div after a float, so that elements show up correctly after floating an element. Also, if you want an element to line up next to each other, try using float:left as a rule of thumb, unless you want the elements to line up on the right in which case... float:right
How to, as the title suggests, make a div didn't move. So, when the user scroll our web, the content is moving but not the div-element. If let say the div-element I want to implement is a sidebar, how can I do that with only a CSS script? (or with HTML5 power).
<style type="text/css">
div.fixedDiv{position:fixed;top:0;left:0;}
</style>
You can try this... Jsfiddle
Html
<div class="wrapper">
<div class="fixed"></div>
</div>
Css..
.wrapper { position: relative; height: 1500px; background:red; }
.fixed { position: fixed; left:0; top:50; width:100px; height:100px; background: green; }
<style>
#yourdiv{
position:absolute;
left:100px;
top:150px;
}
</style>
<div id="yourdiv">Hello I'm div</div>
Adjust the coordinates left and top as you desire.
Anyways you can see css positionings here.
I'm trying to create a simple markup with header+content+footer+sidebar. The sidebar must float above the header and content element, and if it's taller than the content, it must push the footer down (like this: http://jsfiddle.net/gWLFN/7/).
The HTML:
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="header">header</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
The CSS:
#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar {
float:right;
margin-top:50px;
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
The problem is that in IE7, the sidebar pushes down the other elements. I think it's because the total widths of header+sidebar is greater than wrapper width. I have found a lot of posts about float:right problem in IE7, but all of them are for widths that doesn't exceede the wrapper.
I have choosen float:right instead of absolute positioning because the position of the footer must depend on sidebar height (if someone knows how to do this with absolute positioning, perfect!).
I would appreciate any idea to solve this.
You are almost there, the order of the HTML structure is slightly muddled and you are forcing CSS widths rather than letting the browser work out the best fit.
You can remove the width values from the nested CSS classes (except #sidebar) as, by default, they take up any remaining width unless they have one specified. Then you just need to swap #header and #sidebar round in the HTML structure and you are pretty much sorted.
Please note, since we have swapped round #header and #sidebar, the margin-top within #sidebar has been changed.
CSS
#wrapper {
width:500px;
}
#header {
height:100px;
background-color:red;
}
#content {
height:300px;
background-color:green;
}
#footer {
height:100px;
background-color:blue;
}
#sidebar {
float:right;
margin-top: -50px; /*changed this to -50px */
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
HTML
<div id="wrapper">
<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
Working example: http://jsfiddle.net/gnx2z/
I've dealt with divs collapsing on their content when using float positioning (e.g. solving with overflow:hidden), but am trying to learn absolute/relative positioning and can't figure out why the container div is collapsing. My test case:
<html>
<head>
<style type="text/css">
body {
background-color:#eee;
}
#content {
margin:0 auto;
position:relative;
border:1px solid red;
width:800px;
display:block;
background-color:white;
}
#header {
border:1px solid black;
background-color:#777;
color:white;
width:800px;
position:absolute;
left:0;
top:0;
}
#leftcol {
position:absolute;
border:1px solid black;
background-color:#ddd;
width:200px;
top:100px;
left:0;
}
#rightcol {
position:absolute;
top:100px;
left:205px;
border:1px solid black;
background-color:#ddd;
width:500px;
}
</style>
<title>CSS Positioning Example 1</title>
</head>
<body>
<div id="content">
<div id="header">
<h1>The Awesome Website</h1>
</div>
<div id="leftcol">
<h2>About</h2>
<p>
This website is so awesome because it was made by someone
and that is really all there is to it. There.
</p>
</div>
<div id="rightcol">
<p>This is where I'm going to put some real body text so that it goes
on and on for a while and so I can get a sense of what happens when
the text in the paragraph keeps going and the box containing it keeps
going on as well.
</p>
</div>
</div>
</body>
</html>
What's going on here? Why does the red-bordered content div collapse even though it contains the other divs?
It is because all of its content is styled as position:absolute. This takes those elements out of flow and (layout-wise) it's like they don't even exist. Consider using position:relative to position the content.
You really need to read these articles at A List Apart
CSS Positioning 101
CSS Floats 101
Your question is why the div with red borders don't expand to it's content. As Joseph said the problem is that you take the elements out of the document flow. Positioning an element absolutely make the element's position independent from it's parent and siblings.
I fixed your code using CSS float property. Take a look here.
I highly recommend you read those articles.
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.