I have a nice layout which uses an HTML table to create a scrollable sidebar with a simple header. It works good, you can check it out here: jsFiddle demo
Here is the outline of my solution:
<aside>
<table>
<tr>
<td>
<header>
header
</header>
</td>
</tr>
<tr>
<td class="secondcell">
<div class="remaining">
...
</div>
</td>
</tr>
</table>
</aside>
<article>
...
</article>
with the following CSS styles:
aside {
position: absolute;
left:0; top: 0; bottom: 0;
width: 200px;
}
aside header {
height: 100px;
}
aside table {
width:100%;
height:100%;
}
.secondcell {
height:100%;
width:100%;
}
.remaining {
height: 100%;
background-color: red;
overflow-y: auto;
}
article {
position: absolute;
left: 200px;
padding:10px;
}
But unfortunately, I'm using HTML tables which a lot of people don't like, because it's not semantic, etc etc.
So I wanted to reproduce this layout with CSS formatting, but it doesn't work.
You can check my attempts here: jsFiddle demo2
Maybe it isn't possible at all so I can't do it with CSS using only divs?
You can achieve this very simply through css
if you have the following three classes:
.table {display:table;}
.row {display:table-row;}
.cell {display:table-cell;}
you just replace all table tags with <div class="table"></div>
all tr tags with <div class="row"></div>
all td tags with <div class="cell"></div>
Your updated fiddle
First you do not need display;table to produce such a layout.
You need :
min-height
float {or inline-block if one tells it's bad practice too :) )
overflow.
http://jsfiddle.net/aKzFZ/2
html, body {
height:100%;
margin:0;
}
aside {
float:left;
min-height:100%;
background:red;
border: 1px solid black;
width: 200px;
margin-right:1em;
display:table;
}
aside .remaining {
display:table-cell;
height:100%;
}
aside header {
display:table-row;
height: 100px;
background:white;
border-bottom:1px solid;
}
.scroll {
height:100%;
overflow:auto;
}
article {
overflow:hidden;
margin-right:1em;
}
I think not so semantic to put <aside> in front in the flow, stick in it a <header> and see nowhere a <h1> <hX> ... :)
Related
I have an HTML markup where I inject the text Chapter before every h1 element using the pseudo :before selector. I also used the display:block property so that the label Chapter appears on a separate line. But when I try to apply the text-indent style, only the content inserted through the :before selector is indented. The content of h1 element does not move along with the text "Chapter."
Here is a simplified version of my original HTML.
.chapter{
background-color:grey;
height:100px;
width:200px;
text-indent:50px;
}
.chapter:before{
content:"Chapter 1";
display:block;
}
.l2{
background-color:red;
height:100px;
width:200px;
}
.l3{
background-color:orange;
height:100px;
width:200px;
clear:both;
}
.container{
margin:0.3in;
clear:both;
}
<div class="container">
<div class="chapter">
Getting Started
</div>
<div class="l2">
Level 2
</div>
<div class="l3">
Level 3
</div>
</div>
Actual Result
Only the label "Chapter" is indented.
Expected Result
The h1 content Getting Started should be indented along with the label Chapter.
Here's an alternative to the other provided answers that may help to solve some of the problems mentioned in comments ...
Put the chapter title ("Getting Started") into its own block
Attach the Chapter 1 prefix to .chapter .heading:before instead of the containing block.
Use position: relative on the chapter title block and move it in any direction required. e.g.: left: 50px.
.chapter {
background-color: grey;
height: 100px;
width: 200px;
}
.chapter .heading {
position: relative;
left: 50px;
}
.chapter .heading:before {
content: "Chapter 1";
display: block;
}
.l2 {
background-color: red;
height: 100px;
width: 200px;
}
.l3 {
background-color: orange;
height: 100px;
width: 200px;
clear: both;
}
.container {
margin: 0.3in;
clear: both;
}
<div class="container">
<div class="chapter">
<div class="heading">Getting Started</div>
</div>
<div class="l2">
Level 2
</div>
<div class="l3">
Level 3
</div>
</div>
You can't use text-indent for your pseudo because it only used for only a text, not used for text merged from pseudo and h1. So to resolve this issue you can make a space before h1 to put the Chapter text. Hope this help
.chapter{
background-color:grey;
height:100px;
width:400px;
text-indent: 50px;
}
.chapter:before{
content:"Chapter 1";
display:block;
}
.l2{
background-color:red;
height:100px;
width:400px;
}
.l3{
background-color:orange;
height:100px;
width:400px;
clear:both;
}
.container{
margin:0.3in;
clear:both;
}
<div class="container">
<div class="chapter">
<h1>Getting Started</h1>
</div>
<div class="l2">
Level 2
</div>
<div class="l3">
Level 3
</div>
</div>
I have two divs inside a parent div.
both divs will occupy complete width of its parent.
first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].
below is jsfiddle link:
http://jsfiddle.net/x3ebK/3/
here is the html code:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
I need help in this.
I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div
http://jsfiddle.net/x3ebK/32/
It is convenient to use display:table rather than float like this:
DEMO : http://jsfiddle.net/x3ebK/28/
HTML:
<div id="content">
<div>
<div id="col1">content</div>
<div id="col2">content<br /><br /><br />content</div>
</div>
</div>
CSS:
#content {
height:auto;
position: relative;
width:300px;
background:#ccc;
color:#fff;
display:table;
}
#content > div{
display:table-row;
}
#col1 {
width: 30%;
background:#ff0000;
display:table-cell;
}
#col2 {
width: 70%;
background:#000fff;
display:table-cell;
}
You might want to read this article :
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Hope this helps.
Is this what you are trying to achieve?
Have a fiddle!
CSS
html,body { height: 100%; }
#content {
height:100%;
position: relative;
width:300px;
float:left;
background:#ccc;
color:#fff;
}
#col1 {
width: 30%;
background:#ff0000;
float:left;
height:50px;
}
#col2 {
width: 70%;
float:right;
background:#000fff;
height:100%;
}
Try applying:
position: absolute; and height: 100%; to #col1
and
height: 100%; to #col2
Here is the updated fiddle: http://jsfiddle.net/nqYAp/
Try This#container{ height:100%}#col2{ height:inherit}
hey there is there a way i can align the contents of a div tag to the bottom without using position:absolute. almost all other solutions on the internet uses position:absolute and/or vertical-align:bottom, but is there a way to do this without using position:absolute , let's say for example how do i align the cat in the image to the bottom of the div in this fiddle thanks!
the other solution i was thinking of was filling up the empty space at the top so that the image gets pushed down to the bottom but i also have no clue on how to do that either.
P.S. Please don't suggest using tables in the div, if that's possible.
You could try something like
<div style="border:1px solid black; height:100px; display:table; width:100%;">
<div style="display:table-cell; vertical-align: bottom;">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" />
</div>
</div>
You can use flexbox to solve this problem: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Demo
html
<div class="content">Content</div>
<div class="footerLike">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
css
.content {
height:calc(100% - 102px); /* 100% - height of footer - borders */
}
.footerLike {
border:1px solid black;
height:100px;
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
Demo, as said in comments
<div class="footerLike">
<div class="dummy"><!-- you can put anything here --></div>
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
.footerLike {
border:1px solid black;
height:100%;
}
img {
height: 100%;
display: block;
}
.dummy {
height: calc(100% - 100px);
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
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>
<div>
<h1>Title</h1>
<table>
...
</table>
</div>
Now, the
<h1>
has a margin: 0;
so it is at the top of the div. The height of the div is 300px.
However I'd like the table to be placed at the bottom of the div, eg. valign="bottom" but for the whole table.
Here is what Remy Sharp suggested:
<style type="text/css" media="screen">
#container {
position: relative;
margin: 0;
height:300px;
border:1px solid #000;
}
#container h1 {
margin:0;
}
#tableLayout {
position: absolute;
bottom:0;
border: 1px solid #c00;
}
</style>
<div id="container">
<h1>Title</h1>
<table id="tableLayout">
<tr><td>example cell</td></tr>
</table>
</div>
Looks like it works!
I posted it here so it will always be here.
Try this: http://jsbin.com/emoce
Though it's similar to Darryl's solution. Except I'm not using position:absolute on the wrapping div, but rather position: relative to make the table's position absolute to that.
What about this:
<style type="text/css">
#container {
position: absolute;
margin: 0;
height:300px;
border:1px solid #000; }
#container h1 {
margin:0; }
#tableContainer {
position: absolute;
bottom:0; }
</style>
<div id="container">
<h1>Title</h1>
<div id="tableContainer">
<table id="tableLayout">
<tr><td>...</td></tr>
</table>
</div>
</div>
The only problem is that both the container div and the tableContainer divs need to be absolute positioned. Not sure if this will work for your layout.