I have this code
<!-- <body> (automatically added by jsFiddle) -->
<header id="header">
<h1>Title</h1>
</header>
<div id="mainContent">
Some text. End.<br />
</div>
<!-- </body> -->
How can I stretch #mainContent to fill all the available space below #header ?
That's for a Windows 8 app, so I can use CSS 3 (including -ms-grid-*) and JavaScript without worrying about browser support!
You can use display:table property for this:
HTML
<div class="parent">
<header id="header">
<h1>Title</h1>
</header>
<div id="mainContent">
Some text. End.<br />
</div>
</div>
CSS
body,html{
height:100%;
}
.parent{
display:table;
height:100%;
box-sizing:border-box;
width:100%
}
#header, #mainContent {
background:red;
display:table-row;
}
/* How can I make #header to fill the full available left space */
#header {
height:10%;
background:green;
}
Check this http://jsfiddle.net/cD2RK/3/
Related
I wanted to fit this image (galeria.jpg) to the window but It adds scrolling panel at the bottom and the border over the menu. It shouldn't go like this...
HTML CODE:
<body>
<div class="tlo">
<div class="logo">
<img src="logo.jpg" />
</div>
</div>
<div class="galeria" >
<img src="galeria.jpg" />
</div>
<div class="menu">
<ul>
<li>STRONA GŁÓWNA</li>
<li>KONTAKT I LOKALIZACJA</li>
<li>ZAKRES CZYNNOŚCI NOTARIUSZA</li>
<li>OPŁATY W KANCELARII</li>
<li>PRZYDATNE INFORMACJE</li>
</ul>
</div>
</body>
CSS:
body {
background-color:#ffffff;
padding:0px;
margin:0px;
}
.logo{
position:absolute;
margin-left:-400px;
left:50%;
}
.tlo{
height:230px;
width:100%;
background: #e0e0e0;
}
.galeria{
width:100%;
}
JSFiddle: http://jsfiddle.net/SfG3A/
Try this
.galeria img{
width:100%; // Remove this and add below style
max-width:100%;
vertical-align:bottom; // to remove the white space below the image
}
When you give width 100% it takes the width of the image and when you give max-width it restricts the image to have the maximum width of its parent element.
You can add a overflow-x: hidden to the div who contain the galleria.jpg
http://jsfiddle.net/SfG3A/1/
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 two-column layout. I have a #mainContainer div that contains all of the following (except the #footer):
Across the top: a header div (#intro)(contains a small gradient image),
and a #hero div (contains images)
To contain the two columns: a #content div
Within the #content div on the left: a #mainContent div
Within the #content div on the right: a #sideBar div
Across the bottom (outside the #mainContainer div): a #footer div on the bottom
(including a gradient image like the header div)
Simple, right? But I'm having trouble getting the #mainContainer div to be at the top of the browser (no spaces or that 6-8px default margin/padding all browsers have at the top) and getting the #footer div to span across the entire bottom of the browser window (not inside any of the Div's ). (disregard inline styles in footer). Could someone help me out?
UPDATED: ADDED HTML
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}
#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/
}
#intro {
/*top:0;*/
margin: 0;
text-align:left;
}
#hero {
width:960px;
padding-left:10px;
padding-right:10px
}
#content {
width:960px;
padding-left:10px;
padding-right:10px;
}
#mainContent_left {
float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}
#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}
#footer {
width:960px;
clear:both;
background:#cc9;
}
HTML:
<title>Descriptions </title>
<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>
<body>
<div id="mainContainer">
<div id="intro"><h2>introducing</h2></div>
<div id="Hero">
<ul>
<li class="name"></li>
<li class="textJoin">is a member of </li>
<li class="name"></li>
</ul>
</div>
<div id="content">
<div id="mainContent">
<h3>First Topic title</h3>
<p>floated left image and text</p>
<p>Some content</p>
<p>Some content</p>
<h3>Second Topic title</h3>
<p>Some content</p>
<p>Image here</p>
<h3>Third Topic title</h3>
<p>(floated left image here) Some text</p>
<h3>Fourth Topic title</h3>
<p>(floated left image here) Some text</p>>
<h3>Fifth Topic title</h3>
<p>(floated left image here) Some text</p>
<p>Image here</p>
<p>(link to FAQ page)</p>
</div>
<div id="sideBar">sidebar content
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="footer_warranty">footer content
<div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
<div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
<p style="clear:both;" />
</div>
</div>
<p style="clear:both;" />
</div>
</body>
</html>
I am unable to reproduce your problem. However, I have created a fiddle for you, where I have also added some CSS reset rules which should take care of a problem such as this, cross any and all browsers.
You should always use a reset CSS when you start a new site. That way, it's all on your terms and you don't have to "code away" specific browser behaviour.
I have also created some placeholder code since you did not provide any.
I hope the reset fixes your problem.
http://jsfiddle.net/dekket/eERsK/
Edit:
Check this new fiddle. Out to work.
http://jsfiddle.net/dekket/6bTkZ/
Try importing Meyer's reset stylesheet:
http://meyerweb.com/eric/tools/css/reset/
try adding float:left and overflow:hidden to your #mainContainer
you need to set the html and body css margin and padding properties to 0.
use the following in your css file
html, body {
margin: 0;
padding: 0;
}
I got a little problem and nothing I test seems to work.
My HTML:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
CSS:
#top_parent {
background:#f00;
height:100px;
}
#top{
background:#0f0;
float:right;
position:relative;
height:100px;
width:50%;
}
#content{
top:-50px;
background:#00f;
<!-- position:relative;-->
height:100px;
width:80%;
margin:auto;
}
#parent{
background:#000;
height:350px;
width:100%;
}
#bottom {
height: 50px;
background:#ff0;
bottom:0px;
<!--position:absolute; -->
<!--position:relative; -->
}
Now my problem is, the footer won't get under the parent div, it stays in the content area. What am I doing wrong?
jsF link: my source
Thanks for the help.
You have not closed this div:
<div id="content">Here comes random stuff<div>
Should be:
<div id="content">Here comes random stuff</div>
You could see this easily if you indented your divs:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>
Not sure if you copy-pasted or if this is a typo when you posted your code, but this line:
<div id="content">Here comes random stuff<div>
Should have a closing </div> tag at the end instead of that opening <div> tag. If that's actually your HTML, then it would not be grouping the divs the way you want/expect.
I think you have a wrong html:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div></div>
<div id="content">Here comes random stuff<div>
</div>
<div id="bottom">Footer</div>
You didn't close div parent, nor content
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
<div id="bottom">Footer</div>
</div>
Interpreting that you want the "bottom" div inside the "parent", else:
<div id="parent">
<div id="top_parent">Top_background
<div id="top">Top_Picture</div>
</div>
<div id="content">Here comes random stuff</div>
</div>
<div id="bottom">Footer</div>
Also, in your css you should enable the position:relative for #content div, else the top parameter won't work.
Try if this solves the problem.
In order to position footer after the content divs you have to float content divs first and then add clear:both css command to the footer. So your tree sould look like this:::
<div class="wrapper"><div class="left"></div><div class="right"></div><br clear="all" /><div class="footer"></div>
For this example your css should be as following:::
div.wrapper{
width:80%;
position:relative;
margin:0 auto;
}
div.left{
float:left;
width:60%;
background:green;
height:200px; /height only for testing so you could see the result/
}
div.right{
float:right;
width:30%;
background:red;
height:200px; /height only for testing so you could see the result/
}
div.footer{
clear:both;
height:40px;/height only for testing so you could see the result/
background:yellow;
width:100%;
}
Have you tried taking out that "bottom" attribute in the #bottom rule?
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>