So I already tried Google for this problem, but couldn't find a solution. I'm currently trying to divide my page in to 50% columns. The left column should contain an image and a form, the right one a text description (with a variable size).
I want the sections of the first column, to not be affected by the ones in the second one, so the same logic as column-count would use. If I use grid-template-columns: 50% 50%; to create my columns and I adjust the browser window, the text in the right column gets longer and pushes down the form under the image, which creates a blank space.
Is there any way using grid-template-columns and not having the content of both related to each other, so there are only two columns and the spacing between each item just stays the same when resizing the browser window?
Forgot to mention that when the browser window gets resized, two columns should merge to one and the order of the sections should be image, text, form. Is there a way to adapt the order when resized?
CSS code used:
.grid-custom{
padding-left: $grid-gutter;
display: grid;
grid-template-columns: 50% 50%;
grid-gap: $grid-gutter;
#include media-query($small) {
padding-left: $grid-gutter-mobile;
grid-gap: $grid-gutter-mobile;
grid-template-columns: 100%;
}
}
HTML does not have to be large to display the concept.
Consider this:
* { box-sizing: border-box; }
.layout-wrap {
display: flex;
min-height: calc(1px + 40vw);
}
.div1 { margin-right: 0.5em; }
.div1, .div2 { width: 50%; border: 4px solid black; }
<div class="layout-wrap">
<div class="div1"> <h1>IMAGE & FORM</h1> </div>
<div class="div2"> <h1>TEXT</h1> </div>
</div>
Using flex you can achieve this. Please refer snippet below for css part.
.container{
display: flex;
}
.col1{
background: blue;
width: 100%;
}
.col2{
background: red;
width: 100%;
}
.form{
width: 100px;
}
<div class="container">
<div class="col1">
<img src="data:image/jpeg;base64,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">
<div class="form">
Name: <input type="text"><br>
Class: <input type="text"><br>
Roll No: <input type="text">
</div>
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel odio non felis consectetur consectetur ut in felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis cursus metus. Nulla ligula purus, pellentesque eu dignissim fermentum, finibus nec mi. Curabitur sapien ex, dignissim eu accumsan sollicitudin, semper sed risus. Mauris pulvinar nisi quis semper interdum. Ut eu hendrerit felis, a gravida neque. Donec tincidunt quam et justo tincidunt tincidunt. Donec in quam tempus, tempus erat vel, fringilla lectus. Nullam iaculis non ipsum sodales varius. Etiam sagittis egestas orci non aliquet. Sed venenatis sodales sem, ut ultrices lacus dapibus quis. Curabitur volutpat libero eget volutpat ornare. Phasellus condimentum laoreet risus ultrices vulputate. Vestibulum dignissim ipsum et leo interdum varius. Maecenas vehicula enim id massa tincidunt scelerisque.
Sed diam nisi, aliquet eu massa non, tempor vehicula libero. Nam nec bibendum augue, nec eleifend orci. Quisque efficitur volutpat dui id semper. Duis ac mi leo. Donec eget suscipit ex, suscipit finibus nulla. Sed convallis enim vel lorem porttitor tincidunt. Etiam convallis facilisis urna. Nullam viverra tempor metus, ac pellentesque massa sodales sit amet. Maecenas sed consequat elit, ut volutpat arcu. Nam dui mi, vestibulum ut enim id, fermentum tempor lorem. Nunc eleifend, magna lobortis blandit pulvinar, justo tellus placerat lorem, in venenatis augue velit vel neque.
Donec fermentum cursus urna ut mattis. Fusce tincidunt augue volutpat, molestie dolor ac, vehicula dolor. Duis ante orci, pulvinar sit amet tincidunt volutpat, malesuada et urna. Suspendisse at hendrerit neque. Nullam vel varius tellus. Morbi sed sapien at nisl consequat interdum. Mauris quis odio id nulla suscipit feugiat sit amet et leo. Vivamus viverra pellentesque ligula at aliquam. Sed quis massa ullamcorper, ullamcorper turpis quis, tempus lorem. Sed quis nunc fermentum, commodo ante et, pulvinar tortor. Donec tincidunt sagittis nibh nec consectetur. Proin facilisis pretium mi, vitae pharetra neque sollicitudin at. Etiam condimentum odio id tortor finibus, eget porttitor mi aliquam. Vestibulum vulputate tincidunt tortor nec volutpat. Phasellus ut est risus. Sed convallis quis libero id congue.
Sed tempus, dui a sodales ullamcorper, lorem nunc varius lectus, nec sollicitudin mi leo eu mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis porttitor ante. Donec tincidunt molestie nunc posuere maximus. Praesent rhoncus cursus sem. Sed vitae vulputate urna. Morbi nec purus sit amet enim pharetra eleifend at eget nisi. Aliquam feugiat sodales massa, ut aliquet magna. Mauris justo metus, mollis ac porta ut, molestie hendrerit dolor. Mauris sed est interdum, feugiat eros eu, vehicula odio.
Vivamus lorem nibh, accumsan eget nibh efficitur, aliquam volutpat metus. Sed id dolor eget nisi ultricies tempor et blandit lectus. Fusce id ipsum at est congue ultrices. Sed id rutrum mi. Suspendisse semper justo ac metus finibus, vitae accumsan leo sagittis. Aliquam quis elit dolor. Morbi et tellus venenatis, imperdiet elit ac, semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ullamcorper porta lectus, in ullamcorper eros scelerisque ut. Sed id odio sit amet dolor vulputate finibus vel non dolor. Praesent orci lorem, porta sit amet turpis molestie, volutpat vestibulum felis. Phasellus non orci aliquet, vulputate risus in, tempor mi.
</div>
</div>
No need to use any CSS for 50%-50% screen or media query if u use this
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="border col-sm-6">
<div>
<img src="sample.jpg">
</div>
<div>
<h2>Contact us</h2>
<form >
First name:
<input type="text" name="firstname">
<br><br>
Last name:
<input type="text" name="lastname" >
<br><br>
Email ID:
<input type="email" name="email" >
<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="border col-sm-6">
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</div>
</div>
</div>
</body>
</html>
Related
Problem
I am working on a project in which I need to convert HTML to a PDF. I am doing this simply with the browsers print capabilities. The problem came when I added headers and footers to my document using the method described here.
In my document I am also using css columns, and for some reason, only when there is at least one full column AND less than one page of content being printed, it adds a blank page at the beginning and end of the document leaving me with 3 pages. This is not ideal as I am aiming to automate this process in the future and having extra blank pages with just the header and footer being printed is not acceptable.
I initially thought there must be some invisible margin causing the blank pages to be added, but as soon as it gets to more than one page of content the blank pages disappear and the output is as expected.
I am not proficient with CSS at all so if someone has any insight as to why this is happening, and preferably how I can solve it, I would be very grateful to hear it.
Here is the HTML and CSS which causes the extra blank pages when printed. To see how it reverts back to normal, just add more content to the page div so that it creates more than one page of content.
EDIT: To see the problem you'll have to run this code in the firefox browser since chrome doesn't support the column-fill property meaning the columns will be balanced and none of them will be filled.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
columns: 3;
column-fill: auto;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<!-- <div class="page">PAGE 1</div>
<div class="page">PAGE 2</div> -->
<div class="page" style="line-height: 1;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
<!-- fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum. -->
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
I've been learning HTML and CSS for a little while now but I am pretty self taught so sorry if this seems to be a pretty basic question.
I have this container in the middle of my page (it's a carousel but I don't think that makes a difference) and I'm trying to position two things: a large word on top of it (inside a div) and navigation buttons below it. Currently, I've positioned them both there using position: fixed; and top and left elements. This isn't ideal of course because on mobile and devices of different widths these elements are in completely different positions.
Here's the HTML for the container and navigation buttons, the carousel controls are there too:
<div id="container">
<input hidden type="radio" name="carousel-control" id="button_a" checked/>
<input hidden type="radio" name="carousel-control" id="button_b"/>
<input hidden type="radio" name="carousel-control" id="button_c"/>
<input hidden type="radio" name="carousel-control" id="button_d"/>
<div id="title">explore</div> /*the text I want on top*/
<div id="carousel">
<div class="p-wrapper">
<section class="panel_a">
<h2>Panel a</h2>
<div class="headerdivider"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare faucibus diam id maximus. Fusce at efficitur nunc. Curabitur sed ullamcorper orci. Nam nulla enim, ultricies nec lectus a, commodo volutpat nisi. Pellentesque facilisis lacinia ante, eu pulvinar ante varius a. Fusce tincidunt efficitur tempor. Praesent pretium felis consectetur posuere sagittis. Sed luctus nisl non vestibulum semper. Vivamus mi velit, porttitor ac malesuada at, vulputate venenatis augue.</p>
<p>Morbi faucibus, nisi ac vulputate mattis, turpis tortor maximus nibh, nec interdum lectus sem sit amet enim. Integer non nulla vitae ex gravida egestas. Fusce sodales neque ut erat tempor euismod. Quisque imperdiet rhoncus pellentesque. Fusce vitae efficitur dolor, nec laoreet lacus. Nulla orci purus, cursus sit amet posuere ac, ultrices sed dui. Ut bibendum, dui non euismod lobortis, mi neque pretium lacus, in pulvinar libero mauris eu sem. Morbi ut felis finibus, posuere risus sit amet, malesuada leo.</p>
<p>Nulla quis molestie mi. Cras quis magna dolor. Suspendisse a scelerisque ligula, ullamcorper imperdiet justo. Ut sit amet nisl malesuada, varius turpis quis, convallis urna. Vestibulum sed odio eget lorem porta dapibus. Mauris augue sapien, scelerisque vel neque vitae, vulputate iaculis tellus. Sed accumsan egestas sem congue vehicula. Fusce quis blandit nibh, non bibendum lorem. Integer maximus mi non eros tincidunt pretium. Curabitur tempor nisi a aliquet dictum. Sed pellentesque venenatis ex ac fermentum. Aliquam vitae tincidunt urna.</p>
<p>Nulla sagittis quis purus vitae consequat. Nullam pharetra dignissim tempus. Pellentesque egestas elit vel arcu condimentum euismod ut eu nisi. Fusce erat lectus, placerat quis egestas posuere, sollicitudin non ligula. Suspendisse potenti. Fusce vel leo ultrices, vehicula leo quis, semper quam. Cras mollis quis sem in tempor. Proin sed dui eu arcu efficitur pulvinar at sed leo. Donec rhoncus rhoncus est, eleifend posuere neque aliquet in.</p>
</section>
<section class="panel_b">
<h2>Panel b</h2>
<div class="headerdivider"></div>
{block:AskEnabled}
<p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/spinningsilvers.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>{/block:AskEnabled}
</section>
<section class="panel_c">
<h2>Panel c</h2>
<div class="headerdivider"></div>
<p>Fusce convallis arcu mauris, vitae semper ligula maximus vitae. Morbi a nibh id justo ullamcorper tincidunt. Aliquam et mollis mauris, eu varius metus. Praesent eget mi ac diam congue iaculis. Praesent accumsan euismod tempus. Aenean tempor libero et eros pellentesque molestie. Pellentesque malesuada ligula ut hendrerit laoreet. Ut turpis neque, tempor in ultrices sed, hendrerit ac leo. Nam placerat dolor sit amet ligula bibendum malesuada. Donec sagittis ultricies ex id mattis.</p>
<ul>
<li>Aliquam iaculis enim ut mi bibendum tincidunt.</li>
<li>Nulla quis elit in lorem vulputate laoreet.</li>
<li>Praesent non lacus euismod, ultricies lectus ac, vehicula arcu.</li>
<li>Integer lobortis ipsum vitae velit mollis, at commodo ligula suscipit.</li>
</ul>
<p>Sed ut leo et mi tristique feugiat. Nunc fermentum diam mauris, in ultricies neque tincidunt dictum. Quisque ac odio dignissim, ornare enim condimentum, faucibus erat. Sed tortor turpis, imperdiet dignissim lacus eget, dignissim vehicula lorem. Mauris semper mi lacus, sit amet rutrum lacus tincidunt sed. Curabitur vel nisl eu magna placerat pretium. Curabitur malesuada sagittis tortor, eget volutpat mi pellentesque quis.</p>
</section>
<section class="panel_d">
<h2>Panel d</h2>
<div class="headerdivider"></div>
<p>Aenean maximus accumsan mauris. Praesent rutrum vitae purus et mattis. Nunc at mi et diam pulvinar euismod. Curabitur interdum, leo quis tincidunt pharetra, risus nisl mollis velit, interdum consectetur justo orci in nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus elit turpis, tincidunt non dui et, molestie maximus nisl. Duis pretium eros sed ultricies convallis. Pellentesque vitae tempor lorem, eu laoreet metus. Vivamus sit amet lorem libero. Vestibulum tristique ligula in gravida volutpat. Sed facilisis ipsum velit, et pharetra nisi ullamcorper ut. Maecenas purus dui, tincidunt non ipsum vel, bibendum aliquam elit. Cras rutrum velit diam, semper aliquet libero posuere nec.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut eleifend lacus. Sed fringilla ullamcorper justo, porttitor cursus nisl. Sed et mi aliquet, rutrum erat at, porttitor felis. Mauris consequat mauris id posuere dictum. Proin nec congue purus, nec rhoncus justo. Cras sit amet neque eu ex feugiat auctor at dignissim augue. Sed commodo tellus id erat lobortis, sit amet elementum felis commodo. Ut massa diam, tristique vel lacinia sed, vulputate eget mauris. Fusce lacinia bibendum iaculis.</p>
</section>
</div> <!-- // .p-wrapper -->
</div> <!-- // #carousel -->
<div id="navigation"> /*the nav buttons that will go below*/
<label for="button_a" class="label_a"> <span>about</span> </label>
<label for="button_b" class="label_b"> <span>message</span> </label>
<label for="button_c" class="label_c"> <span>navigate</span> </label>
<label for="button_d" class="label_d"> <span>social</span> </label>
</div> <!-- // #navigation -->
Here's the CSS for the word I'm trying to put above:
#title {
font-family:'Abril Fatface', cursive;
font-size:40px;
position:fixed;
top:140px;
left:135px;
}
Here's the CSS for the navigation that I'm trying to put below:
#navigation {
position:fixed;
bottom:175px;
justify-content:center;
}
Here's a picture of
what I'm looking to get just with better code of course.
I've tried position: absolute; paired with top: 0px; and left: 0px and I tried putting the div for the words to go above in various spots but nothing's working. (Not sure this makes a difference but I'm working with Tumblr code here.) This is my first time posting here and as I mentioned I'm not too too advanced with coding. Thanks!
You could wrap everything that belongs together actually together, meaning inside a wrapper-element. That way, you can simply use display: flex with flex-flow: column on their parent to lay them out in a column.
Then, with the align-items-property, you can say how/where they should align.
For the navigation I have overridden it with align-self: stretch so that I can center its content.
However, one could have also given the parent align-items: stretch (which is default), and the title align-self: flex-start. Both will give the expected result as long as .carousel is the widest element of the three.
As you see, by using a wrapper-element, you don't need to fiddle around with numbers to position them, and as a bonus, you group them together making it actually semantically clear that they belong together.
body {
display: flex;
}
section {
display: flex;
flex-flow: column;
align-items: flex-start;
}
section > .carousel {
border: 1px solid black;
width: 400px;
height: 300px;
}
section > nav {
align-self: stretch;
display: flex;
justify-content: center;
gap: 0.8rem;
}
<section>
<h1>explore</h1>
<div class="carousel"></div>
<nav>
<a>Some link</a>
<a>Another link</a>
<a>A third link</a>
</nav>
</section>
My page does not scroll even when the content exceeds the page.
I've been changing the position settings of the body, html and div elements but I see no difference.
Here's the HTML:
html {
position: absolute;
overflow-y: scroll;
}
body {
background-color: dimgray !important;
}
body div {
position: absolute;
}
header {
position: fixed;
padding: 10px 0;
background-color: dimgray;
border-bottom: 1px solid black;
}
<header class="container-fluid">
<div class="row">
<div class="col-sm-4"><img src="/Fedecocagua.png"></div>
<div class="col-sm-8">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="Pruebah2.html" target="_blank" style="color: black">¿Quiénes somos?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bottom" style="color: black">Contáctanos</a>
</li>
</ul>
</div>
</div>
</header>
You are declaring your html and body as position:absolute, of course the page will not scroll. Remove this declaration as below:
body {
background-color: dimgray !important;
}
header {
position:fixed;
padding: 10px 0;
background-color: dimgray;
border-bottom: 1px solid black;
}
An element which is positioned absolute is removed from the flow of the document, thus it can be any size and will always sit outside of the document. Your html and body elements are sacred in this right; there are very few instances where you'd want to position them absolutely. Don't worry about the positioning, just create your content in div elements and it will scroll naturally when it exceeds the page height, like so:
div {
margin-bottom:50px;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta nisi libero, id porta lacus rhoncus id. Pellentesque rutrum molestie maximus. In eu risus id magna tincidunt commodo placerat nec quam. Sed suscipit magna risus, quis rutrum nisl fringilla eget. Ut malesuada consequat quam, non mattis odio viverra blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ultrices nibh et congue sodales. Phasellus sem urna, aliquam id tristique non, lacinia a libero. Vivamus ac elit ligula. Phasellus et nulla viverra, ultrices nibh id, euismod quam. Sed aliquet scelerisque elit, id sodales augue.
</div>
<div>
Maecenas quis luctus odio. Vivamus in libero ligula. Proin viverra consectetur sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. In rutrum ligula vitae sodales tincidunt. Etiam semper, libero sed pulvinar rhoncus, justo turpis lobortis elit, vitae dapibus magna massa a dolor. Sed tempor tortor id velit sollicitudin vestibulum. Integer ac felis orci. Etiam metus felis, porta at lectus eu, aliquet pharetra tortor. Curabitur varius tortor vitae tellus suscipit pharetra. Maecenas sit amet tortor ornare, viverra augue vitae, aliquet felis. Integer accumsan dolor ac imperdiet dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque lobortis non quam quis semper.
</div>
<div>
Curabitur ipsum risus, ultricies nec posuere at, finibus quis augue. Mauris ultrices massa quis ipsum tincidunt condimentum. Fusce feugiat id sapien non fermentum. Curabitur vel lectus laoreet velit eleifend tincidunt. Nulla tempus nisi nec lorem efficitur congue. Suspendisse laoreet arcu tempor est tempor pharetra. Sed suscipit vel lorem id elementum. Praesent vitae mauris justo. Vivamus non tellus ligula. Nunc laoreet tincidunt arcu eget maximus.
</div>
<div>
Mauris eu sagittis velit, quis vulputate ex. Vivamus pretium, urna venenatis scelerisque blandit, eros magna placerat ipsum, sit amet accumsan lacus erat non orci. Vestibulum sagittis fringilla mi, vel feugiat ante suscipit in. Sed pellentesque nulla urna, vel interdum augue placerat vitae. Fusce vitae tortor et libero tempus blandit. Donec rutrum venenatis faucibus. Proin luctus rhoncus mauris, nec dictum nisl dapibus eget. Phasellus sollicitudin orci nec augue ultrices, eu vestibulum dolor tincidunt. Integer lobortis eget nibh non ultrices.
</div>
<div>
Cras molestie lectus eget nisi mattis varius. Morbi feugiat in turpis eu fermentum. Nullam et tempus mi, eget ultricies ex. In cursus, lorem id aliquet eleifend, velit ipsum ultricies nisl, sed ultricies nisi arcu ut augue. Nulla pretium ligula et ipsum sodales, vel scelerisque est porttitor. Nulla vitae mi eget quam sodales efficitur at non ex. Fusce imperdiet orci et urna varius rutrum. Donec efficitur tellus non tempor varius. In mattis tortor non metus porttitor fermentum. Etiam dapibus quam augue, et sollicitudin sem feugiat quis. Vestibulum id tortor a elit tempus ultricies semper sit amet nunc. </div>
</div>
So I'm using Zurb Foundation and I want to create two vertically scrollable divs. llike this example
This is the html
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
and this is the css
.scrollablediv{
height:800px;
overflow-y: scroll;
}
However, When I scroll it, it scrolls both of it. I want them to scroll separately. How would I do that? Thanks in advance
If I understand your question correctly, all you have to do is add overflow: auto; to each child div, not the parent div.
Check it out: https://jsfiddle.net/f3utadqh/
That solves the scrolling issue, but adds scrollbars. A potential solution to that could be here https://stackoverflow.com/a/23771140/4856759
If you are actually trying to get two class "row" divs to scroll separately, try this. I added Lorem Ipsum and a height constraint so you can see how it works.
.scrollablediv {
height: 400px;
overflow-y: scroll;
}
.scrollablediv {
overflow-y: scroll;
height: 100px;
}
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet purus nunc. Curabitur et varius lectus, vel accumsan eros. Vivamus feugiat gravida massa eu euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris a fermentum arcu. Nunc faucibus est hendrerit nisl iaculis, id accumsan mi pretium. Duis porta erat leo, vitae porta ipsum dignissim vel. Mauris sed vestibulum lectus. Maecenas a risus eros. Nulla quis diam lectus. Nam elementum magna et dictum scelerisque. Quisque sit amet purus dolor. Nunc malesuada luctus nibh sed luctus. Ut lectus diam, consectetur sed libero eu, vestibulum cursus magna. Nam bibendum nisl ac est gravida, in consectetur ante tempor. Fusce tincidunt leo leo, sed sollicitudin metus condimentum sed.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
</section>
</div>
</div>
Okay, try this - each SECTION should now scroll independent of one another, try targeting each section separately?
.scrollablediv {
height: 400px;
}
.scrollablediv section {
overflow-y: scroll;
height: 100px;
}
<div class="row">
<div class="scrollablediv">
<section class="small-2 small-offset-8 columns">
<img src="img/blanche.png" alt="Blanche" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
<section class="small-2 columns">
<img src="img/nuit.png" alt="Nuit" />
<p>Praesent dui sapien, pulvinar ut velit eu, vulputate viverra purus. Suspendisse aliquet, enim cursus luctus luctus, mauris massa pretium nisl, vulputate aliquam risus arcu et erat. Donec varius nisl sit amet neque facilisis eleifend. Donec ut elit eu enim scelerisque malesuada. Quisque finibus leo et est volutpat, a vestibulum enim tempor. Nam pharetra et leo sed venenatis. Maecenas in erat tincidunt, dignissim mauris nec, rhoncus mi. Suspendisse venenatis bibendum ex quis luctus. In vel erat at massa scelerisque pulvinar ac a urna. Nunc mauris nisi, mollis eu ante eget, bibendum tempus dolor. Aliquam porttitor, dolor vel egestas venenatis, mauris erat pretium augue, ac dictum nunc augue eu elit. Curabitur at dictum elit, id ultrices quam. Mauris hendrerit risus id cursus iaculis. Morbi quis justo arcu.</p>
</section>
</div>
</div>
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>