I'm trying to create a footer-type block that will sit at the bottom of a block, but which will collide with elements at the top of the block when resized.
With a table, this would be easy:
<table style="height: 100%;" border="1">
<!-- border so you can see how it resizes -->
<tr id="TOP" style="height: 3em;"><td>TOP</td></tr>
<tr id="GAP"><td>GAP</td></tr>
<!-- content only so you can see what's going on;
I want this to render as empty space -->
<tr id="BOTTOM" style="height: 3em;"><td>BOTTOM</td></tr>
</table>
but I'd like to do this without using tables.
http://www.cssstickyfooter.com seems to have an answer:
<div id="wrap">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
html, body { height: 100%; }
#wrap { min-height: 100%; }
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
Related
I'm playing with flexout. I wanted to create the typical layout of a header content area and footer
Now when I set the body, and the main divs to 100% height the footer is truncated. Is this a content area,
See this plnkr
<html style="height: 100%">
<body style="height: 100%">
<div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
<div style="width: 600">Header</div>
<div style="width: 500;display: flex;height: 100%">
<div style="width:300">Nav</div>
<div>Content</div>
</div>
<div style="height:50px">footer</div>
</div>
</body>
</html>
[
what am I missing?
Just add this css:
body {
margin: 0;
}
The body have by default a margin of 8px.
Most browsers will display the element with the following default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
Copied from W3C - HTML body Tag.
Here's a godd starting point for you:
It offers a completely responsive flex design with header and footer.
body,html{
margin:0;padding:0;
height:100%;
}
.Flx{
display:-webkit-flex;
display:-ms-flex;
display:flex;
}
.Wrap{
margin:0 auto;
height:100%;
max-width:600px;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.Header{
-webkit-flex:0 50px;
-ms-flex:1;flex:0 50px;
background:#ccc;
}
.Content{
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
nav{
-webkit-flex:0 1 300px;
-ms-flex:0 1 300px;
flex:0 1 300px;
background:#eee;
}
.Footer{
-webkit-flex:0 50px;
-ms-flex:1;flex:0 50px;
background:#ccc;
}
<div class="Flx Wrap">
<div class="Flx Header">Header</div>
<div class="Flx Content">
<nav class="Flx">Nav</nav>
<div>Content</div>
</div>
<div class="Flx Footer">footer</div>
</div>
You want to remove the margin on your body tag.
To be sure you make it look in every browser the same you can do a so called css reset.
Browsers can have different default styles. This short css file will reset all default styles to be the same.
Solution
body {
margin: 0;
}
<html style="height: 100%">
<body style="height: 100%">
<div style="height:100%;display:flex;background-color: lightblue;flex-direction:column">
<div style="width: 600">Header</div>
<div style="width: 500;display: flex;height: 100%">
<div style="width:300">Nav</div>
<div>Content</div>
</div>
<div style="height:50px">footer</div>
</div>
</body>
</html>
I need to
1.Middle center align a div(contentcontainer) which contains image and text inside another div container.
2.Render the image and text for different devices so it looks nicely on both mobile and desktop devices.
Please note
1.The content html for the image and text will be sent dynamically so the height of the content container is flexible.
2.The size of the original image and length of the text are different each time so the width and height of the maintainer cannot be fixed values
3.This needs to support android and ios browsers(mainly safari and chrome).
**JSFIDDLE*
http://jsfiddle.net/1o8vuqbd/1/
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
#maincontainer {
height:100%;
width:100%;
padding:5px;
background-color:red;
}
#contentcontainer {
height:100%;
width:100%;
position: relative;
background-color:pink;
}
Here is the updated code.
HTML:
<div id="maincontainer">
<div id="contentcontainer">
<img src="http://placehold.it/150x150" style="float: left;">
<div style="text-align:left;">
<div>This is the title</div>
<div>This is the body</div>
</div>
</div>
</div>
CSS:
#maincontainer {
height: 500px;
position: relative;
width: 500px;
background-color:red;
}
#contentcontainer {
background-color: #FFC0CB;
overflow-y: auto;
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
How would i make my middle div take the remaining space left in width, but still staying in its place beside the 2 other divs?
Also if i remove either of the 2 divs on the sides, the main div should just take what space there is left?
Code:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
http://jsfiddle.net/U3Hr5/2/
My suggestion is using a table since you want all of them to be on the same row but with their own heights.
Html:
<div class="row-fluid">
<table style="width: 100%">
<tr>
<td class="sidebar">1</td>
<td class="content-box">2</td>
<td class="sidebar">3</td>
</tr>
</table>
Css:
.sidebar {
width:225px;
background-color:blue;
}
.content-box {
background-color:red;
}
Here is the fiddle edit:
http://jsfiddle.net/mDpEX/
//Flipbed
If you don't want to use table for layout, you can make use of css3 display table, table-cell properties,
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
height: 100px;
}
#left, #right {
width: 150px;
background: green;
}
#middle {
background: gray;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
jsfiddle
More on css display properties
I assume you want something like this.
The HTML:
<div class="row-fluid">
<div class="span12">
<div class="sidebar">1</div>
<div class="content-box">2</div>
<div class="sidebar">3</div>
</div>
</div>
The CSS:
.sidebar {
float:left;
width:225px;
background-color:blue;
}
.content-box {
clear:left;
background-color:red;
width:225px;
}
Hope this helps.
Actually i didn't get your question correctly. If you are looking to align your div on to the remaining space after your first div ie after sidebar div simply put width of content-box as 50%(or the size you want).
It depends upon how much you want the layout to respond to resizing without using JavaScript and what browsers you're trying to cater for. If your layout is essentially static and you just want to respond to width changes then you can use something like this.
http://jsfiddle.net/U3Hr5/4/
HTML
<div class="row-fluid">
<div class="span12">
<div class="left sidebar">1</div>
<div class="content-box">2</div>
<div class="right sidebar">3</div>
</div>
</div>
CSS
.span12 {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
width: 225px;
background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
margin-left: 225px;
margin-right: 225px;
background-color:red;
}
You can try something like this http://jsfiddle.net/kKGVr/
Basically, if you don't wrap the content in a containing div it will expand to fill the available space - you can test this by removing the divs called #left or #right. This will also allow you to add a footer because no absolute positioning is used.
It will fall down, however, if the central column becomes longer than the side columns... solution? Not sure, perhaps use javascript to adjust the height of the side columns so they are always at least as long as the central column.
HTML:
<div id="wrapper">
<div id="right">...</div>
<div id="left">...</div>
content here
</div>
and CSS:
#left{width: 200px;background:#f00;float:left}
#right{width:200px;background:#0f0;float:right}
Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.
I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.
I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8"/>
<title>My Page</title>
</head>
<body>
<header id="masthead" role="banner">
<img src="jep.jpeg" alt="My Page">
<h2>Welcome!</h2>
<p>Sign in Register</p>
</header>
<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>
Here is the CSS code:
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.
Just give your masthead a height.
JSFiddle
You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead
Assuming you need a responsive design:
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
Sign in Register
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%
Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.
I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:
HTML:
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p>Sign in Register</p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
and CSS:
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
EDIT: Using divs.
This is a bit messy, but it works. It's been a while since I've used div for positioning like this.
HTML:
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p>Sign in Register</p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
CSS:
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}
Any way to get the red area to fill the rest of the viewable area but not extend into the footer like it is now? I also need the infoContent part to be scrollable. The height of the header portion is variable.
I found a bunch of couple year old answers which said to use JavaScript, but are there any techniques that can be used in modern browsers to avoid that?
HTML:
<div id="page">
<aside id="infoBar">
<header>Variable Sized Header</header>
<div id="infoContent">
<div>First Content Item</div>
<div>Second Content Item</div>
<div>Third Content Item</div>
</div>
</aside>
<footer id="footer">Footer</footer>
</div>
CSS:
#footer { position:fixed; bottom: 0; height: 50px; background-color: rgba(0, 0, 255, 0.5); width: 100%;}
#infoBar { position: fixed; right:0; top: 0; bottom: 50px; padding: 5px; border: 1px solid black; width: 200px; }
#infoBar > header { height: 50px; }
#infoContent { height: 100%; background-color: red; overflow-y: auto; }
#infoContent > div { margin: 5px; height: 50px; background-color: yellow; }
Here's a fiddle to play around with: http://jsfiddle.net/gWmtD/
Using a table was the first thing that came to mind: http://jsfiddle.net/gWmtD/9/
I used inline CSS because it was easier for me to prototype with and you can easily see the changes I've made.
<div id="page">
<aside id="infoBar" style="overflow-y: auto;">
<table style="height:100%; width:100%;">
<tr>
<td>
<header>
Variable Sized Header
</header>
</td>
</tr>
<tr>
<td style="height:100%; width:100%;">
<div id="infoContent">
<div>First Content Item</div>
<div>Second Content Item</div>
<div>Third Content Item</div>
</div>
</td>
</tr>
</table>
</aside>
<footer id="footer">Footer</footer>
</div>
Edit: To enable the scrollbar for the aside when you scrunch the page down in FireFox, add the following property:
overflow-y: auto;
Which will make the y scrollbar appear only when it's needed. This happens by default in Chrome, and can be turned off in Chrome by setting:
overflow-y: none;
A quick google search reveals the overflow method for the scroll bar: http://www.w3schools.com/cssref/pr_pos_overflow.asp
You should look into css wrapper classes for your other problem as a start.