I try to create a simply CSS grid layout, maybe with bootstrap, with exactly 5 boxes in different sizes which should fill a container box fully.
I searched through stackoverflow and several websites but found nothing really suitable.
Here is the problem code, go to http://galaxy.vandango.org/test/index1.htm to see the result:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.box {
border: 1px solid #336c96;
border-radius: 5px;
margin: 5px;
width: 300px;
}
.item1 {
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 box item1">
<h4>1</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
<br>
7897897
<br>
7897897
<br>
7897897
<br>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
<div class="col-md-4 box">
<h4>2</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
<div class="col-md-4 box">
<h4>3</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh.
</p>
</div>
<div class="col-md-4 box">
<h4>4</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
<div class="col-md-4 box">
<h4>5</h4>
<p>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
<br>
123
<br>
Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet
risus. Etiam porta sem malesuada magna mollis euismod.
Donec sed odio dui.
</p>
</div>
</div>
</div>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body></html>
What i really need is the following:
http://galaxy.vandango.org/test/index2.htm
But i can only get it done if i add the following css classes and add the classnames to the box 4 and 5.
.item4 {
position: relative;
top: 40px;
right: 310px;
}
.item5 {
position: relative;
top: -185px;
right: -310px;
}
Is there any good way to make this simplier and more flexible?
Don't use Javascript (or even more, jQuery!), use flex-box.
I've found the resource at css-tricks very helpful.
The container is using display: flex to be able to use the justify-content: space-around that makes sure your columns are aligned inside the container.
Every column is then using display: inline-flex and flex-direction: column to accomplish what you're looking for.
The only drawback with this solution (in my head) is the fact that you need to generate your divs in wrong order, namely 1, 2, 4, 3, 5, but it's hard to judge if this will be a problem or not.
Also, in reply to "It's not compatible", it's pretty usable throughout the web.
I used javascript to populate the textboxes to make the HTML easier to inspect.
var texts = {
1: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <br> 7897897 <br>7897897 <br>7897897 <br>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
2: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
3: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.",
4: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.",
5: "Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 123 Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui."
}
for (x in texts) {
document.getElementById(String(x)).innerHTML = '<h4>' + String(x) + '</h4>' + texts[x];
}
.container {
display: flex;
justify-content: space-around;
width: 1000px;
margin: 0 auto;
}
.col {
display: inline-flex;
flex-direction: column;
}
.box {
width: 300px;
border: 1px #336c96 solid;
padding: 0 10px 10px 10px;
border-radius: 5px;
margin: 10px;
}
<div class="container">
<div class="col">
<div id="1" class="box">1</div>
</div>
<div class="col">
<div id="2" class="box">2</div>
<div id="4" class="box">4</div>
</div>
<div class="col">
<div id="3" class="box">3</div>
<div id="5" class="box">5</div>
</div>
</div>
See comment from paulie_D: Masonry layout from JQuery is the correct one!
Related
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>
I have a page that contains a card.
The card should take the automatic height which depends on its content, except when the content exceeds the height of the screen it is necessary to display a bare scroll.
In this case the title and the content will be scrollable but not the footer. the footer must always be displayed at the bottom of the page in fixed mode (when the content is large).
.card {
width: 80%;
border: solid 2px #eee;
margin-left: 30px;
}
<h1>
Hello
</h1>
<menu>
<!-- Elements -->
</menu>
<!-- Elements -->
<!-- Elements -->
<div class="card">
<p class="card-title">Title</p>
<div class="card-content">
<p>
Integer ullamcorper mi nec pellentesque ultricies. Sed vel efficitur augue. Cras fringilla non nisl convallis blandit. Nunc libero odio, tincidunt vitae sodales eu, pellentesque sed leo. Donec tempus erat sed leo vestibulum, eu fringilla ante dignissim.
Fusce viverra interdum diam id lacinia. Nam tincidunt euismod quam, at pretium lorem mattis non. Nulla facilisi. Mauris sem massa, porttitor id nisl eu, placerat tincidunt turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis
ultricies turpis eu mi facilisis, in venenatis lectus iaculis. In vitae augue nec neque pellentesque suscipit eget a est. Aenean dolor ex, vehicula sed bibendum eu, semper in sapien. In eget ante eu nulla scelerisque pharetra vitae tristique lacus.
Aliquam erat volutpat. Nunc at condimentum velit. Maecenas tempor efficitur lacus, eget bibendum quam dapibus ac. Cras hendrerit metus ac velit mollis, sed dignissim justo aliquet. Fusce eleifend pharetra lectus eget sodales. Quisque ac lacus mollis,
sollicitudin ligula elementum, porttitor ex. Nulla facilisi. Donec ultricies iaculis dignissim. Pellentesque eu neque quis sapien porta ultricies. Quisque rhoncus pulvinar fringilla.
</p>
</div>
<hr>
<div class="card-footer">
<button>
Apply
</button>
</div>
</div>
Demo
What's the most elegant way to do it? Preferably in full CSS/Sass.
You need to add a max-height to .card and make the .card-footer a sticky element to follow the card when being scrollable in small screens.
http://jsfiddle.net/2d0Labwf
.card {
width: 80%;
border: solid 2px #eee;
margin-left: 30px;
position: relative;
max-height: 80vh;
overflow-y: auto;
}
.card-footer {
position: sticky;
bottom: 0;
height: 50px;
background-color: white;
}
<div class="card">
<p class="card-title">Title</p>
<div class="card-content">
<p>
Integer ullamcorper mi nec pellentesque ultricies. Sed vel efficitur augue. Cras fringilla non nisl convallis blandit. Nunc libero odio, tincidunt vitae sodales eu, pellentesque sed leo. Donec tempus erat sed leo vestibulum, eu fringilla ante dignissim. Fusce viverra interdum diam id lacinia. Nam tincidunt euismod quam, at pretium lorem mattis non. Nulla facilisi. Mauris sem massa, porttitor id nisl eu, placerat tincidunt turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultricies turpis eu mi facilisis, in venenatis lectus iaculis. In vitae augue nec neque pellentesque suscipit eget a est. Aenean dolor ex, vehicula sed bibendum eu, semper in sapien. In eget ante eu nulla scelerisque pharetra vitae tristique lacus.
Aliquam erat volutpat. Nunc at condimentum velit. Maecenas tempor efficitur lacus, eget bibendum quam dapibus ac. Cras hendrerit metus ac velit mollis, sed dignissim justo aliquet. Fusce eleifend pharetra lectus eget sodales. Quisque ac lacus mollis, sollicitudin ligula elementum, porttitor ex. Nulla facilisi. Donec ultricies iaculis dignissim. Pellentesque eu neque quis sapien porta ultricies. Quisque rhoncus pulvinar fringilla.
</p>
</div>
<hr>
<div class="card-footer">
<button>
Apply
</button>
</div>
</div>
You can set a max-height on the card content equal to the viewport height minus the height of the card header and footer by using calc. Then set the overflow to scroll.
This will ensure the card isn't taller than the viewport, the card footer always displays at the bottom, and the rest of the card content is scrollable.
.card {
width: 80%;
border: solid 2px #eee;
margin-left: 30px;
}
.card-content {
max-height: calc(100vh - 71px);
overflow: scroll;
}
body { margin: 0; }
<h1>
Hello
</h1>
<menu>
<!-- Elements -->
</menu>
<!-- Elements -->
<!-- Elements -->
<div class="card">
<p class="card-title">Title</p>
<div class="card-content">
<p>
Integer ullamcorper mi nec pellentesque ultricies. Sed vel efficitur augue. Cras fringilla non nisl convallis blandit. Nunc libero odio, tincidunt vitae sodales eu, pellentesque sed leo. Donec tempus erat sed leo vestibulum, eu fringilla ante dignissim.
Fusce viverra interdum diam id lacinia. Nam tincidunt euismod quam, at pretium lorem mattis non. Nulla facilisi. Mauris sem massa, porttitor id nisl eu, placerat tincidunt turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis
ultricies turpis eu mi facilisis, in venenatis lectus iaculis. In vitae augue nec neque pellentesque suscipit eget a est. Aenean dolor ex, vehicula sed bibendum eu, semper in sapien. In eget ante eu nulla scelerisque pharetra vitae tristique lacus.
Aliquam erat volutpat. Nunc at condimentum velit. Maecenas tempor efficitur lacus, eget bibendum quam dapibus ac. Cras hendrerit metus ac velit mollis, sed dignissim justo aliquet. Fusce eleifend pharetra lectus eget sodales. Quisque ac lacus mollis,
sollicitudin ligula elementum, porttitor ex. Nulla facilisi. Donec ultricies iaculis dignissim. Pellentesque eu neque quis sapien porta ultricies. Quisque rhoncus pulvinar fringilla.
</p>
</div>
<hr>
<div class="card-footer">
<button>
Apply
</button>
</div>
</div>
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>
I have a css-beginner (or maybe a lack of thinking) problem, that is, my paragraphs don't align perfectly on the top with my floating boxes, why is that?
HTML:
<html>
<head>
<title>page_4</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="float4.css">
</head>
<body>
<p>
Fetrnenmm vulputate ml non varans. Fusce ai luctus motus. NulLa nec
neque a tisus elemenmm dictum. Nullam Id relit tincidunr libero
fringilla varius. Phasellus eu aliquen ligula, non sociales leo. Nam
Laoeeet massa id luctus interdum. Ut nlnices uistique dignissim. Donec
est lectus, molestie sagiuis erat eget, lacilisis venenatis ex. Prin
iaculis enim et magna porta, vitae ullamcotper mi viverra. Nullam
lacilisis libero.
</p>
<div class="box grey_box left">
<div class="box blue_box right">
<p class="box pink_box left">Curabitur iacullis tincidunt tortor sit amet pharetra</p>
<p>Sed pretium lacus veut, a porttitor quam ullamcorper ut. Praesent ac
tellus pomitor, luctus sapien eget, posuere orci. Aenean pulvinar
tnstique congue. Sed pellentesque varius vehicula. Curabitur feugiat,
metus vitae congue fringilla.</p>
</div>
<p>Phasellus mollis, diam in rutrum dapibus, lorem nulla accumsan felis.
Curabitur iaculis tincidunt tortor sit amet pharetra.</p>
<p>Sed lobortis, sapien a semper pretium, ligula augue luctus est, eget.
Mauris ac facilisis libero. Curabitur semper cursus. Ligula augue luctus
est, eget. Mauris ac facilisis libero. Curabitur semper cursus.</p>
</div>
<p>
Mauris tincidunt, massa non pretium scelerisque, ligula massa varius
arcu, eu blandit enim quam a odio. Sed congue tempor ipsum in eleifend.
Ut interdum erat blandit eros gi-avida bibendum. Nunc ac egestas odio.
Nullam sodales lectus quis varius Iaoreet. Donec cursus erat lectus, et
molestie uma tristique in. Cras vitae diam vulputate, imperdiet ligula
ac, viverra libero.</p>
<p>Fusce sagittis, justo et vulputate tincidunt, diam turpis efficitur
diam, ut facilisis risus lorem a lacus. Maecenas maximus arcu eu feus
dapibus, nec elementum tellus tincidunt. Quisque imperdiet punis id
fringua fringilla.</p>
<p>Ut sodales ut erat quis bibendum. Etiam auctor pharetra nisi. Integer
venenatis non feus sit amet elementum. Pellentesque lorem metus,
efficitur eu nisi sed, vestibulum luctus eros. Sed magna risus, auctor
dictum nisl ut, fermentum aliquet turpis. Sed ante Purus.</p>
<p>Etiam in lacinia augue. Aenean pretium varius enim vel malesuada. Nam
ullamcorper nisi non augue facilisis scelerisque. Integer interdum
ultricies orci, ac porttitor eut sodales eu. Integer sit amet placerat
nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis
aliquet eu enim eu vulputate. Vivamus elementum dolor a Ieo elementum
accumsan.</p>
<p>Ut sodales ut erat quis bibendum. Etiam auctor pharetra nisi. Integer
venenatis non feus sit amet elementum. Pellentesque Iorem metus,
efficitur eu nisi sed, vestibuuum luctus eros. Sed magna risus, auctor
dictum nisl ut, fermencum aliquet turpis. Sed ante punis.
</p>
</body>
</html>
CSS:
html
{
background-color: #555;
}
body
{
width: 960px;
margin: 60px auto;
padding: 20px;
background-color: white;
}
.left
{
float: left;
}
.right
{
float: right;
}
.box
{
padding: 15px;
}
.blue_box
{
width: 300px;
margin: 0 0 15px 15px;
background: #E0E0F8;
}
.grey_box
{
width: 460px;
margin: 0 20px 20px 0;
background-color: darkgrey;
}
.pink_box
{
width: 135px;
margin: 0 15px 15px 0;
background-color: lightpink;
}
Here is the fiddle: http://jsfiddle.net/2voh0pjb/.
p element has a margin. Clear it with:
p{margin:0}
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
I have a three column in a column-fluid container. My right and left column are fixed, but not scrollable though I have placed overflow-y:scroll
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
overflow-y:scroll;
}
.left {
float:left;
}
.right {
float:right;
}
.fixed-fixed {
margin: 0 240px;
}
http://www.bootply.com/UfYNttcqhS#
How can I make my right and left column scrollable vertically.
The scrollbars appear disabled because there is no content to be scrolled.
I changed your CSS...
.row > .sidebar-fixed{
position: absolute;
top: 0;
width: 220px;
height: 100%;
overflow-y:scroll;
}
.row > .sidebar-fixed.left{
left:0;
}
.row > .sidebar-fixed.right{
right:0;
}
.fixed-fixed {
margin: 0 240px;
}
...added filler text...
<div class="well sidebar-fixed left">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div><!--/.well -->
...and updated the demo.
You have to place some content inside of that div and make the height on it more than the height of the scrollable div like this:
<div class="well sidebar-fixed left">
<div id="overflow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nisl faucibus lacus malesuada lobortis. Nulla sapien diam, convallis quis arcu hendrerit, tempus facilisis nibh. Donec interdum lacus eget sapien facilisis, et congue urna tristique. Maecenas ante tellus, euismod quis adipiscing sed, elementum in lorem. Donec venenatis dui a lobortis iaculis. Curabitur pulvinar blandit magna at dictum. Maecenas nec sodales eros, at vestibulum mauris. Phasellus vitae ante at erat semper gravida. Maecenas tincidunt elementum eros, ut feugiat justo viverra a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida elementum dui eu aliquet. Nunc vulputate urna fringilla, mollis ipsum non, fermentum diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam leo tellus, auctor id justo nec, lobortis dignissim metus. Phasellus eleifend ac lacus non blandit. Quisque eu purus sagittis, gravida odio ut, congue diam.</p>
</div>
</div>
And in the css:
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
height: 200px;
overflow-y:scroll;
}
Here is a more Bootstrap-friendly (responsive grid) approach:
Bootply Demo
CSS:
html, body {
height: 100%;
}
.container-fluid.main {
padding-top: 50px;
height: 100%;
}
.container-fluid.main>.row {
height: 100%;
}
.left, .right {
height: 100%;
background-color: yellowgreen;
overflow: auto;
}
#media (max-width: 767px) { /*set to where your columns will collapse to 100%*/
.left, .right {
height: auto;
}
}
HTML:
<div class="container-fluid main">
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-2 left">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
<div class="col-sm-8">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-sm-2 right">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
</div>