So, I'm trying out some column code to get three columns lined up perfectly. Unfortunately, when I attempted it, I got the left and right columns floating over the middle column, like so:
http://i.imgur.com/p4ln5Ri.png
This is the css code I used. For reference, #left means the left column, #main the middle, and #right the right column.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3-Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="ThreeColumnProjectCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div>
<div class="column">
<h1>Left</h1>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
</div>
<div class="column">
<h1>Header - Main</h1>
<p>Ullamco laboris nisi sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In reprehenderit in voluptate lorem ipsum dolor sit amet, velit esse cillum dolore. Sunt in culpa ut enim ad minim veniam, consectetur adipisicing elit. In reprehenderit in voluptate qui officia deserunt sed do eiusmod tempor incididunt.</p>
<p>Excepteur sint occaecat duis aute irure dolor sunt in culpa. Quis nostrud exercitation consectetur adipisicing elit. In reprehenderit in voluptate lorem ipsum dolor sit amet, cupidatat non proident. Ut labore et dolore magna aliqua.</p>
<p>Quis nostrud exercitation qui officia deserunt eu fugiat nulla pariatur. Consectetur adipisicing elit, lorem ipsum dolor sit amet, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Velit esse cillum dolore qui officia deserunt ut labore et dolore magna aliqua.</p>
<p>In reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ullamco laboris nisi velit esse cillum dolore. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Excepteur sint occaecat lorem ipsum dolor sit amet, quis nostrud exercitation.</p>
<p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Ullamco laboris nisi ut enim ad minim veniam, in reprehenderit in voluptate. Quis nostrud exercitation ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, velit esse cillum dolore.</p>
</div>
<div class="column">
<h1>Right</h1>
<p>Sed do eiusmod tempor incididunt excepteur sint occaecat duis aute irure dolor.</p>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
#left {
position: absolute;
left:0px;
top:100px;
width:200px;
background:#fff;
border:1px solid #000;
padding: 0px 5px;
}
#right {
position: absolute;
right:0px;
top:100px;
width:200px;
background:#fff;
border:1px solid #000;
padding: 0px 5px;
}
#header {
background:#fff;
/* IE 5.5 */
height:81px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
/* IE 6 */
height: 99px;
}
html]body #banner {
/* Mozilla and Safari */
height: 99px;
}
#main {
background:#fff;
/* these two margins affect IE 5.5 */
margin-left: 200px;
margin-right:200px;
border:1px solid #000;
padding: 0px 5px;
voice-family: "\"}\"";
voice-family: inherit;
/* these two margins affect IE 6 */
margin-left: 200px;
margin-right:200px;
}
html]body #main {
/* these two margins affect Mozilla and Safari */
margin-left: 212px;
margin-right:212px;
}
#footer {
width: 100%;
height: 35px;
border: solid #000000;
border-width: 1px 0;
margin: 0;
}
I appreciate the help.
I would get rid of the position absolute and use a grid system.
For example: http://jsfiddle.net/C6CnJ/7/
.row { clear: both; }
.column {
width: 130px;
margin: 0 10px 20px;
float: left;
}
<div class="row">
<div class="column">Lorem ipsum...</div>
<div class="column">Lorem ipsum...</div>
<div class="column">Lorem ipsum...</div>
</div>
<div class="row">
<div class="column">Hello!</div>
</div>
Related
I have a span of text that is wrapping and has some background color applied (as a highlight). Users can dynamically adjust the line-height of the text, but when this is done to a high enough value, white gaps appear between the lines of text. I'd like to fill/expand the lines so that the background color completely fills the gap, as though line-height was 1.
So far, the closest post I've found is one answered in 2012: How to apply CSS background color to some text in a paragraph without spaces caused by line-height?
The answer to that was to adjust the padding based on the line-height. Since the line-height in my example is dynamic, that may not be so easy.
I would also like to maintain the format of the text (e.g. don't want to set display: inline-block).
At this point the only thing I can think of is to somehow calculate padding on-the-fly based on the line-height provided. I'm hoping that there is a more elegant solution out there.
Here is an example of what I'm running into: https://codepen.io/anon/pen/Jmeerw
<div class="wrapper">
<span class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <span class="highlight">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</span> 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.
</span>
<div class="input-area">
<div>Enter line-height in percent</div>
<input id="line-height-input" type="number" value=200>%
<div>
</div>
.wrapper {
width:600px;
margin: auto;
left: 0;
right: 0;
}
.input-area {
padding-top: 20px;
}
.text {
font-size:25px;
line-height: 200%;
}
.highlight {
background-color: lightgreen;
}
$('#line-height-input').change(function(e) {
$('.text').css('line-height', e.target.value + '%')
})
Set padding on the highlight span to increase its background area.
$('#line-height-input').change(function(e) {
$('.text').css('line-height', e.target.value + '%');
// new:
var padding = ((e.target.value-100)/200); if (padding<0) padding = 0;
$('.highlight').css('padding-top', padding + 'em');
$('.highlight').css('padding-bottom', padding + 'em');
})
.wrapper {
width:600px;
margin: auto;
left: 0;
right: 0;
}
.input-area {
padding-top: 20px;
}
.text {
font-size:25px;
line-height: 200%;
}
.highlight {
background-color: lightgreen;
padding:.5em 0; /* initial, for a 2em lineheight */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <span class="highlight">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</span> 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.
</span>
<div class="input-area">
<div>Enter line-height in percent</div>
<input id="line-height-input" type="number" value=200>%
<div>
</div>
Another way to approach this is by using global css variables and the 'calc()' css function:
// Doesn't matter if the 'font-size' or the 'line-height' changes,
// the 'padding' will adjust accordingly.
$('#line-height-input').change(function(e) {
$(':root').css('--line-height', (e.target.value/100.0) + 'em');
})
$('#font-size-input').change(function(e) {
$(':root').css('--font-size', e.target.value + 'px');
})
:root {
--line-height: 1.5em;
--font-size: 18px;
/* The padding will adjusted automatically, allowing for more modulability */
--font-padding: calc((var(--line-height) - var(--font-size))/2) 0;
}
.text {
font-size:var(--font-size);
line-height: var(--line-height);
}
.highlight {
background-color: lightgreen;
padding: var(--font-padding);
}
/* Not important */
.wrapper { width:500px; display: inline-block;}
.input-area { padding: 0 10px 0 0; margin: 0 10px; border-right: 1px solid black; height:100%; display: inline-block; vertical-align:top; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-area">
<div>Line Height </div>
<input id="line-height-input" style="width:50px;" type="number" step=5 value=150> %
<div>Font Size </div>
<input id="font-size-input" style="width:50px" type="number" value=18> px
</div>
<div class="wrapper">
<span class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <span class="highlight">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</span> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</span>
</div>
I want to align three blocks: one to the left bottom, one in the middle top, and one in the right bottom.
The width is fixed, but one or two of the blocks may be absent.
I couldn't find a way to use position:absolute because the container must have the height of the higher block.
My solution so far is using three inline-block whose widths add up to the container width, and mixed vertical-alignment. But when i hide the middle block it breaks.
I set a fiddle for it here that shows my desired result, except when I hide.
Of course I can add a script to set the margins when I hide the block, but I'm looking for a CSS only solution. Also I would rather not use tables or display:table-cell, for their side effects.
You may use display:flex; flex:1 and margin:auto will keep away from the direction it is applied, on 2 opposite direction it will be centered :
when middle is hidden, left and right comes 50% of width. width of div is set via flex:1:
$("input").click(() => {
$("#middletop").toggle();
})
div {
border: 1px solid green;
margin: 0;
flex: 1;
}
#container {
min-height: 50vh;/* demo purpose */
display: flex;
}
#leftbottom {
margin-top: auto;
}
#middletop {
margin: auto 0;
text-align: middle;
}
#rightbottom {
width: 200px;
margin-bottom: auto;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="leftbottom">
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
</div>
<div id="middletop">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
</div>
<div id="rightbottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<input type="button" value="Hide middle" />
https://jsfiddle.net/9b9a7wqv/8/
when middle is hidden, it leaves a gap. Here width of div is set via width.
$("input").click(() => {
$("#middletop").toggle();
})
div {
border: 1px solid green;
margin: 0;
}
#container div {
width:33%;
}
#container {
min-height: 50vh;
display: flex;
}
#leftbottom {
margin-top: auto;
margin-right:auto;
;
}
#middletop {
margin: auto 0;
text-align: middle;
}
#rightbottom {
margin-bottom: auto;
margin-left:auto;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="leftbottom">
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
</div>
<div id="middletop">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
</div>
<div id="rightbottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<input type="button" value="Hide middle" />
https://jsfiddle.net/9b9a7wqv/10/
I have 2 columns inside a container div both with a width of 50%, 1 column has dummy text etc the other has a google map iframe. I have wrapped a fluid container around the map and applied position absolute; to the iframe to expand the map inside its container but I notice the map seems to shrink and expand a lot beyond the contact column, can anyone advise how I can consistently make the map be the same height as the other column? I need this layout to remain fluid so the full 100% width
JSFiddle: http://jsfiddle.net/Xm6GW/1/
CSS
.col-ctn {
width: 100%;
}
.col {
width: 50%;
background: silver
}
.contact-col {
float: left;
}
.map-col {
float: right;
}
.fluid-map {
position: relative;
padding-bottom: 100%;
height: 0;
}
.fluid-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How about this:
FIDDLE
(Relevant) CSS
html,body,.col-ctn,.contact-col
{
height: 100%;
}
.fluid-map {
position: absolute;
top:0;
left:50%;
height: 100%;
}
I have done the changes as per your requirement but you have to change the css naming as per your requiremnet.
CSS:-
body, html {
height: 100%;
padding: 0;
margin:0;
}
.main_container
{
width:100%;
height:98%;
}
.info_container
{
width:49.2%;
height:100%;
border:1px solid;
float:left;
}
.map_container
{
width:50%;
height:100%;
border:1px solid;
float:right;
}
Html:-
<div class="main_container">
<div class="info_container">
<div class="inner">
<h2>Header</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>
</div>
</div>
<div class="map_container">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/?ie=UTF8&t=m&ll=47.754098,12.480469&spn=20.702603,37.353516&z=4&output=embed"></iframe>
</div>
</div>
fiddle link:-
http://jsfiddle.net/Xm6GW/1/
CSS beginner here, I'm at my wits end with a relatively simple css layout and was hoping someone would just look over it for me..
What i've got:
CSS embedded temporarily, excuse the indenting (i've just come from programming and indenting was helping me make sense of it):
<!DOCTYPE HTML>
<html lang="en">
<style>
* {margin: 0; padding:0;}
body
{
font: normal 100% Helvetica, Arial, sans-serif;
background-color: LightSkyBlue;
margin: auto auto;
max-width: 90%;
}
#central_container
{
background-color: Yellow;
width: 100%;
margin: auto auto;
float: left;
}
#leftside_container
{
background-color: Ivory;
float: left;
width: 66%;
clear: left;
}
#header_container
{
background-color: DeepSkyBlue;
width: 100%;
height: 15em;
}
#header_title
{
background-color: Lime;
width: 100%;
height: 80%;
}
#header_title h1{ padding: 0; margin: 0; }
#navbar_container
{
background-color: Coral;
width: 100%;
height: 20%;
}
.navbar_links{ background-color: HotPink; }
#currentpage_content
{
background-color: grey;
width: 100%;
height: 20%;
}
#rightside_container
{
background-color: Khaki;
float: right;
width: 33%; <!--/* 320 /960 */-->
}
#register_container
{
background-color: LightPink;
width: 100%;
}
#contacts_content
{
background-color: SeaGreen;
width: 100%;
}
</style>
<head>
<title>Verge Green IT</title>
<link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>
<body>
<div id="central_container">
<!--Left-side Current-page Content-->
<div id="leftside_container">
<!--Header-->
<div id="header_container">
<div id="header_title">
<h1>#header_title</h1>
</div>
<!--Navbar-->
<div id="navbar_container">
<div class="navbar_links">
</div>
</div>
</div>
<!--Current Page Contents-->
<div id="currentpage_content">
<p> #currentpage_content</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>
<!--Right-side Every-page Content-->
<div id="rightside_container">
<div id="register_container"><p> #register_container </p></div>
<div id="contacts_content"><p> #contacts_content</p></div>
</div>
</div>
</body>
</html>
What i'm aiming for:
(Vague text alternative: Where the register_container fills the rightside_container up to the height of the bottom of the navbar_container. And the contact_content fills up the rest of the rightside_container as the current_page content does on the leftside_container. )
I think i'm having some trouble because of the floating i'm trying to do.. and i have no idea why there's empty yellow space on the left of register_container/contacts_content. Nor why i can specify height for things like the header_title but not the register_container.
Really appreciate any help!
I think you have some minor problems with values you have given in the Width and height field.
This works fine for me.
<!DOCTYPE HTML>
<html lang="en">
<style>
* {margin: 0; padding:0;}
body
{
font: normal 100% Helvetica, Arial, sans-serif;
background-color: LightSkyBlue;
margin: 0 auto;
max-width: 90%;
height: auto;
}
#central_container
{
background-color: Yellow;
width: 100%;
margin: 0 auto;
height: 100%;
float: left;
}
#leftside_container
{
background-color: Ivory;
float: left;
width: 66%;
clear: left;
}
#header_container
{
background-color: DeepSkyBlue;
width: 100%;
height: 15em;
}
#header_title
{
background-color: Lime;
width: 100%;
height: 80%;
}
#header_title h1{ padding: 0; margin: 0; }
#navbar_container
{
background-color: Coral;
width: 100%;
height: 20%;
}
.navbar_links{ background-color: HotPink; }
#currentpage_content
{
background-color: grey;
width: 100%;
height: 20%;
}
#rightside_container
{
background-color: Khaki;
float: right;
width: 34%; <!--/* 320 /960 */-->
}
#register_container
{
background-color: LightPink;
width: 100%;
height:240px;
}
#contacts_content
{
background-color: SeaGreen;
width: 100%;
height:250px;
}
</style>
<head>
<title>Verge Green IT</title>
<link rel="stylesheet" href"CSS/base.css" type="text/css" />
</head>
<body>
<div id="central_container">
<!--Left-side Current-page Content-->
<div id="leftside_container">
<!--Header-->
<div id="header_container">
<div id="header_title">
<h1>#header_title</h1>
</div>
<!--Navbar-->
<div id="navbar_container">
<div class="navbar_links">
</div>
</div>
</div>
<!--Current Page Contents-->
<div id="currentpage_content">
<p> #currentpage_content</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>
<!--Right-side Every-page Content-->
<div id="rightside_container">
<div id="register_container"><p> #register_container </p></div>
<div id="contacts_content"><p> #contacts_content</p></div>
</div>
</div>
</body>
</html>
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.