How to align a text box, left or right of the HTML page?
We all know how to align a picture to the right. But how do I create a textbox (with a border and a different background color) and how do I integrate this textbox into a paragraph so that the body text skirts the textbox with a specific padding?
We all know how to align a picture to the right.
The above is a little presumptuous.
I'd agree that your question needs examples of what you've tried. It also needs clarity around what you are asking for. I'm assuming that the code below is what you are after.
This example uses floats which will cause the wrapping effect that you mention, however for layout similar to this, I would take a good look at CSS Grid.
section {
width: 600px;
height: auto;
}
p {
display: block;
}
#funky {
background: pink;
padding: 1rem;
margin-left: 1rem;
border: 3px dashed;
width: 200px;
height: 150px;
overflow-y: scroll;
float: right;
display: inline;
}
<section>
<p id="main">
<div id="funky">
Aliquam erat volutpat. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer
</div>
Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Nam at tortor in tellus interdum sagittis. Morbi vestibulum volutpat enim. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Sed in libero ut nibh placerat accumsan. jfdkjfd fdsjlfdsj Aliquam lobortis. Vivamus consectetuer hendrerit lacus. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Vivamus euismod mauris. Vivamus euismod mauris. Fusce vulputate eleifend sapien. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.
</p>
</section>
Use a div and assign float: left or right to it (same as with floated images), plus a width setting to not have it span the whole page (percentage or px)
Related
Here is the description of the feature I really struggle to do.
Mockup
Description
A generated pdf document contains many sections
Some sections can print on many pages
We don't know the size of the content (variable height)
The page must not have margins (the headers are positioned (0,0) and have the same width as the page, documents are printed bordeless)
The content can be anything : paragraphs, titles, images, graphs, svg elements, tables, ...
Objective
When the content of a section auto break on the next page, that page should have a margin equal to the header
Exemple: the section #2 is printed on the pages 2 & 3 ; the page 3 should have a top margin.
Problem
Because the page margins are set to "0", we should define a padding/margin after a natural page break but, I can't find how to make it work nicely (1)
Technical
I'm using RelaxedJS (pdf is generated with Chromium)
Thank you so much in advance if you know how to handle that specific case. I've read so many documentation. The best candidate could be CSS Fragmentation Box Decoration Break Clone but I can't make it work with blocks, only inline elements and paragraphs.
(1) I have tried a solution using table and a thead setting the margin on top of the page... but it's not working when you fill the cells with content. I guess the has serious limitations when using #page rules.
I had to face the same issue a few days ago.
The idea was simple, you have to do this:
Set #page margins (considering the height of the header and footer)
Set header and footer position: fixed and adjust the top and bottom properties.
Control the .page-content with page-break-after to make sure the content go to the next pages.
Notice that I used the DOMPDF Laravel to generate the PDF. May be there are some differences using RelaxedJS but anyway you can try this just in case.
I hope this can help you. Here is the same code in Codepen
#page {
margin: 160px 0px;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h2 {
text-align: left;
margin-left: 50px;
}
header {
background-color: yellow;
width: 100%;
height: 120px;
color: black;
display: flex;
align-items: center;
position: fixed;
top: -120px;
left: 0px;
right: 0px;
}
.page-content {
margin-top: 0px;
margin-bottom: 60px;
}
.page-content p {
page-break-after: always;
padding: 5px 30px;
}
.page-content p:last-child {
page-break-after: never;
}
footer {
position: fixed;
bottom: 50px;
right: 0;
left: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
height: 50px;
}
footer, .page-content {
margin-left: 100px;
border-left: solid black 1px;
}
<header><h2>HEADER SECTION #</h2></header>
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque neque vel lectus rutrum, quis suscipit tortor ornare. Maecenas a enim sit amet neque vehicula imperdiet. Donec auctor convallis tellus. Suspendisse a arcu a tortor congue aliquet vel a justo. Cras sit amet pulvinar tortor. Vestibulum vel lobortis libero, eu accumsan ipsum. Donec felis sem, consequat quis pharetra sit amet, facilisis eget odio. Suspendisse nec vestibulum urna, non fermentum lorem.</p>
<p>Sed orci neque, fringilla nec urna at, iaculis laoreet metus. Nam fringilla sit amet sapien iaculis malesuada. Duis pellentesque odio vitae quam pellentesque sollicitudin. Duis nec commodo mauris, ac eleifend nunc. Vestibulum ac finibus nisi. Aliquam at neque augue. Cras metus mi, ultricies vitae dui sit amet, lacinia aliquet nunc. Duis vitae urna et arcu auctor tristique et id lectus. Praesent ut sollicitudin nibh. Mauris quis vehicula ipsum. Quisque feugiat nec felis et cursus. Donec neque ante, accumsan a tincidunt at, ultrices et lectus. Nullam finibus, ipsum facilisis euismod accumsan, nulla quam ultrices odio, id efficitur purus nisl id lacus. Duis bibendum est quis ligula aliquam rhoncus. Nunc dapibus, odio vel tincidunt faucibus, justo dolor tempor nisl, eu maximus nibh odio nec risus. Nullam ut lacinia purus.</p>
<p>Praesent finibus nisi congue sodales elementum. Vestibulum mauris libero, varius a urna at, vestibulum eleifend nisl. Maecenas et metus dapibus, semper quam a, suscipit libero. Mauris malesuada pretium maximus. Sed semper urna vitae iaculis mattis. Praesent luctus, ipsum et consequat lacinia, purus nisi scelerisque sem, eu luctus metus erat at arcu. Aenean aliquam fermentum condimentum.</p>
<p>Pellentesque felis mi, semper ac ullamcorper vel, accumsan ac tortor. Donec vestibulum varius enim, vitae tempor ligula accumsan eget. Etiam quis nunc felis. Phasellus scelerisque, purus eget sollicitudin gravida, felis justo euismod dui, ut fringilla nulla nunc vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo pretium sapien eleifend molestie. Nullam consequat ligula sit amet purus sodales vehicula. Duis placerat aliquet augue, ut dapibus turpis malesuada sit amet. Vivamus id nulla odio. Integer a velit ac eros rutrum tempus. Vestibulum quis sodales turpis.</p>
<p>Vivamus eu enim fringilla turpis euismod finibus id quis dolor. Pellentesque ex massa, congue at nisl at, lacinia ornare urna. Aenean pretium posuere dictum. Nullam justo metus, eleifend a dictum sit amet, gravida ut arcu. Fusce libero leo, sollicitudin at est non, venenatis auctor nulla. Vivamus luctus tellus eu metus interdum congue eget non magna. Curabitur congue felis nulla, eu consectetur tellus viverra et. Nunc ullamcorper ac nisl a elementum. Morbi viverra magna in orci tristique, eget suscipit nunc suscipit. Morbi sodales dolor a feugiat bibendum. Duis nunc nisl, pulvinar at sem quis, cursus lacinia arcu. Aliquam in dictum arcu.</p>
</div>
<footer>Page X</footer>
So what my goal is, is to position this div background box "lightgrey", with the text which is in another div, but everytime i get the divs positioned the way I want, they seem to be offset, I was thinking of creating a #media_query but I felt like I would have to create way too many statements to have it adjust accordingly, if anyone has any suggestions that would be great.
<div style="width:200px; height:200px;right:0;margin-right:7%; border: 5px;
solid:grey; background-color:lightgrey;position:absolute;">
</div>
<div style="position:absolute;right:0;margin-right:10%;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
The first image is of a map leaflet that does what I want to achieve and its essentially dynamically changing the size without losing its position, verses what I created which constantly moves out of position when i resize the screen.
Leaflet Map (my goal):
This first image is ideal with how I would want it positioned:
When I resize this happens:
I don't have a ton of experience with css, I'm in a web development class right now, but I wont be able to see my professor because of the holidays, if anyone could give me some suggestions I would really appreciate it!
Any suggestions?
html code: https://pastebin.com/iTmsyV5Z
I can't really get a full example working to test but something like:
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-left:10%; float: left;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
or
<div style="width: 200px; height:200px; border: 5px;
solid:grey; background-color: lightgrey; float: left;">
</div>
<div style="margin-right:10%; float: right;">
<h3>{{major_choice.0.Major}}</h3>
<h3>Overall Rating:</h3>
<h3>{{major_choice.0.ProfessorRating}}</h3>
</div>
Should work after some adjustments of the values. Not sure if you want the grey box all the way to the right or left.
I achieved this by using relative positioning. And floating both elements left so they stack horizontally. I believe this is what you wanted.
By adding the element within your main container, absolute positioning will work nicely. This will then scroll with the container. If you require it to stay where it is on the screen, you will need to use fixed positioning, it will then be relative to your viewport. So keep in mind when adjusting your top and right positioning to compensate.
.Menu,
.Content {
position: fixed;
background-color: #CCC;
left: 10%;
right: 10%;
}
.Menu {
top: 10px;
height: 50px;
}
.Content {
top: 70px;
bottom: 10px;
overflow: auto;
padding-right: 250px;
}
.Floating {
position: absolute;
background-color: #EDEDED;
right: 20px;
top: 20px;
width: 210px;
height: auto:
}
<div class="Menu">
This is the menu
</div>
<div class="Content">
<div class="Floating">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus felis
nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis.
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lectus eros, placerat euismod nisl pharetra eget. Fusce commodo ipsum non ipsum fringilla dignissim. Integer eu mi ligula. In hac habitasse platea dictumst. Cras aliquet luctus
felis nec rutrum. In in magna eros. Donec tellus ipsum, auctor et eleifend non, mollis quis mauris. Praesent cursus malesuada mattis. Morbi id quam libero. Donec laoreet ullamcorper lobortis. Etiam quis est ac lacus varius malesuada. Nunc venenatis
rutrum dui, id euismod nunc porttitor id. Nulla id sapien imperdiet, ullamcorper felis et, rhoncus tortor. Quisque purus tellus, molestie a urna in, bibendum bibendum mauris. Nunc aliquet ornare tincidunt. Praesent leo diam, fermentum nec tempor in,
pellentesque eget velit. Aenean luctus mauris et turpis vehicula, at tristique ex gravida. Vivamus finibus, tellus vel volutpat facilisis, enim metus mattis mi, quis dictum tortor mi a mauris. Pellentesque malesuada tellus non consectetur feugiat.
Proin rutrum sem nec odio varius tincidunt. Quisque egestas enim et orci scelerisque, quis viverra lectus tristique. Donec consectetur, lacus sed vehicula lacinia, ipsum arcu consequat odio, sed porta erat neque eu lacus. Proin consequat quam vitae
nisl vulputate, ut imperdiet justo ultricies. Phasellus dictum vestibulum ullamcorper. Quisque lobortis eros sed ante porta ultricies. Suspendisse sit amet purus non enim fringilla pellentesque. Sed posuere, metus ut venenatis pretium, enim urna laoreet
sapien, accumsan condimentum mauris nisi sed elit. Nunc mollis sit amet enim ac placerat. Donec elementum consectetur ipsum in molestie. Fusce auctor sollicitudin lorem a pharetra. Vestibulum blandit consectetur sagittis. Nullam varius commodo dictum.
Sed tempus a nulla nec feugiat. Sed pharetra mattis velit sed sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sit amet vehicula felis. Nullam faucibus interdum rhoncus. Proin eget velit non
nunc dignissim vestibulum sit amet id nulla. Nunc a lectus mauris. Sed sagittis orci ullamcorper nisi ullamcorper dictum. Etiam ut tellus tortor. In a molestie tortor. Quisque turpis tellus, fermentum euismod eros a, vulputate aliquam sapien. Integer
nunc dui, scelerisque nec interdum id, auctor ut ante. Curabitur pharetra dui vitae tellus tincidunt auctor. Etiam eget fringilla massa. Phasellus auctor lorem hendrerit massa porttitor, luctus consequat leo semper. Curabitur sollicitudin est sapien,
sed vulputate neque finibus ac. Aliquam pulvinar enim ac mi congue, eu dapibus velit imperdiet. Suspendisse pretium tellus eu urna auctor, quis sodales erat varius. Aenean eget felis mi. Suspendisse non tellus in mauris congue finibus et et risus.</div>
</div>
I've been trying to get a background picture to actually be in the back and not in the front.
I've tried with z-index, positioning en making divs in divs. But nothing really worked out.
The Screenshot of the issue.:
https://gyazo.com/4e9ae692ce1280ba8ea0ec37cb54930b
The above picture needs to be in the background so the box thing can go up in front.
The HTML code:
<div id="image">
<img src="DSC_0043.png" width="800" height="800">
<div id="content">
<div id="tabbox">-
<div class="tab">
Here follows like the actual content, which you of course don't need to know. it's just a bunch of text etc.
The CSS code:
#image{
position: relative;
z-index: 2;
}
#content{
width: 75%;
background-color: black;
position: absolute;
margin-left: 12.5%;
padding-bottom: 5.5%;
z-index: 1;
}
Using pure CSS, you can implement a background image even without a separate img tag.
Try using background-image:
#content {
/* Your CSS here... */
background-image: url("DSC_0043.png"),
}
EDIT:
If you want to repeat that image, you can specify background-repeat:
#content {
background-image: url("DSC_0043.png"),
background-repeat: repeat, /* Put no-repeat for non-repeating image */
}
if you want that image goes behind everything else, you should try with background-size: cover;
I didn't understand your problem very well, I hope that this will help you.
A slight rework of your code, you can accomplish this with css.
I used an image from google to show this but to explain I have two divs nested.
The parent div content sets the background image and adjusts the positioning of itself.
The child div box has the text and it's own width and height.
The css background-image: url ("path/to/image") and background-repeat: no-repeat make this possible. Feel free to manipulate the example I gave to add to your understanding.
#content {
width: 100%;
height: 100%;
background-image: url('https://images-na.ssl-images-amazon.com/images/I/61xo5qJF0nL._SY355_.jpg');
background-repeat: no-repeat;
position: absolute;
margin-left: 12.5%;
padding-bottom: 5.5%;
z-index: 1;
}
#box{
width: 350px;
height: 150px;
color: purple;
}
<div id="content">
<div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan turpis diam, non dictum dui mollis eu. Aliquam erat volutpat. Phasellus faucibus bibendum felis a posuere. Maecenas sit amet neque a sem mattis ornare sed vel mauris. Mauris vel semper nisl. Aliquam erat volutpat. Suspendisse potenti. Proin vulputate bibendum nulla, sit amet placerat arcu viverra in. Duis ultricies risus quis venenatis hendrerit. Sed elit lorem, suscipit at odio in, mollis dignissim dolor. Nulla a sem nec dolor consequat sodales. Nullam risus velit, venenatis nec quam in, tincidunt maximus velit. Cras lacus ex, pellentesque vel sapien quis, condimentum vulputate sapien. Maecenas at pellentesque lacus. Mauris ac ligula quam. Integer leo est, vulputate sed pulvinar ut, consequat vel risus.
Phasellus lectus neque, rutrum sit amet nisi eget, imperdiet scelerisque mauris. Nam elementum pretium sem ut sollicitudin. Cras in finibus eros. Aliquam sit amet metus vitae tellus vehicula pretium. Etiam vestibulum congue luctus. In quis auctor mi, sit amet tempor metus. Sed ex massa, porta a magna et, molestie vestibulum ipsum.
Sed congue, ligula non fringilla scelerisque, risus massa fermentum tortor, ornare feugiat justo massa molestie nisi. Ut id efficitur lacus. Duis ullamcorper mi nec tristique fermentum. Donec pellentesque vel massa et commodo. Integer semper gravida vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris at urna hendrerit, blandit ligula nec, dapibus erat. Aliquam ullamcorper orci nec quam euismod, sed mollis purus volutpat.
Proin at velit ut nunc mattis sodales a id ante. Aliquam a lacinia odio. Vivamus vel vulputate magna. Duis iaculis scelerisque tincidunt. Sed cursus leo vitae libero efficitur venenatis. Fusce suscipit dui nibh, nec tristique sem sodales ut. Quisque ac blandit lorem, pretium ullamcorper orci. Vivamus posuere ligula neque, at laoreet nibh semper consectetur. Duis suscipit sollicitudin quam sed volutpat. Proin tellus neque, porta id rutrum nec, posuere at nibh. Fusce venenatis efficitur metus, quis feugiat metus imperdiet et.
Sed aliquam viverra finibus. Vestibulum gravida a tortor et tempus. Aliquam at tortor purus. Maecenas malesuada magna justo. Aenean elementum sagittis aliquam. Donec lobortis id orci id pharetra. In non purus vitae erat fermentum condimentum non nec metus.</div>
</div>
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Make a div fill the height of the remaining screen space
(41 answers)
Closed 5 years ago.
This is the typical adaptive layout problem:
Header is always at the top of the screen.
Footer is always at the bottom of the screen.
We should not set the header and footer height: it calculates naturally from contains height and paddings. So, the solution with height calculating and positioning will not use here.
The middle section is scrollable. It must take all remaining space between header and footer.
Flex will help here. However: how I should to setup the middle section to make it take remaining space between header and footer? I almost did it, but it is not perfect yet: there is the extra scrollbar remains.
*{
box-sizing: border-box;
}
.flexContainter {
display: flex;
flex-direction: column;
height: 100vh
}
.header{
background: teal;
padding: 5px;
flex-shrink: 0; /* header must not shrink in any case */
}
.header > .dummyContains{
height: 20px;
background-color: HotPink;
}
.footer{
margin-top: auto;
background: DarkSalmon ;
padding: 5px;
flex-shrink: 0; /* header must not shrink in any case */
}
.footer > .dummyContains{
height: 20px;
background: LightGreen;
}
.middle{
background: LavenderBlush;
overflow-y: scroll;
}
<div class="flexContainter">
<div class="header">
<div class="dummyContains"></div>
</div>
<div class="middle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque eu sem fermentum dapibus. Curabitur sollicitudin nec magna quis imperdiet. Morbi auctor massa nisi, non hendrerit leo faucibus sed. Donec pulvinar, dolor eget consequat semper, quam est ullamcorper nunc, vel rutrum justo lacus eget neque. Nunc fermentum, velit quis consectetur scelerisque, justo velit vestibulum nunc, vitae malesuada metus nulla eget eros. Vestibulum porta at justo ut condimentum. In consectetur mattis eros eget porttitor. Nam dapibus mi a lobortis tristique. Vestibulum et semper urna. Aliquam lacinia felis a tortor viverra, quis posuere orci vehicula. Integer varius laoreet elementum. Pellentesque varius metus arcu. Aliquam sodales nisi vitae diam convallis, non luctus nisl ultrices. Etiam faucibus dui non elit bibendum finibus. Nulla vulputate a sem eu semper. Morbi vel mattis elit. Nullam velit nibh, laoreet non ligula at, luctus faucibus mi. Duis non maximus ligula. Phasellus convallis eros quis justo gravida molestie.
Suspendisse sit amet neque quis dui tincidunt mattis eget sed dui. Cras egestas ante ante. Vestibulum vulputate pretium condimentum. Pellentesque a placerat nunc. Donec in urna ac mauris tristique mattis sit amet ut ex. Nullam ac sapien nisi. Donec vitae eros faucibus, imperdiet erat eu, tincidunt velit. Etiam gravida velit id volutpat tempus. Nunc odio odio, tincidunt et mi sit amet, aliquam lobortis tortor. Donec finibus libero vel risus luctus dictum. Pellentesque tristique nunc rhoncus magna scelerisque, sit amet gravida urna laoreet. Vestibulum nec orci ac lorem volutpat rutrum.
</div>
<div class="footer">
<div class="dummyContains"></div>
</div>
</div>
I want to create three divs inside of one 'wrapper'-div. I want the three divs, let's call them 'left', 'center' and 'right', to be visible like three columns next to each other. The columns are shown in the right way, and the height takes up 100% of the screen, but when I add more text in the center div, I want the divs to take all available height of the screen. Like you see in the snippet below, the heights of the divs won't vertically stretch like I'd want them too.
I tried changing the divs to table and table-cell display, but I couldn't get this to work. Besides that I tried messing around with position absolute and relative, but I couldn't get this to work either.
In the real situation the centered div takes up 1024px in width and the left and right divs have a width of 50%-512px.
I searching for a way to solve this but I still couldn't get it to work.
html, body{
margin: 0;
padding: 0;
height: 400px;
}
div#menu{
height: 30px;
background-color: green;
width: 600px;
}
div#wrapper{
height: 100%;
width: 100%;
}
div#left{
background-color: yellow;
float: left;
width: 100px;
height: 100%;
}
div#center{
width: 400px;
background-color: red;
height: 100%;
float: left;
}
div#right{
width: 100px;
float: left;
height: 100%;
background-color: blue;
}
<html>
<body>
<div id="menu">
menu-item 1, menu-item 2, menu-item 3
</div>
<div id="wrapper">
<div id="left">
</div>
<div id="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend tellus eget odio cursus, id dignissim dolor tincidunt. Maecenas libero quam, scelerisque tincidunt est sit amet, consequat faucibus massa. Fusce at varius nunc. Integer mattis velit purus, nec dignissim ipsum pulvinar eget. Nulla facilisi. Suspendisse tempor, turpis eu convallis commodo, erat elit cursus sem, vel dignissim augue urna sit amet purus. Fusce accumsan risus neque, a dapibus velit mollis in. Aliquam varius euismod lorem sit amet bibendum. Donec tempus neque ac interdum pulvinar.
Nulla id iaculis magna. Ut dui lorem, porttitor eget volutpat vel, interdum at nibh. Duis rhoncus, eros ut pharetra euismod, metus metus elementum enim, id egestas sem arcu sit amet nisl. Quisque sed aliquam est. Vivamus bibendum sapien sit amet nisi auctor, et congue elit cursus. Praesent feugiat ex ex, in elementum augue efficitur a. Sed a felis ut est pharetra venenatis eu ac metus. Donec sed nisl semper, dignissim est ac, faucibus dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras bibendum nulla dolor, et tincidunt ligula hendrerit ac.
Integer et tincidunt ante, tincidunt hendrerit lacus. Nullam viverra id enim et viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper posuere pharetra. Nullam ac quam eu nisl vulputate condimentum quis eu ante. Mauris vel egestas tortor. Ut suscipit ex ac commodo pharetra. Sed pharetra convallis ornare. Curabitur posuere dictum sapien, et rutrum nulla tempor sit amet. Nulla sagittis massa quis vulputate vehicula. Proin dignissim lorem vel neque finibus, ut sodales dolor sollicitudin. Maecenas finibus leo non lorem porttitor condimentum. Aenean nec odio id nulla scelerisque bibendum.
Fusce feugiat sem turpis, id iaculis dui condimentum vel. Vivamus tempus semper ultricies. Vestibulum egestas viverra blandit. Nunc leo justo, semper ut elit in, luctus pharetra nibh. Cras ac lectus egestas quam interdum vehicula. Vivamus pulvinar sapien sed gravida pharetra. Mauris hendrerit congue augue, quis vulputate mauris vulputate at. Nulla sit amet ullamcorper ante.
In lobortis sem id arcu dignissim pretium. Sed vulputate eleifend leo. Donec eget risus sit amet ante molestie porta. Phasellus massa diam, lacinia ac imperdiet ut, molestie vitae nisl. Pellentesque tristique ligula lacus, eu tempus est feugiat vitae. Ut ac tincidunt nunc. Nulla et lectus quam. Aenean auctor tempus nibh sed efficitur. Nam blandit dictum ligula bibendum mollis. Proin mollis lorem at viverra porttitor. Duis placerat bibendum libero, id vulputate quam posuere id. Vestibulum vel ex mollis, tempor tortor et, suscipit risus. In augue dui, bibendum et tempus id, hendrerit vitae sapien. Aliquam erat volutpat.
</div>
<div id="right">
</div>
</div>
</body>
</html>
Have you tried using flexbox? You could make them all the same height using something like this:
#wrapper{
display: flex;
flex-direction: row;
}
#left, #center, #right {
display: flex;
}
https://jsfiddle.net/rxdd4mdd/
Update:
I had a look at the website you posted a link to and you need to replace the folowing rules in your css, with these:
#profile-wrapper {
display: flex;
flex-direction: row;
width: 100%;
}
#profile-wrapper .left,
#profile-wrapper .right {
background-color: #ebebeb;
display: flex;
flex: 1;
}
#profile-wrapper #profile-page {
width: 1024px;
display: flex;
flex-direction: column;
}
I've posted the full HTML of the edited page here: http://pastebin.com/9PvQvfiU
Update 2:
This should make sure that it is at least 100% of the height of the body:
body {
display: flex;
flex-direction: column;
}
#profile-page {
flex: 1;
}
Use Style Height :Auto; for wrapper div
#wrapper {
width: 600px;
height: auto;
}
https://jsfiddle.net/kn9spjhn/