I've got some code:
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
Container width is for example 900px.
At the #top i set a background using body.
But I can't use background in the #bottom becouse it will crashed when it will be wider eg 1080px(background will be seen only on the #container). How to do this?
edit1:
body
{
background-image: url("images/bg_main.png");
background-repeat:repeat-x;
}
#top
{
background-image: url("images/top_bg.png");
height:50px;
}
#container
{
margin: 0;
width: 1024px;
background:#fff;
}
#footer
{
background-image:url("images/bottom.png")
}
but it creates inside container (i need to create bottom bg outside container, when site wiill be wider)
edit2:
I think that I found an solution:
html{;background-image:url('images/bottom.png');background-repeat:repeat-x;background-position:left bottom;}, and then set div height as a bottom.png
Do you mean something like this?
html:
<body>
<div id="container">
<div id="top"></div>
<div id="bottom"></div>
</div>
<div id="footer"></div>
</body>
and with the addition of the following css:
#footer
{
width:100%;
height:40px; //Or something else you'd like
background-color: yellow; //Or the image you want
}
I suggest try placing your #bottom outside #container than, because within #container you can't raise your width more than that of #container.
Try this:
#container{
width:1024px; //or whatever
}
#bottom{
height:40px; //or whatever
width:100%;
background:url("images/bottom.png") repeat-x center;
}
Related
I am trying to make an html page with 2 divs : "top" and "main"
The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.
Here is what I tried:
CSS CODE :
html,body{
height:100%;
}
#top{
background-color : red;
padding:10px;
border:1px solid;
}
#main{
background-color : blue;
height:100%;
padding:10px;
border:1px solid;
}
#content1{
background-color:yellow;
}
#content2{
background-color:yellow;
height :100%;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="top">
<div id="content1">content1</div>
</div>
<div id="main">
<div id="content2">content2</div>
</div>
</body>
</html>
Here is the jsFiddle
As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?
EDIT:
Thank you for all your solutions.
I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.
Here is my final HTML CODE:
<!DOCTYPE html>
<body>
<div id="content1" class="row">
<div class="subcontent">
<div class="subContentContainer">
content1
</div>
</div>
</div>
<div id="content2" class="row">
<div class="subcontent">
<div class="subContentContainer">
content2
</div>
</div>
</div>
</body>
Here is the corresponding CSS CODE:
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
body{
display:table;
}
.row{
display:table-row;
width:100%;
}
#top{
height:100px;
}
#content1{
background:#aa5555;
padding:10px;
}
#content2{
background:#5555AA;
height:100%;
}
.subcontent{
padding : 10px;
height:100%;
}
.subContentContainer{
background-color:yellow;
height:100%;
}
And here is the corresponding Jsfiddle.
DEMOJF
For doing this you have to use display:table so edit in that way
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
}
.row {
display: table-row;
width: 100%;
background: red;
}
#top {
height: 100px;
}
#content1 {
background: yellow;
height: 100%;
}
#content2 {
overflow: scroll;
height: 100%;
border: 1px solid black;
}
<body>
<div id="top" class="row">
<div id="content1">content1</div>
</div>
<div id="main" class="row">
<div id="content2">content2</div>
</div>
</body>
What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :
This will make something like this :
#container {
background-color : #5555AA;
min-height: 100%;
}
#content2 {
background-color:yellow;
margin: 10px;
}
http://jsfiddle.net/5cEdq/25/
I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.
try this:
http://jsfiddle.net/5cEdq/16/
CSS :
html,body{
height:100%;
Padding:0;
margin:0;
border:0;}
Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.
Is there a magic css property to fix this?
Yes there is. It's called box-sizing
Read this article for more info about the box-sizing property.
FIDDLE
So if your header was say 64px high, then you'd do something like this:
.container {
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>header</header>
<div class="container">
<div class="content">
content here
</div>
</div>
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
I want to know how do you guys make the header-side-main-footer layout in html.
Like this:
<html>
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
</html>
The div.header and the div.footer have a fixed height. And the div.content will hold all the rest height,no scroll bar for the body.
And the div.side will have a fixed width,and the div.main will hold all the rest width.
The div.side can have y-scroll bar.
When the window resize,the div.content will expand to fix the height,no scroll bar.
BTW,sometimes the div.side and the div.main may exchange the position like this:
<html>
<div class="header"></div>
<div class="content">
<div class="main"></div>
<div class="side"></div>
</div>
<div class="footer"></div>
</html>
How to you make it?
update:
div.main can not made as overflow:hidden,since it is the container which I use for ceate the map.
var map=new google.maps.Map('main',{});
Gave div.side a height and width and then overflow:scroll
Like:
div.side{
height:60%;
width: 60%;
overflow: scroll;
}
and div.content overflow:hidden
That is how I would do it in html, well I would add a wrapper around it to make centering easy, but that is just me. I think you want to know about the css, and to be hones, there are going to be many ways one might go about that, the simples being:
.header {
width:whateverpx;
margin:0 auto;
}
.content {
width:100%;
position:relative;
}
.content:after {
clear:both;
content:"";
display:none;
}
.side {
float:left;
position:relative;
width: your width for it;
}
.main {
float:left;
position:relative;
}
.footer {
height: whateverpx;
width: whateverpx;
margin:0 auto;
}
and, if you want the content centered add a wrapper around it and add
.wrapper {
width:whatever;
marging:0 auto;
}
or
no wrapper, do this for .content instead
.content {
width: whatever
margin:0 auto;
position:relative;
}
I'm creating a complex website, which has quite a bit of code. So I created a JS Fiddle script that re-creates the problem I'm facing.
In short, we have a main container, and in the container is a left column floated to the left and the main content column flatting to the right.
As you can see in the example, the #sideColumn is not expanding to cover 100% of the height of the #container as the #mainColumn grows. The "blue" should automatically extent from the top (as shown) all the way to the bottom of the container as the #mainColumn grows/decrease. In other words, the #sideColumn should always equal the height of the container (automatically).
Here's the Fiddle - what am I doing wrong? http://jsfiddle.net/dLyfD/
Could do something like this:
HTML:
<div id="container">
<div id="sideColumn"></div>
<div id="mainColumn">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
CSS:
#container {
width:500px;
overflow:hidden;
border:1px solid #CCC;
position: relative;
}
#sideColumn {
padding:20px 0;
width:200px;
overflow:hidden;
background:blue;
position: absolute;
height: 100%;
}
#mainColumn {
padding:20px 0;
float:right;
width:300px;
background:yellow;
}
.test {
width:250px;
height:50px;
margin:15px 25px;
background:red;
}
http://jsfiddle.net/dLyfD/1/
Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.