I am creating a html/Angular app.
I am using Twitter bootstrap 4 for layout.
I got three columns 1-2-9 and I need them all to be 1) Same height 2) Always full height of the window.
This I solve with 100vh and it looks good BUT the problem is that since my app can add dynamic content in a long list the columns "stop" being the full height of the screen (since 100vh calculates height when first loading the page).
How can I make sure my columns always adjusts automatically to the full height of the window/browser no matter how much dynamic content I add to it?
I think you want to scroll the dynamic content within the fixed 100vh columns. If so, you can wrap the inner dynamic content within a div and use overflow properties for larger data.
Example:
HTML:
<div class="row">
<div class="col-md-1 col-lg-1 col-xl-1 column column-first">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 column column-second">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
<div class="col-md-9 col-lg-9 col-xl-9 column column-third">
<div class="scrollable-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet viverra neque. Mauris molestie eu tortor a faucibus. Pellentesque porttitor at ex vel condimentum. Mauris ac tortor interdum, mollis felis ac, efficitur neque. Donec volutpat sem vel mauris egestas porta. Phasellus neque justo, accumsan eu lacus ac, ultricies ultrices odio. Vestibulum nibh leo, aliquam ut hendrerit eu, pretium eget magna. Nam fringilla nulla mauris, sit amet scelerisque mauris imperdiet ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at eleifend lectus, vitae tincidunt leo. Nullam lacinia hendrerit lacus eu bibendum.</p>
<p>End</p>
</div>
</div>
</div>
CSS:
.column{
height: 100vh;
overflow-x: hidden;
}
.scrollable-text{
width: calc(100% + 30px);
overflow-y: scroll;
box-sizing: border-box;
height: 100%;
}
.column-first{
color: #fff;
background-color: #02547D;
}
.column-second{
color: #fff;
background-color: #0285A8;
}
.column-third{
color: #fff;
background-color: #02BEC4;
}
CodePen:
https://codepen.io/debrajr/pen/gqZbpx
Related
I want the text to not wrap white-space: nowrap and for overlapped content to be hidden overflow: hidden, but I DO still want there to be 20px padding on either side (eg, text in coloured boxes to be 20px away from edges).
I couldn't seem to find a good answer on SO already. Pointers would be much appreciated.
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
The overflow should be set on the <p>:
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col > p {
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
I'm trying to get a row of 3 cards, whereby the row extends to the max-height of card #1 or card #2 based on their content, and the third card to also get the same max height but overflow-y:scroll even when the content is longer than cards 1 & 2.
I can get the first two cards extending to the tallest of either, but can't seem to limit the third card to this height.
EDIT: Solved with JS > https://codepen.io/chrisj75/pen/jOmbEEQ
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title> <body>
<div class='container'>
<input type='button' value='Fix Height' onclick='fixHeight();' />
<div class='row'>
<div class='card-group col-md-12'>
<div class='card col-md-4'>
<div id='card1'>
Card #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id mollis tellus. Proin faucibus mauris non felis placerat, non posuere nibh tristique. Quisque elementum quam urna, tempus iaculis augue convallis ullamcorper. Proin ac laoreet augue. Morbi quis ipsum turpis. Nullam finibus blandit sem, fringilla semper diam tincidunt quis. Nam venenatis dictum eleifend. Donec rutrum non lectus et lobortis. Donec congue, nunc eget consectetur tempus, massa arcu ornare eros, ac scelerisque mauris velit ut libero.
</div>
</div>
<div class='card'>
<div id='card2'>
Card #2
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenxatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
</div>
</div>
<div class='card col-md-4'>
<div id='card3'>
Card #3
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
</div>
</div>
</div>
</div>
CSS
#card1, #card2, #card3 {padding:2rem;}
#card3 {overflow-y:scroll;}
.hidden {display:none !important;}
JS
function fixHeight() {
$('#card3').addClass('hidden');
var card1 = $('#card1').height() ;
var card2 = $('#card2').height() ;
h = Math.max(card1,card2) ;
//window.alert(h);
$('#card3').height(h).removeClass('hidden')
}
I have built a very basic responsive web page here:
https://codepen.io/beckytownsend/pen/wqaoRR
I want to split the main content into who sections, paragraphs on the left and the sidebar on the right when it expands past 1200px, like so..
P= paragraph, S= Sidebar
P S
P
I also want the two section to sit in the center of the page. I can't seem to figure out how to get this to work! Please could someone have a look at my code and let me know what I can do?
.main-content{
justify-content: center;
align-items: center;
display: inline-flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/*Paragraphs within main content*/
.paragraph {
float:left;
width: 60%;
order: 1;
flex-direction: column;
}
/*Sidebar*/
.sidebar {
background: teal;
float: right;
width: 30%;
order: 2;
}
<div class="main-content">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br>
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia. Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br>
Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc, consequat nec purus non, volutpat egestas mauris.
</p>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
Wrap the paragraphs in a new container and give that the following:
.left {
display: flex;
flex-direction: column;
}
You can then remove all the flexbox properties from the paragraph. Note that float does not work in a flex container.
.main-content {
justify-content: center;
display: inline-flex;
display: -webkit-flex;
-webkit-justify-content: center;
justify-content: center;
}
.left {
display: flex;
flex-direction: column;
padding-right: 50px;
}
/*Sidebar*/
.sidebar {
background: teal;
min-width: 30%;
}
<div class="main-content">
<div class="left">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non
euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est
lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br> Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui
sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna
ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br> Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia.
Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br> Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit
amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida
nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc,
consequat nec purus non, volutpat egestas mauris.
</p>
</div>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan
aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque
id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="position: relative; min-height: 600px; height: auto; width: 800px; border: 3px solid #000000; padding: 10px;">
<div style="position: relative; display: inline-block; min-height: 500px; width: 300px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="position: relative; display: inline-block; min-height: 500px; width: 400px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Clearly, the nested div on the left is the shorter of the two. How can I make sure that the left div can stay at the same level from the top as the div on the right?
Setting vertical-align:top in the styles of the first (left) div works in Chrome and Firefox (didn't try IE or Safari, I assume Safari works).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="min-height: 600px; height: auto; width: 800px; border: 3px solid rgb(0, 0, 0); padding: 10px; overflow: auto;">
<div style="min-height: 500px; width: 300px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px; float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="min-height: 500px; width: 400px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Hope this solves your issue.