I have the following html code:
<html>
<body style="margin:0px; padding:0px;">
<div id="outer" style="height:100%;">
<div id="header" style="height:40px; background:blue;">Header</div>
<div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
<p style="height:1000px">Main</p>
</div>
</div>
</body>
</html>
I only want the vertical scroll to appear on the main div when the content within it exceeds the viewable area, it seems the margin-bottom on the main div is not working.
Can anyone help me with this issue?
You seem to be solving the wrong problem, actually. If you just want to get rid of the scroll bar for the body itself, set body's style to overflow:hidden.
<html>
<body style="margin:0px; padding:0px;overflow:hidden;">
<div id="outer" style="height:100%;">
<div id="header" style="height:40px; background:blue;">Header</div>
<div id="main" style="height:100%; margin-bottom:-40px; background:red; overflow:auto;">
<p style="height:1000px">Main</p>
</div>
</div>
</body>
</html>
This should resolve the margin issue, and then all you have to do is keep the sizes right.
Related
<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
I wrote a website as shown here.
Code is:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
hello
</div>
</div>
CSS can be found in that jsfiddle. The problem is: Only body is scrollable, but header and footer aren't scrollable. As a result, I can't see the footer. How can I fix it?
For best results, expand the output window of jsfiddle
Anytime you find no scroll, is because there is overflow:hidden; property, which should be removed or changed to 'auto'
In your Case:
1) Remove overflow:hidden; or overflow:auto;
2) If you do not want scroll in your content(i.e. portion excluding header & footer)
DEMO
CSS
html,body
{
overflow:auto; /* Or just REMOVE overflow*/
}
#body
{
overflow:auto; /* Or just REMOVE overflow*/]
}
hi i'm trying to create a very simple page but i get lost somewhere.
my idea is to create something with this structure
http://i57.tinypic.com/4r49ia.jpg
very simple... each color is a div.one on top of one another. the black rectangle is the only hard part, a space for a video for youtube.
i did this code but it just get messed up
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;” >
<div id="container” style=“margin:0; padding:0; text-align:center;” >
<div id="header" style="background-color:green; height:110px;width:2000px;">
</div>
<div id="menu" style="background-color:blue; height:70px;width:2000px;”>
<p>text here</p>
</div>
<div id=“content” style="background-color:red; text-align:center; height:800px;width:2000px;”>
# here goes youtube video #
</div>
<div id="footer" style="background-color:yellow;height:200px;width:2000px; ">
</div>
</div>
</body>
</html>
what do i do wrong? please help me.
i get the green line, then a blue line ( but with no text in it ) and the red area is totally missiong. then there's the yellow div... why?
It looks like you're using a mix of regular quotations -> " and the 'smart quotes' that Mac sometimes puts in (if I had to guess). See how the quotations before margin and after white; don't match
<body style="margin:0; padding:0; text-align:center; color:white;” >
Changing the 'smart quotes' back to normal quotes should fix your issue, and right clicking in whatever your editor is and turning off Substitutions/Smart Quotes should prevent it from happening again.
Not sure which editor you are using, but: '"' and this '”' aren't same signs...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;" >
<div id="container" style="margin:0; padding:0; text-align:center;" >
<div id="header" style="background-color:green; height:110px;width:2000px;">
</div>
<div id="menu" style="background-color:blue; height:70px;width:2000px;">
<p>text here</p>
</div>
<div id="content" style="background-color:red; text-align:center; height:800px;width:2000px;">
# here goes youtube video #
</div>
<div id="footer" style="background-color:yellow;height:200px;width:2000px;">
</div>
</div>
</body>
</html>
This will work - you will have to fix empty space (caused by padding/margin) of p tag.
first you have to use either margin or float in layouts, second why are you using such a big pixel value
<div id="main" style="width:960px;margin:0px auto;">
<div id="hdr" style="float:left;width:100%;height:130px;background:orange;">
header
</div>
<div id="bdy" style="float:left;width:100%;height:500px;background:green;">
body
</div>
<div id="ftr" style="float:left;width:100%;height:80px;background:#cccccc;">
footer
</div>
</div>
It's may be because of "width:2000px;". You cant see it in low resolution screen. Try for example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="margin:0; padding:0; text-align:center; color:white;” >
<div id="container” style=“margin:0; padding:0; text-align:center;” >
<div id="header" style="background-color:green; height:110px;width:200px;">
dfdasfasd
</div>
<div id="menu" style="background-color:blue; height:70px;width:200px;”>
<p>text here</p>
</div>
<div id=“content” style="background-color:red; text-align:center; height:800px;width:200px;”>
# here goes youtube video #
</div>
<div id="footer" style="background-color:yellow;height:200px;width:200px; ">
</div>
</div>
</body>
</html>
Happy valentine's day ^_^
replace body tag with this
<body style="margin:0; padding:0; color:white;">
I confirm this comes from your " caracters.
DEMO
Such a code:
<html>
<head>
<style type="text/css">
html, body {height:100px; width:200px}
body {margin:0}
</style>
</head>
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
</body>
</html>
makes the second nested DIV appear outside of parent DIV in all browsers:
where I am expecting all the nested DIVs appear inside of parent DIV:
I want the yellow DIV to fill the rest of width regardless of parent DIV size.
Note that html, body {height:100px; width:200px} is made only to make a screenshot of a decent size. It should be html, body {height:100%; width:200%}
Update
a code with display: inline-block:
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block;">
</div>
<div style="background:yellow; height:100%; display:inline-block;">
lalala
</div>
</div>
produces
Use position property of css
<div style="background:red; position:relative; height:100%">
<div style="background:green; height:100%;position:absolute; top:0px;left:0px; width:50px;">
</div>
<div style="background:yellow;position:absolute;left:50px;top:0px; height:100%;width:100%;">
</div>
</div>
DEMO
OR
Use float property of CSS
<div style="background:red; height:100%">
<div style="background:green; height:100%;float:left;width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
DEMO
You can use either position:absolute or float:left in this case.
An example for position:absolute has been answered by Ankit above
You can use float left for the green div:
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block; float:left"></div>
<div style="background:yellow; height:100%;"></div>
</div>
</body>
You can change the width of html/body or the red container div and the yellow div will grow/shrink appropriately:
http://jsfiddle.net/RapKB/1/
Edit:
Whoops, you don't need inline-block.
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }