If I set a min-height: 700px; on my sidebar, it works fine, however if the content length goes beyond 700 px, then the sidebar ends and the page content takes up the full width of the page. I want the sidebar to go down the length of the page, as long or short as the content is. How can this be done?
Here's my sidebar's css code:
#sidebar
{
float: right;
min-height: 700px;
min-width: 25%;
background-color: #FFFFFF;
}
Changing the height to 100% causes the sidebar to disappear completely.
Here's the html code;
<bod>
<div id="sidebar"></div>
<div id="content">Content here....</div>
</div>
Give it a position:absolute; with bottom:0px;
Check it out : http://jsfiddle.net/AliBassam/McJG8/
HTML
<div id="parentDiv">
<div id="content">Content here....</div>
<div id="sidebar"></div>
</div>
CSS
#parentDiv
{
position:relative;
min-height:700px;
}
#sidebar
{
position:absolute;
right:0px;
bottom:0px;
top:0px;
width:100px;
}
The #parentDiv now have min-height:700px; if its stretched by its contents, the #sidebar will stretch as well.
Not knowing the exact requirements of what you're trying to do, this sounds like a solution that could easily be fixed using Faux Columns.
Related
See the HTML and CSS below.
When the h1 tag is uncommented, a scrollbar is added to the page, but I don't know why. I suspect it's because the cards have position:fixed, but I don't know how to get them to look like that any other way besides position:fixed.
I would like the title div to take up 20% of the screen and the card-conveyor-belt div to take up 80% of the screen, regardless of their contents. How can I go about doing this?
HTML:
<body>
<div class="title">
<!--
<h1>
HELLO
</h1>-->
</div>
<div class="card-conveyor-belt">
<div class="card left"></div>
<div class="card center"></div>
<div class="card right"></div>
</div>
</body>
CSS
html,body{
height:100%;
margin:0;
padding:0;
background-color:#ccc;
}
.title{height: 20%;width: 100%;}
.card-conveyor-belt{
height: 80%;
width: 100%;
}
.card{
position:fixed;
width:80%;
height:80%;
background-color:white;
border-radius:5px;
}
.center{
left:10%;
}
.left{
left:-78%;
}
.right{
left:98%;
}
Here is the same code in a jsfiddle if you'd like to run/interact with it.
Simply use margin: 0 to fix your problem:
Jsfiddle: https://jsfiddle.net/dj3mabgz/
h1 {
margin: 0;
}
Like the other answer stated, the issue is with the margin on the <h1> tag. By default (at least in Chrome it is default, not certain about other browsers), all <h1> tags have a default margin top value of 0.67em.
Now, since you didn't define where you wanted to position the block inside your .title block, it automatically positioned it at the top. So the result is as you can see in the picture;
The default margin and the default positioning ends up "pushing" all of the content down and forcing the scrollbar to appear.
I want to place a footer div at the bottom of the page. The problem is, I have a dynamic content, so I can not work with "position: fixed;".
The page looks something like this:
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. So the height of the page changes. The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. How can I realize this?
with dynamic content, you can always use this:
sticky-css-footers-the-flexible-way
always helps!! :)
==================================================================================
EDIT
see this demo
CSS
html, body, #container {
height: 100%;
margin:0;
padding:0;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:grey;
}
#content {
padding-bottom: 3em;
}
HTML
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!
Reference : Refer here
You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/
That's the solution you're looking for.
Yo can use this Structure:
position:absolute;
bottom:0;
width:100%;
height:150px;
and set
position:Relative
for its parent.
In my website, I have a footer that has a height of 100px and the css for the footer looks something like the following:
.footnote {
width: 95%;
height: 100px;
position: fixed;
background: url('../images/coolfooter.png') bottom center;
bottom: 40px;
left: 30px;
}
The problem is if I have too much content on my web page, the content starts overlapping with the footer.
I want to restrict the content to only appear above the footer always somehow, so that no content gets overlapped with footer.
How can this be done?
Have you tried z-index? As others have said it's a bit hard to say without looking at the html. I'm not 100% sure what you're asking for.
You basically need to make sure that either the content has a bottom margin greater than or equal to the height of the footer, or (if the content is in a container of some sort) that it's container has a bottom padding equal to or greater than the height of the footer.
Here's a fairly popular reference site for doing this so-called "sticky footer": http://www.cssstickyfooter.com/
Adding overflow:auto to div.content should be sufficient.
<html>
<head>
<style type="text/css">
div.header
{
top:0px;
height:100px;
max-height:120px;
min-height:100px;
}
div.content
{
height:600px;
max-height:750px;
overflow:auto;
}
div.footer
{
height:100px;
max-height:120px;
min-height:100px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
I want to have a full header, while a fixed width of the content in the center of the page. Here's my code:
HTML:
<body>
<div class="header">
<div class="wrap">Header</div>
</div>
<div class="content">
content
</div>
</body>
CSS:
.header{
background:yellow;
}
.wrap, .content{
border:1px solid red;
margin:0 auto;
width:500px;
}
I've used .wrap inside the .header so that the content in the header also has same width as the .content.
Problem:
The layout looks fine, however the problem starts when the width of the browser window gets less than the width of the wrap (ie. 500px). In that case when we scroll the page towards the right side, some part of header background goes missing.
JSFiddle:
Here you can see the jsfiddle (http://jsfiddle.net/QS3nS/1/). You can see the problem if you decrease the browser width so that it the width of output window becomes less than 500px.
Set a min width on the header
.header{
background:yellow;
min-width: 500px;
}
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.