JSFiddle code here
I'm trying to make a CSS-only sticky menu (no JavaScript). When you scroll down, hover over menu items no longer works. I'm not sure why not.
CSS:
* {
margin: 0;
padding: 0;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
body {
max-width: 960px;
margin: auto;
}
.cont2 h1 {
background: black;
color: lightskyblue;
padding: 10px;
}
.cont2 nav ul {
list-style-type: none;
background: lightskyblue;
padding: 20px;
}
.cont2 nav ul li {
display: inline-block;
}
.cont2 nav ul li a {
text-decoration: none;
padding: 20px;
color: black;
text-transform: uppercase;
}
.cont2 nav ul li a:hover {
background: black;
color: orange;
}
.sticky-nav {
position: sticky;
box-sizing: border-box;
top: 0;
}
I'm not posting the HTML here, because it's too much.
You need to set z-index:1; to class .sticky-nav
Here is the updated snippet:
* {
margin: 0;
padding: 0;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
body {
max-width: 960px;
margin: auto;
}
.cont2 h1 {
background: black;
color: lightskyblue;
padding: 10px;
}
.cont2 nav ul {
list-style-type: none;
background: lightskyblue;
padding: 20px;
}
.cont2 nav ul li {
display: inline-block;
}
.cont2 nav ul li a {
text-decoration: none;
padding: 20px;
color: black;
text-transform: uppercase;
}
.cont2 nav ul li a:hover {
background: black;
color: orange;
}
.sticky-nav {
position: sticky;
box-sizing: border-box;
top: 0;
z-index: 1;
}
<div class="container cont2">
<h1> Main Heading </h1>
<nav class="sticky-nav">
<ul>
<li> Page One </li>
<li> Page Two </li>
<li> Contact </li>
</ul>
</nav>
<div class="row">
<div class="col">
<h2> LOREM IPSUM </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col">
<h2> LOREM IPSUM </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row" id="contact">
<h2> CONTACT ME </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
I am trying to float the image to left, wrap the description around the image, and float the location to the bottom left by using float and clear properties: https://jsfiddle.net/darf4ama/5/
<aside>
<h2>Photo Posts</h2>
<p><img src="http://lorempixel.com/200/300/animals/" alt="Image Title"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Image</p>
</aside>
aside img {border: 2px dotted yellow; float: left;}
aside:first-of-type p:first-of-type {border: 2px dotted blue;}
aside:first-of-type p:nth-of-type(2) {border: 2px dotted green; float: left; overflow: auto;}
aside:first-of-type p:last-child {border: 2px dotted red; float: left; clear: both; font-style: italic;}
I think I have floated the image and the location and have cleared these two properties correctly. However I can't seem to float and clear paragraph 2. What am I doing wrong here?
Float does change the behaviour of elements
you might consider of using flex box
if you want to have the image and paragraph next to each other with a margin to it
check the following snippet
aside{
display:flex;
border:1px solid red;
}
aside img {border: 2px dotted yellow; }
aside p:nth-child(2){
margin:10px;
border:2px solid green;
}
<h2>Photo Posts</h2>
<aside>
<p>
<img src="http://lorempixel.com/200/300/animals/" alt="Image Title">
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
<p>Image</p>
Hope this helps
I am having a problem setting up the css properly
Here is my small code that I play with:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { margin: 0; padding:0; }
html, body { width: 100%; height: 100%; background: #abc; }
#container { background: #eee; width: 100%; height:100%;}
#sidebar { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
#content { background: #777; margin-left: 200px; width: auto; height: 100%; }
#wrapper { background: #357; height: auto; padding: 10px;}
#column1 { background: #0f0; width: 66%; float: left; }
#column2 { background: #f00; width: 33%; float: right; }
#text1 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
#text2 { background: white; width:80%; min-width: 300px; margin: 0 auto;}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
</div><!-- end sidebar -->
<div id="content">
<div id="column1">
<div id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column1 -->
<div id="column2">
<div id="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- end column2 -->
</div><!-- end content -->
</div><!-- end container -->
</body>
</html>
This is supposed to be a page with fixed sidebar on left and fluid content area on the right. In short pages I want the background color of #content extend to the bottom of screen (this works). On long pages I want that background to extend to the end of page (this does not).
I've added colors to all elements to see what's going where, but eventually the #content background will be white with 0.9 transparency, and there will be a background image on body.
How to fix that?
Update: see working example here: http://jsbin.com/AXUmALU/1/edit?html,output - just scroll the output up to see the break in colors.
I think I have what you want here. In the css I have added some selectors for a clearfix class, which is very common. It looks like this:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And I added that class to the #content This css is from HTML5 Boilerplate, which you can google. I also changed
#content { height: 100%; } to #content { min-height: 100%; }
so that the content can expand beyond the size of the screen if it needs to.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have a demo here to illustrate my question.
http://www.ttmt.org.uk/forum/
It's a header, content and a footer.
The content is pushing the footer below the window but the footer still has a gap below.
Why is there a gap below the footer?
Do I need a sticky footer?
What's the best sticky footer for a responsive layout?
Thanks in advance for any help.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define visible focus styles!
:focus {
outline: ?????;
} */
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CLEAR FIX */
.clear {
clear: both;
}
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
*html .group {
height:1%;
}
*:first-child+html .group {
min-height: 1px;
}
.clear {
clear:both;
}
/* END CLEAR FIX */
body{
font:1em Helvetica, sans-serif;
}
#page{
max-width:1000px;
margin:0 auto;
}
header{
background:blue;
height:100px;
}
.pageContent{
padding:50px 0;
background:#eee;
}
footer{
background:#b5b6b9;
width:1000px;
margin:0 auto;
}
footer ul{
float:left;
margin:0 20px 0 0;
}
footer ul li:first-of-type a{
text-transform:uppercase;
font-weight:bold;
}
footer a{
display:inline-block;
color:white;
font-size:.8em;
padding:1px;
}
</style>
</head>
<body>
<div id="page">
<header class="group">
<h2>Header</h2>
</header>
<section class="pageContent">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer class="group">
<h2>Footer</h2>
<ul>
<li>One</li>
</ul>
<ul>
<li>Two</li>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
</ul>
<ul>
<li>Three</li>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
<li>3-5</li>
<li>3-6</li>
</ul>
</footer>
</body>
</html>
Remove this:
.group::after {
height: 0; }
The only sticky footer I have ever seen working 100% of the time, was this one: http://jsfiddle.net/DU3uf/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div id="wrapper">
<header>
</header>
<section>
</section>
<div id="push"></div>
</div>
<footer>
</footer>
</body>
</html>
CSS
html, body { width:100%; height:100%; }
#wrapper { width:100%; min-height:100%; height:auto; margin:0 auto -100px; }
#wrapper > header { width:100%; height:100px; background-color:#333; }
#wrapper > section { width:100%; height:400px; background-color:#FFF; }
#push { width:100%; height:100px; clear:both; }
footer { width:100%; height:100px; background-color:#1BA1E2; }
It's the same used by bootstrap http://getbootstrap.com/
.group::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Remove this height: 0;
I need two DIV to be put side by side and aligned vertically at their bottom.
The orange div doesn't have a width or height. It can grow depending of his content
I should be able to use padding and margin of the green div
I would like to have a solution that doesn't use javascript
See: http://jsfiddle.net/thirtydot/J9eds/
I've used display: inline-block combined with vertical-align: bottom.
HTML:
<div id="container">
<div id="left">
left<br />left<br />left<br />left<br />left<br />left<br />
leftleftleftleftleftleft
</div>
<div id="right"></div>
</div>
CSS:
#container {
border: 1px solid red;
float: left;
}
#left, #right {
border: 2px solid red;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
margin: 20px 20px 0 20px;
padding: 20px;
width: 100px;
}
Not 100% sure, but something like this should work:
<div class="wrapper">
<div class="orange"></div>
<div class="green"></div>
</div>
div.wrapper div {
position: relative;
float: left;
bottom: 0px;
}
May not even need the float.
This was some fun practice :) Its probably not the best answer, but it should get the job done.
html:
<table>
<tr>
<td>
<div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
</td>
<td>
<div id="div4">nick</div>
</td>
</tr>
</table>
css:
td
{
vertical-align:bottom;
}
#div3
{
border:solid 5px blue;
float:left;
}
#div4
{
width:50px;
height:20px;
border:solid 5px red;
float:right;
}
see code in jsfiddle. add margins to the divs if you'd like
I am sure you'll get something better but to get started this seems to work.
in the css sheet
#box1{
background-color:#FFFF99;
width: 350px;
height: auto;
float: left;
position:absolute;
bottom: 0;
}
#box2{
background-color:#CCFF99;
width:350px;
left: 500px;
position: absolute;
bottom: 0;
}
in the html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="try2.css" />
</head>
<body>
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
I think you need an absolute left position for the second box.
What worked for me was applying this style to both divs:
.bottom-align {
vertical-align:bottom; display:inline-block; float:none;
}
Then between both divs I had to remove the pseudospace by adding a blank comment:
</div><!-- ---><div>
https://jsfiddle.net/panosang/96bnt3xa/
After some hours of working and a terrible headache i think that the perfect solution is to add some margin-botton and margin-top elements.
I really hate to add specific pixels or change percentage each time into my CSS file but i found it as the perfect solution in my problem.
I used <table> instead of <div>, but it works with <div> too.