Goals:
The code should work for any element (div, span, etc)
contain: fill as much space as possible while keeping the aspect ratio and not overflowing the container
cover: fill as much space as possible while keeping the aspect ratio and not leaving gaps
fill: fill as much space as possible (keeping the aspect ratio is not important)
Here is how the result should look with different aspect ratios
Resize the elements to check out how they behave under different aspect ratios
.container {
width: 100px;
height: 100px;
border: 3px solid blue;
resize: both;
overflow: hidden;
position: relative;
margin: 8px;
}
.element {
border: 6px solid red;
box-sizing: border-box;
background: radial-gradient(circle closest-side, #32ebc9, gray);
aspect-ratio: 16/9;
width: auto;
height: auto;
overflow: hidden;
/* modify this code to change the alignment */
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.element.contain {
max-width: 100%;
max-height: 100%;
}
.element.cover {
min-width: 100%;
min-height: 100%;
}
.element.fill {
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="element contain">
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>
<div class="container">
<div class="element cover">
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>
<div class="container">
<div class="element fill">
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>
</body>
</html>
Try this:
body {
display: flex;
flex-wrap: wrap;
}
.container {
width: 300px;
height: 300px;
border: 3px solid blue;
resize: both;
overflow: hidden;
position: relative;
margin: 8px;
}
.element {
border: 6px solid red;
box-sizing: border-box;
background: radial-gradient(circle closest-side, #32ebc9, gray);
aspect-ratio: 16/9;
width: auto;
height: auto;
overflow: hidden;
/* modify this code to change the alignment */
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.element.contain {
max-width: 100%;
max-height: 100%;
}
.element.cover {
min-width: 100%;
min-height: 100%;
}
.element.fill {
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="element contain">
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>
<div class="container">
<div class="element cover">
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>
<div class="container">
<div class="element fill">
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>
</body>
</html>
Related
I have a modal I created using ReactDOM.createPortal();. It works well except I can't seem to style the modal in a way that works on both Chrome and Safari.
html:
<body>
<div id="main">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
</div>
<div id="portal">
<div>
<div class="modal-wrapper">
<div class="modal-card">
<div class="row">
</div>
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.
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.
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.
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 class="background-overlay"></div>
</div>
</div>
</div>
</body>
scss:
#portal {
.modal-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
overflow: hidden;
max-height: 100%;
.modal-card {
background: white;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 10;
max-width: 800px;
margin-top: 10px;
width: 50%;
overflow: auto;
padding: 10px;
max-height: 90%;
}
.close-button {
position: relative;
}
.background-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
}
}
Please see https://jsfiddle.net/alisonmtague/am5jfr37/26/ using both safari and chrome.
On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal (background page scrolls instead). I expect the contents of the modal I'm creating to be pretty large so I need the modal to be scrollable. Ideally I would also like the #main div to not scroll when the modal is open.
Changing the z-index does not solve things
When you open the modal, apply a class to your <body> (i.e. fixed) and:
body.fixed {
overflow: hidden;
position: fixed;
}
Obviously, you need to remove it when closing the modal.
Additionally, your modal scroll container should have:
{
-webkit-overflow-scrolling: touch;
}
..., besides overflow-y: auto; and a fixed height, smaller than 100vh. That's about it.
Note: Depending on device, Safari version and iOS version you might not need both (second one being the real important one), but with both you get max compatibility.
Ref: "On Safari the .background-overlay overlays the .modal-card and you are unable to scroll the modal":
Assuming adding position: relative; to .modal-card wouldn't work: what is stopping you from placing .background-overlay as first child of .modal-wrapper and .modal-card as second?
I've done my share of css, and think I know all the usual tricks, but this one stumped me. I'm trying to absolutely position a caption box over an image (implemented as background-image) with a list of requirements:
Should be centered
Should have max-width and max-height as percentages of the image.
Should have bottom 10% from parent, and resize up with more content
Text content over maximum size should be hidden, but the background with it's rounded border-radius corners should remain visible.
The following is the closest I've come - it fails at centering:
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
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.
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>
I know lots of ways to center of course, but none I try maintain the other requirements.
I don't mind wrapping one or more extra elements around .caption if it achieves all my aims. Anyone able to help? Thanks in advance.
Wrap the caption in another div with the dimensions and positioning you require.
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
margin: 1em auto;
}
.wrap {
width: 75%;
max-height: 80%;
position: absolute;
transform: translateX(-50%);
bottom: 10%;
border-radius: 5px;
left: 50%;
overflow: hidden;
}
.caption {
box-sizing: border-box;
background-color: rgba(75, 75, 75, 0.4);
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="wrap">
<div class="caption">
<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 </p>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="caption">
<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. 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>
add left:0px and right:0px to .caption
.container {
background-image: url('http://via.placeholder.com/400x400');
height: 400px;
width: 400px;
position: relative;
}
.caption {
position: absolute;
bottom: 10%;
margin: 0 auto;
max-width: 75%;
max-height: 25%;
overflow: hidden;
left: 0px;
right: 0px;
box-sizing: border-box;
background-color: rgba(75,75,75,0.4);
border-radius: 5px;
padding: 10px;
text-align: center;
color: white;
}
<div class="container">
<div class="caption">
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.
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>
I'm trying to annotate specific funtionality in an app, and the annotations appear to the side of a column of content. The column is a fixed height with custom scrollers, so I need overflow y to be auto or scroll - and overflow-x to be visible, so the annotation is visible.
I know this isn't possible by setting auto/visible on the same element, but I have seen solutions on SO where the column is set to overflow-y auto, and the wrapper is set to overflow visible - but I can't get it working.
I have a JSBin set up with my current implementation - https://jsbin.com/woduciv/edit?html,css,output
Essentially:
.wrapper {
position: absolute;
height: 100%;
width: 100%;
}
.column {
position: fixed;
left: 0;
height: 100%;
width: 25%;
overflow: visible;
}
.column__content {
position: static;
overflow-y: scroll;
height: 100%;
width: 100%;
}
Does anyone know a solution to have the x axis visibly, and y scroll enabled?
Thank you :)
Try this:
body {
height: 100%;
margin: 0;
font-family: 'Unica One', sans-serif;
background: #fff;
}
.custom-panel {
border-radius: 0;
height: 300px;
overflow: scroll;
padding: 15px;
width: 400px;
}
.custom-panel p {
min-width: 500px;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="col-sm-6">
<div class="panel custom-panel">
<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. "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 "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>
Hope this will help you!!
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.
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.