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/
Related
I have a flex child, inside a scrollable flex column. I want it to set its width to 100% of the scrollable flex column's parent.
It's because I want to have a notifications bar, and it automatically opens if a new notification arrives, and currently the contents of the scrollable flex are jumping around (every item is flex).
Let me demonstrate:
div {
display: flex;
}
.row {
flex-direction: row;
}
.col {
flex-direction: column;
}
.target-width {
height: 100%;
width: 500px;
height: 500px;
}
.scrollable {
overflow: scroll;
height: 100%;
flex: 1;
}
.content {
background: yellow;
width: 100%;
height: 100%;
}
.notifications {
background: blue;
height: 100%;
flex-basis: 200px;
}
<div class='row target-width'>
<div class='col scrollable'>
<div class='col content'>content</div>
</div>
<div class='col notifications'></div>
</div>
At the above example I would expect content to have width of 500px, even though its direct parent scrollable has a width of 300px.
Let's assume that every width, and height is unknown, the above are just for demonstration. So all we know is we want to set content's width as width of target-width. Not knowing exactly the width of target-width, is there a way to make that work?
I think I understand your need and I'm not really sure if it can be done only with css.
Here is a JS code that can solve your problem. Please keep in mind that my solution maybe is not the best one, but I think It's a starting point.
Put this code into Head:
<script type="text/javascript">
function setContentWidth() {
var elementTW = document.querySelector('.target-width');
var styleTW = window.getComputedStyle(elementTW);
var widthTW = styleTW.width;
document.querySelector(".content").setAttribute("style","width:" + parseInt(widthTW) +"px" );
}
window.onload = setContentWidth;
</script>
Edited my answer to fit the question. Now content receive the parent width.
Tell me if this solve your problem or you need further assistance.
I am not sure if it is the solution to what you are looking for. I have applied some changes to the code to reproduce what I think I understand you want to achieve. Could you review it and tell me if it is the result you are looking for?
div {
display: flex;
box-sizing: border-box;
}
.row {
flex-direction: row;
}
.col {
flex-direction: column;
}
.target-width {
/*width:500px;*/
width: 100%;
height: 100vh;
position:relative;
}
.scrollable {
overflow-y:hidden;
overflow-x: auto;
height: 100%;
width:100%;
flex: 1;
}
.content {
background: yellow;
width: 100vw;
height: 100%;
}
.notifications {
background: blue;
opacity:.5;
height: 100vh;
width: 100px;
position:absolute;
z-index:1;
right:0;
}
<div class='row target-width'>
<div class='col scrollable'>
<div class='col content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquam quis erat ut rhoncus. Nunc non sollicitudin eros. Vivamus sollicitudin, orci vitae congue rutrum, lacus nulla blandit dolor, nec egestas est est eu est. Donec mi metus, tempor quis ante quis, viverra ornare nulla. Aliquam fringilla pharetra nisi, ac bibendum tortor rhoncus auctor. Sed quam elit, finibus vel dignissim rhoncus, viverra ut risus. Sed placerat, massa et vehicula feugiat, ex augue pulvinar tortor, eget sodales sem libero non metus. Fusce laoreet sollicitudin erat a posuere. Mauris at sem metus. Sed posuere quam bibendum malesuada auctor. Ut pulvinar eros quis massa molestie, sed tempus urna ultrices. Vivamus arcu turpis, porta ut vehicula at, dapibus vitae massa.
Nulla facilisi. Curabitur a dignissim purus. Morbi rhoncus sit amet mauris sed viverra. Sed eget justo eget dui commodo vehicula. Pellentesque convallis ultricies quam, ac maximus purus mollis vitae. Nam ut erat erat. Ut ultrices quam magna, vel efficitur massa finibus nec. Maecenas turpis tellus, tempus ut iaculis quis, elementum rhoncus nunc. Quisque egestas condimentum nunc, non feugiat erat malesuada eu. Donec in justo ullamcorper, molestie justo ac, elementum leo. Morbi ultricies et sapien sit amet bibendum. Sed ornare eget lectus vel tempor. Suspendisse sodales ipsum in tincidunt dictum. Duis placerat ligula ac sem imperdiet sollicitudin.
Pellentesque ex risus, rutrum vel mi sed, egestas faucibus nisl. Mauris rutrum sem justo, eget posuere neque aliquam non. Sed molestie neque mauris, quis gravida turpis rutrum eget. Duis eu mauris vitae arcu suscipit sagittis. Duis aliquam tortor quis massa placerat vestibulum. Fusce eu purus non eros ornare aliquam a accumsan turpis. Maecenas eu nunc dignissim, ornare diam et, malesuada est.
Donec eu commodo libero. Donec fermentum metus in quam lobortis, ut eleifend felis posuere. Donec sed leo malesuada, viverra tellus sit amet, egestas leo. Cras tempus, ex et tincidunt varius, magna mauris dignissim ex, in mattis dui erat eu arcu. Praesent tristique faucibus massa eget malesuada. Aliquam vitae enim quam. Phasellus maximus ullamcorper leo, auctor luctus ipsum volutpat quis. Ut nec neque non felis bibendum ultricies. Cras leo odio, condimentum et eros at, feugiat lacinia sem. Sed odio sem, lobortis sed enim vitae, bibendum faucibus velit. Ut eget diam consequat, imperdiet sem at, hendrerit ligula. Mauris egestas consequat magna, gravida fermentum leo malesuada pellentesque. Sed non pellentesque purus, at congue arcu.<br/></div>
</div>
<div class='col notifications'>
</div>
</div>
I have a container that can not have an explicit height, it must expand to the height of the children. Both children must be equal height regardless of content, which is set by the taller of the two children.
Here is a fiddle of my issue:
https://jsfiddle.net/efrntzwx/74/
I need the blue section to expand to the height of the red container while keeping padding intact.
html, body, .container {
/* height: 100%; */
}
body {
padding-bottom: 100px;
}
.container {
display: flex;
width: 100%;
border: 1px solid red;
}
.child1, .child2 {
height: 100%;
width: 50%;
padding: 50px 100px;
}
.child1 {
border: 1px solid green;
}
.child2 {
border: 1px solid blue;
}
.child1content {
height: 100%;
background-color: green;
}
.child2content {
height: 100%;
background-color: blue;
}
<html>
<body>
<div class="container">
<div class="child1">
<div class="child1content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus eget ex semper feugiat. Etiam maximus non est at egestas. Proin fermentum ipsum eget enim iaculis mattis eu non elit. Fusce fringilla neque vel mauris vulputate elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sodales erat augue, a volutpat nunc ultrices quis. Cras feugiat, metus a dapibus condimentum, lorem nulla malesuada enim, et sodales arcu sapien eu sem. Proin vel vulputate magna. Integer rhoncus iaculis justo, eget dignissim massa tempus a. Nullam ut malesuada diam. Vestibulum aliquam ligula eget turpis viverra dignissim. Maecenas elementum nec erat sit amet bibendum. Nulla in hendrerit orci. Duis elit dui, iaculis quis dapibus condimentum, viverra id libero. Suspendisse potenti.
Etiam blandit scelerisque eleifend. Vestibulum non mauris erat. Mauris sed massa sodales, tristique mi ut, suscipit leo. Nam porttitor urna ac nulla malesuada, ac blandit orci bibendum. Aliquam luctus quis ante ac suscipit. Sed sed sapien vestibulum nulla venenatis sodales. Pellentesque ultricies tellus non vehicula ornare. Cras quis aliquet tellus. Mauris nec leo quis metus dignissim laoreet non a nisi. Aenean finibus nunc a augue laoreet, porttitor ullamcorper odio imperdiet. Vivamus pellentesque, leo vitae dignissim varius, elit metus faucibus justo, vel pharetra lectus erat eu lorem. Pellentesque scelerisque tortor elit, at facilisis nisi suscipit at. Nulla facilisi.
</div>
</div>
<div class="child2">
<div class="child2content">
test
</div>
</div>
</div>
</body>
</html>
I added flex-1 property for two child. In this way, the two elements will have the same width and height in each case. What I have changed and added is the specification in the comment lines.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding-bottom: 100px;
}
.container {
display: flex;
width: 100%;
border: 1px solid red;
}
.child1,
.child2 {
padding: 50px 100px;
/* if you want to always same height and width in the container remove this*/
}
.child1 {
border: 1px solid green;
flex: 1;
/*added*/
}
.child2 {
border: 1px solid blue;
flex: 1;
/*added*/
}
.child1content {
height: 100%;
background-color: green;
}
.child2content {
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="child1">
<div class="child1content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus eget ex semper feugiat. Etiam maximus non est at egestas. Proin fermentum ipsum eget enim iaculis mattis eu non elit. Fusce fringilla neque vel mauris vulputate elementum. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sodales erat augue, a volutpat nunc ultrices quis. Cras feugiat, metus a dapibus condimentum, lorem nulla malesuada enim, et sodales arcu sapien eu sem.
Proin vel vulputate magna. Integer rhoncus iaculis justo, eget dignissim massa tempus a. Nullam ut malesuada diam. Vestibulum aliquam ligula eget turpis viverra dignissim. Maecenas elementum nec erat sit amet bibendum. Nulla in hendrerit orci.
Duis elit dui, iaculis quis dapibus condimentum, viverra id libero. Suspendisse potenti. Etiam blandit scelerisque eleifend. Vestibulum non mauris erat. Mauris sed massa sodales, tristique mi ut, suscipit leo. Nam porttitor urna ac nulla malesuada,
ac blandit orci bibendum. Aliquam luctus quis ante ac suscipit. Sed sed sapien vestibulum nulla venenatis sodales. Pellentesque ultricies tellus non vehicula ornare. Cras quis aliquet tellus. Mauris nec leo quis metus dignissim laoreet non a nisi.
Aenean finibus nunc a augue laoreet, porttitor ullamcorper odio imperdiet. Vivamus pellentesque, leo vitae dignissim varius, elit metus faucibus justo, vel pharetra lectus erat eu lorem. Pellentesque scelerisque tortor elit, at facilisis nisi
suscipit at. Nulla facilisi.
</div>
</div>
<div class="child2">
<div class="child2content">
test
</div>
</div>
</div>
</body>
</html>
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>
This duplicate didn't solve because I don't want to use JS. CSS: Sidebar fixed width with background to edge of window
This is what I'm trying to achieve:
Basically all the content must be inside a div with a specific width and set to the center with margin: 0 auto. Inside this div there must be a main div with a white background and a sidebar with a blue background.
I don't want to use javascript. Isn't this possible with pure CSS?
CURRENT CODE (not working): https://jsfiddle.net/0p9jrnq1/1/
Try this..
.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}
Doing this with fixed with seems kind of tough for me. If you can do with percentages, then this works. All you have to add to this is use media queries in order to reduce the size or hide the left and right gutters when viewing this layout in smaller screens.
HTML:
<div class="container">
<div class="left-gutter"></div>
<div class='content'>
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
<div class="right-gutter">
</div>
CSS:
.container {
width:100%;
}
.container > .left-gutter, .container > .right-gutter {
width:20%;
}
.container > .left-gutter {
height:100%;
float:left;
}
.container > .right-gutter {
height:100%;
background: #0000FF;
float:right;
}
.container > .content {
width: 60%;
height:100%;
float:left;
min-width: 200px;/*Your minimum fixed width here*/
}
.container > .content > .main {
width: 80%; /*Width for the content area in %*/
float: left;
height:100%;
background:#FFFFFF;
}
.container > .content > .sidebar {
width: 20%; /*Width for the sidebar area in %*/
float: right;
height:100%;
background:#0000FF;
}
Make sure width percent of main and sidebar add up to be 100%
Using padding and margins will require you to adjust the widths of the elements accordingly.
Take a look at this layout
body {
margin: 0;
padding: 0;
}
#header {
background-color: #02CC02;
width: 100%;
position: relative;
z-index: 2;
}
#header .clearfix {
padding: 40px;
}
#main-content {
background-color: white;
}
.page-content {
margin: 0 auto;
width: 55%;
}
#sidebar {
background-color: rgba(238, 130, 238, 0.92);
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#sidebar .clearfix {
padding: 60px;
}
<div id="header">
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
<p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
<p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
<p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
</div>
</div>
<div id="sidebar">
<div class="clearfix"></div>
</div>
Use JS to show and hide the sidebar
I am confused on how to get these divs to stack the way I want them to. I can't get the main content div (.innerdiv2) to stack below the first header div (.innerdiv1) that has/involves absolute positioning (so that the one image is on top of the other).
I also need to refrain from using fixed height on the image. This is the suggestion I have found most when searching for related posts and solutions. But I don't want that (fixed height) to lock in where the second div starts on the page. If the screen is sized down then I want the two header images to size down proportionally, which means they will decrease in height and the second div should start higher, which is why I don't want to use fixed height. Is this possible?
Here is the code I am working with:
.maindiv {
position: relative;
}
.innerdiv1 {
max-width: 975px;
width: 100%;
}
.imgbg {
position: absolute;
z-index: 102;
max-width: 975px;
width: 100%;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
}
.innerdiv2 {
position: relative;
width: 100%;
}
.tbl1 {
width: 100%;
max-width: 975px;
" border="0" cellpadding="0" cellspacing="0;
}
.imgfooter {
width: 100%;
max-width: 975px;
position: relative;
cursor: pointer;
}
<div class="maindiv">
<div class="innerdiv1">
<img class="imgbg" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
<img class="imglogo" src="data:image/jpeg;base64,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">
</div>
<div class="innerdiv2">
<table class="tbl1">
<tr>
<td>
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices justo justo, ac consequat arcu pellentesque id. Nulla hendrerit dui vitae neque venenatis consequat. Morbi justo eros, dictum et enim et, pellentesque fermentum augue. Aliquam
non sapien eros. Sed auctor enim ac blandit rhoncus. Vivamus condimentum ex nulla, quis laoreet risus sodales quis. Vivamus interdum aliquam ultricies. Donec consectetur turpis et vehicula hendrerit. Fusce ac dui nec odio convallis malesuada
id ultricies lectus.
</p>
<p>
2. Nam mi enim, bibendum id porttitor quis, posuere ac arcu. Donec pulvinar enim nec gravida accumsan. Fusce enim risus, laoreet nec venenatis aliquam, feugiat a sapien. Aenean vulputate fermentum ex, at cursus diam cursus vel. Vivamus maximus velit mi,
ut auctor libero hendrerit ut. Donec vel pharetra nulla. Aenean imperdiet elementum felis vel finibus. Aenean eu luctus velit, nec accumsan velit.
</p>
<p>
3. Nullam pharetra orci nec lacinia bibendum. Ut tortor dolor, feugiat sed nulla ac, ultricies vehicula mi. Donec in arcu tincidunt, convallis lectus eu, ornare eros. Duis mollis ultrices lacus vulputate iaculis. Quisque urna lorem, consectetur in sollicitudin
ut, volutpat et ex. Integer finibus malesuada ipsum, eget consequat nulla interdum et. Maecenas ullamcorper ante turpis, vitae mattis libero ultricies a. Duis bibendum sapien vitae molestie interdum.
</p>
<p>
4. Vestibulum cursus ipsum augue, eget consequat dui ullamcorper sed. Phasellus a ligula eu tellus posuere tristique quis eu odio. Nullam id est in orci pharetra tempus sed dictum sem. Phasellus vehicula iaculis augue ac scelerisque. Sed pretium eros
sed tortor condimentum viverra. Quisque euismod sed ante eu facilisis. Quisque rhoncus auctor arcu at aliquet. Pellentesque eleifend leo at nisl fringilla sagittis. Sed augue erat, faucibus a nulla at, porttitor volutpat dui.
</p>
<p>
5. Maecenas semper erat euismod, ultricies augue et, aliquam ipsum. Sed commodo diam a posuere tristique. Vestibulum placerat risus orci, vitae finibus libero vulputate sed. Vestibulum ac nulla maximus, lobortis turpis interdum, tempor lectus. Fusce pretium
scelerisque viverra. Vestibulum aliquam at ex eget sollicitudin. Proin in vehicula velit. Nam eget metus sed dui lobortis pulvinar sit amet sed tortor. Aliquam eu nunc a tortor ultricies euismod.
</p>
</td>
</tr>
<tr>
<td>
<img class="imgfooter" src="http://www.pegaweb.com/tutorials/web-page-header/5.gif">
</td>
</tr>
</table>
</div>
</div>
https://jsfiddle.net/b2tngLym/8/
EDIT : See this fiddle
.imgbg { width: 100%; }
.innerdiv1 {
max-width: 975px;
width: 100%;
position: relative;
}
.imglogo {
position: absolute;
z-index: 103;
margin-left: 40px;
margin-top: 20px;
width: 33%;
left: 0;
top: 0
}