I've been trying to create a page with a container that contains the content, and a right sidebar. Whenever I enter content into the content into the sidebar or content div, it continues into the footer, and the sidebar sometimes moves to the left side of the page.
I feel like I have a Height issue somewhere. I want the container section to be as big as the content/sidebar takes up, but it seems to be overflowing into the footer rather than expanding the container.
Here is an exampe of what my HTML looks like:
<body>
<div class="MainContainer">
<div class="RightSideBar">
Sidebar Text
</div>
<div class=MainContent>
Content Text
</div>
</div>
<footer>
Footer Text
</footer>
</body
And CSS
body{
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
}
footer{
height:20%;
width:60%;
margin-left:auto;
margin-right:auto;
color:white;
}
.RightSideBar{
width:20%;
height:auto;
float:right;
}
.MainContent{
width:80%;
height: auto;
}
Try setting the overflow: hidden; on the .MainContainer
Don't use float, if you know what sizes the elements are going to be, use display:inline-block instead.
Html:
<main>
<div class="content col">articles..</div>
<aside class="col">sidebar..</aside>
</main>
Css:
main {
font-size:0;
}
.col {
font-size:16px;
display:inline-block;
}
.content {
width:80%;
}
aside {
width:20%;
}
Related
I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
I have tow pages of html that contain a footer. I want to stick the footer to the bottom of the page in both pages. It works fine when the page does not have vertical scroll but when the content is a lot and page has scroll footer stands over my contents. Here is my page layout:
<body>
<div id="container">
<div id="header"> Header </div>
<div id="menu"> Menu </div>
<div id="content"> Content </div>
<div id="footer"> Footer </div>
</div>
</body>
and here is my css:
html, body
{
width:100%;
margin:0;
}
#header, #menu, #content, #footer
{
border:thin solid #000;
}
#content
{
width:70%;
margin: 0 auto;
height:100%;
}
#footer
{
position:absolute;
bottom:0;
width:100%;
background-color:#06F;
}
Change your CSS like;
#footer{
width:100%;
background-color:#06F;
}
Here is a working Live Demo.
and if you want the footer stick to the bottom, no matter the content is, try;
#footer{
width:100%;
background-color:#06F;
bottom:0;
position: fixed;
}
But define a height to your footer and add the same amount of padding-bottom to your content, otherwise some text may be hidden by footer
Here is a working Live Demo.
#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;}
body,html {height:100%}
by this way you will get your output
You can try this
#footer {
background-color: #0066FF;
width: 100%;
}
If got a very basic layout, with a header, content container and a footer.
What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).
I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.
Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.
Here is a part of my code:
HTML:
<body>
<div class="background"></div>
<div class="page">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
.page {
position:relative;
height:100%;
z-index:1;
}
.content {
position:relative;
width:850px;
height: 100%;
margin: 0 auto;
background: url(images/content.png) 0 0 repeat-y;
}
I think this what you need (the footer will be always sticked to the bottom)
CSS
html, body {
margin:0;
padding:0;
height:100%;
}
.page {
min-height:100%;
position:relative;
}
.header {
background:#00ff0f;
padding:30px;
}
.content{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer */
text-align:justify;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:15px; /* Height of the footer */
background:#00ff0f;
padding:10px 0; /*paddingtop+bottom 20*/
}
.content {
height:100%; // IE HACK
}
HTML
<div class="page">
<div class="header">Header</div>
<div class="content">
Some Content Here...
</div>
<div class="footer">Footer</div>
</div>
Tested in all major browsers.
DEMO.
What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.
http://ryanfait.com/sticky-footer/
What I did was to use margin:20% on the main div... But I don't think it is the best way:
CSS:
.wrapper {
background-color:#F0C;
float:left;
width:1000px;
height:400px;
margin-left:20%;
alignment-adjust:central;
position:absolute;
}
.maincontent {
background-color:#3F6;
float:left;
width:50%;
margin-left:30%;
}
.leftSidebar {
background-color:#C63;
float:left;
width:30%;
margin-left:-80%;
}
.rightsidebar {
background-color:#66F;
float:left;
width:20%;
}
HTML
<div class="wrapper">
<div class="maincontent">
<!-- main content goes here -->
</div>
<div class="leftSidebar">
<!-- left sidebar content goes here -->
</div>
<div class="rightsidebar">
<!-- right sidebar content goes here -->
</div>
</div>
How can I position the .wrapper to the center? Is there an easy way?
Also, what is the difference between using the left/right properties and margin-left/margin-right?
.wrapper {
width:1000px;
position:absolute;
left:50%;
margin-left:-500px;
}
My answer would be: skip the absolute positioning, and use margin:0 auto; to center your content (no margin on top and bottom, and automatic margin left and right).
.wrapper
{
background-color:#F0C;
width:1000px;
height:400px;
margin:0 auto;
}