For some reason my (html) is not rendering proprely I have to push table#footer to the bottom. I have situation like this:
<div id="container">
<table id="footer"></table>
<div id="text"></div>
</div>
Is it possible in css to push first child element to the bottom without position absolute?
I need to keep table just after div#text.
Consider flebox and order like this:
#container {
height:80vh;
border:1px solid;
display:flex;
flex-direction:column;
}
#footer {
order:1;
margin-top:auto;
border:1px solid green;
height:20px;
width:100%;
}
#text {
border:1px solid orange;
height:20px;
}
<div id="container">
<table id="footer"></table>
<div id="text"> text</div>
</div>
Related
I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!
Any help would be appreciated, thank you! :)
Here is the JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/
HTML:
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
CSS:
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
It's already working for the snippet you showed. I just put a background color on the div.form so you could see.
In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.
Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.
.child1 {
background:#082a46;
margin:0;
}
.wrapper {
border: 1px solid #ccc;
width:970px;
margin: 0 auto;
}
.blurb {
color: #fff;
width:200px;
background-color: blue;
height:400px;
float:left;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
float:left;
}
<div class="child1">
<div class="wrapper">
<div class="blurb">
</div>
<div class="form">
</div>
</div>
</div>
You can also place 2 divs side by side using display:inline-block on the two divs.
(If you want it responsive, define the width of the child with % and not pixels.)
.child1 {
background:#082a46;
}
.wrapper {
border: 1px solid #ccc;
}
.blurb {
color: #fff;
background-color: blue;
width:200px;
height:400px;
display:inline-block;
}
.form{
background-color:#9c0b0e;
width:100px;
height:400px;
display:inline-block;
}
<div class="child1">
<div class="wrapper">
<div class="blurb"></div>
<div class="form"></div>
</div>
</div>
* {
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
The text header is in the span label,it is a inline element,why it can't be displayed at the same line (or say,at the same height) with div header_inside?
To add margin-top:-20px; in css of div.header_inside can make text in span displayed at the same line with div header_inside,it is not my problem.
A div is, by default, display: block so it generates a block box with line breaks before and after it.
If you want it on the same line as some inline content, you'll need to change it to display: inline, display: inline-block, etc.
A div is a block element and need all the space. So no other element can be placed beside a block element. So you have to change the display of the div to inline or inline-block. You can change your code to the following:
* {
padding:0;
margin:0;
}
div.header {
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
display:inline-block;
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
}
<div class="header">
<span>header</span>
<div class="header_inside">header_inside</div>
</div>
You can use the "inline-block" property, so still a inline element but u can add width and height
<!DOCTYPE html>
<html>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.header{
width:300px;
height:150px;
border:1px solid red;
}
div.header_inside{
margin:0 auto;
width:150px;
height:100px;
border:1px solid red;
display: inline-block;
}
</style>
<body>
<div class="header"><span>header</span>
<div class="header_inside">header_inside
</div>
</div>
</body>
</html>
I'am trying to have header,content and footer as dynamic fields. Tried a lot of different solutions, and it must work in multiply instances. I need a the scroller only in content area, so I haven't used absolute zero on the footer. But uses table layout.
If you look at the code snippet, you can see that the content #wrapper(yellow) have the same size as content. But I can't get the scoller when content (#overflow, black) get heigher than the wrapper.
I know a little script can solve this, but is it possible just With CSS??
The link below is something simular but there is no good answer. Maybe this can be, If it is possible to get a working scroller in content area.
CSS 100% height layout. Fluid header, footer and content. In IE10 and firefox
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
#wrap {
height: 150px;
width: 400px;
display:table;
position:absolute;
text-align:center;
table-layout:fixed;
border:1px solid black;
}
#header{
display:table-row;
border:1px solid red;
background:green;
}
#content{
height: 100%;
background:blue;
display:table-cell;
}
#wrapper{
width:100%;
min-height:100%;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
#footer{
width: 100%;
display:table-row;
background:green;
}
</style>
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="content">
<div id="wrapper">
<div id="overflow" style="height:50px;width:1px;border:10px solid black;"></div>
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
You should specificy a height for the wrapper element
#wrapper{
width:100%;
/*min-height:100%;*/
height:100px;
box-sizing:border-box;
border:10px solid yellow;
position:relative;
overflow:scroll;
display:block;
}
Here the working Fiddle with your example.
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I'm having trouble in aligning divs in my project. I'm expecting something like this:
but what i've done so far is like this one:
All divs have class "inline"
CSS:
div.inline{
float: left;
}
Thanks in advance.
why not something like this?
just a little adjustment to deepus code: though the width of the parent and children must be set to your standards
<html>
<head>
</head>
<style>
.inline
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
float:left;
margin:2px;
}
.main
{
width:120px;
}
</style>
</head>
<body >
<div class="main">
<div class="inline">div 1</div>
<div class="inline">div 2</div>
<div class="inline">div 3</div>
<div class="inline">div 4</div>
</div>
</body>
</html>
Simple:
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 4px;
}
div:nth-child(odd) {
clear: left;
}
See this fiddle: http://jsfiddle.net/QkruA/
go to old school way...clear:both
demo
css
div.inline{
float: left;
width:200px;
height:200px;
border:1px solid #000;
}
.clr{
clear:both;
}
html
<div class="inline"></div>
<div class="inline"></div>
<div class="clr"></div> <!-- taa daa...i love old schools methods :) -->
<div class="inline"></div>
<div class="inline"></div>
why don't you just use display:inline-block on each div
To make it easy for you for in the future add a class "left" and "right"
In this way you only have to make 2 very little css codes and you can use it every time you want something to set left or right (so you dont need to type this again every time you want to use it)
CSS code
.left
{
float:left;
}
.right
{
float:right;
}
.box
{
width:50px;
height:50px;
text-align:center;
border:1px solid black;
margin:2px;
}
.main
{
width:120px;
}
HTML code
<body >
<div class="main">
<div class="left box">div 1</div>
<div class="right box">div 2</div>
<div class="left box">div 3</div>
<div class="right box">div 4</div>
</div>
</body>