I recreated my issue here.
The problem is that the 'left' div should be matching the combined height of 'top' and bottom' right divs. I have been reading articles and tutorials on how to achieve equal height with columns of varying content but none of them seem to apply to the 'stacked' columns.
My current nonworking solution was built on a concept taken from this article:
The only way to make the height of a div equal to the tallest column
is if that div contains all the columns. So to explain this another
way, by placing the columns inside a container we cause the container
to be the height of the tallest column. This is a very useful
structure. For this structure to work correctly in all browsers the
container div must be floated (left or right) plus each of the column
content divs must also be floated, it does not matter which way.
I am aware of the equalHeights jQuery plugin and resize, but I would very much prefer CSS solutions.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id='container'>
<div id='height-container'>
<div id='left'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nunc non semper fringilla, nibh mauris aliquam diam, sit amet suscipit purus ligula eu odio. Nulla tortor neque, sodales nec placerat vitae, laoreet a mi. In ac ullamcorper dui. Sed enim tellus, volutpat at tristique eu, condimentum volutpat tellus. Integer massa quam, egestas id vulputate id, ultrices ut felis.
</div>
<div id='right'>
<div id='top'>
Proin condimentum purus tortor, eu laoreet velit. Praesent ornare, mauris eu laoreet suscipit, nibh mauris imperdiet dolor, ut molestie erat tellus ac odio. Etiam tempor eros at neque tincidunt a feugiat massa imperdiet. Vestibulum aliquet nibh sit amet urna facilisis condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare dolor quis neque aliquet lacinia et id tortor. Fusce eu sapien non mi aliquet condimentum id vitae ante. Phasellus sit amet eros vitae velit fringilla facilisis non at eros. In non venenatis lectus. Nam tortor tellus, vehicula non vulputate vitae, mollis a velit. Pellentesque gravida pretium ante, eu volutpat risus viverra non. Duis purus quam, venenatis nec consectetur interdum, aliquam rutrum diam. Donec interdum odio eget ante consectetur in sodales mi molestie. Nunc bibendum, turpis vel vulputate accumsan, diam tortor placerat sem, sed posuere risus purus eu massa. Nullam eleifend pulvinar massa, nec cursus velit dictum quis.
</div>
<div id='bottom'>
Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur. <br><br>
Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur.
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body{
text-align:justify;
}
#container{
width:1000px;
margin:0 auto;
}
#height-container{
background:orange;
float:left;
}
#left{
float:left;
width:200px;
background:#CD5555;
padding:20px;
}
#right{
width:600px;
float:right;
}
#top{
background:yellow;
padding:20px;
}
#bottom{
background:#00FF66;
padding:20px;
}
You can use display:table property for this:
#height-container{
background:orange;
display: table;
vertical-align:top;
}
#left{
display: table-cell;
width:200px;
background:#CD5555;
padding:20px;
}
#right{
width:600px;
display: table-cell;
}
Check this http://jsfiddle.net/6rBAw/2/
But it's work till IE8 & above
UPDATED
CSS
#left{
width:200px;
background:#CD5555;
}
#right{
float:right;
width:600px;
}
.clr{clear:both;}
HTML
<div id='right'></div>
<div id='left'>
<div class="clr"></div>
</div>
Check it http://jsfiddle.net/6rBAw/4/
Here is a solution which works in IE 7 as well http://jsfiddle.net/6rBAw/6/ this solution makes use of negative margin bottom and padding bottom, the only thing is you have to give the margin bottom and padding bottom value the same and a large value and give the container of the column overflow hidden property.
#container{
width:1000px;
margin:0 auto;
**overflow: hidden;**
}
#left{
float:left;
width:200px;
background:#CD5555;
**padding:20px 20px 99999px 20px;
margin-bottom: -99999px;**
}
#right{
width:600px;
float:right;
**padding-bottom: 99999px;
margin-bottom: -99999px;**
background-color: black;
height: 1000px;
}
Related
(EDIT: my current code added to bottom of post)
I need to set a value for the height of the div in order for it to hide/scroll overflow properly, but I don't want a div at a specific pixel height. I can solve that by using % or vh units, but I don't actually want to use those units. By that, I mean I don't want my div to always be, for example, 2/3 of the page, because that means the bottom of the div will be a different distance from the bottom of the browser window, like this-
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body > div {
width: 90%;
height: 90%;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
-I want it to be a consistent distance from the bottom of the browser window,
like this-
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
div {
background-color: yellow;
width: 350px;
position: fixed;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div>
</div>
</body>
</html>
(for visual representation primarily, I am not really using the code itself as an example)
Basically, I want my div to be a variable height and hide/scroll overflow, but always 10px from the bottom.
I think these describe the same problem I'm having:
Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown
Getting a scrollable child div to Vertically fill the remainder of its parent dynamically
The answers there are to use tables or flexbox - are these the only options (without using javascript)?
My code:
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
p {
font-size: 9pt;
}
a {
text-decoration: none;
color: black;
}
.container { /*this contains all the divs!!*/
padding: 10px;
}
.header {
}
.name {
float: left;
width: 25vw;
padding-right: 5vw;
}
.about {
width: 65vw;
}
.main { /*this contains divs 'left' and 'right'*/
/*background-color: #CCCCCC;*/
clear: left;
padding-top: 10px;
width: 95vw;
}
.left {
/*background-color: #E6E6E6;*/
float: left;
min-height: 10px;
width: 25vw;
padding-right: 5vw;
}
.hold { /*this is how i tried your solution*/
position: relative;
height: calc(95vh - 10px);
}
.right { /*this is my problem div*/
background-color: #FFFF00;
width: 65vw;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.lorem {
margin-right: 20vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Name </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="name">
<p> Name </p>
</div> <!-- end div name -->
<div class="about">
<p> about </p>
</div> <!-- end div name -->
</div> <!-- end div header -->
<div class="main">
<div class="left">
</div> <!-- end div left -->
<div class="hold">
<div class="right">
<div class="lorem">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat facilisis purus at fermentum. Etiam ultricies iaculis nulla maximus cursus. Maecenas justo nulla, suscipit a dapibus at, lobortis nec mauris. Mauris egestas mi sit amet risus convallis, in hendrerit lorem maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sollicitudin tempor libero, nec molestie dui tempor sit amet. Aenean molestie ex id nisl venenatis, quis tincidunt lectus porta. Vivamus aliquam lobortis nulla, id porta leo consequat sollicitudin. Ut iaculis neque placerat ipsum placerat tincidunt.
Quisque libero sem, hendrerit quis urna sit amet, mollis venenatis nisl. Morbi vel neque rhoncus, congue purus ac, condimentum nunc. Morbi vestibulum metus nec velit eleifend, ac sodales nulla posuere. Praesent id fermentum massa. Morbi vestibulum lorem nulla, ac vestibulum nunc auctor non. Donec ultricies placerat mauris, at pretium nibh finibus eu. Suspendisse gravida neque nisl, sit amet bibendum ante placerat eget. Sed laoreet suscipit turpis vitae ullamcorper. Mauris quis pharetra eros. Curabitur quis diam non dui elementum facilisis vel ac sem. Duis vitae augue vitae mi pulvinar placerat ut quis purus. Donec sagittis maximus aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phasellus pharetra nisi arcu, in laoreet lacus convallis sed. Nam euismod ligula felis, ut laoreet nisl sodales eget. Maecenas cursus, augue vitae suscipit laoreet, purus magna bibendum tellus, sed maximus ex dui ac velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget aliquet tellus, in viverra sapien. Sed eget urna mauris. Morbi dapibus dolor et felis viverra condimentum sed a nisl. Integer congue cursus ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse nulla risus, pulvinar eget odio vitae, scelerisque cursus magna. Nam maximus eros vitae massa euismod, vel tempus felis vulputate.
Nunc blandit massa a nisl viverra, vitae molestie ex rhoncus. Pellentesque finibus luctus nisi. Sed quis luctus metus. Nullam sed augue ultrices, lacinia dolor ac, egestas ante. In non nisi nibh. Sed vitae dui libero. Duis ut ullamcorper urna. Phasellus quis fringilla leo.
Nulla porta tellus ut nibh pharetra dapibus. Mauris ullamcorper egestas aliquam. Cras posuere scelerisque imperdiet. In ultrices, leo eu molestie bibendum, augue dui semper ante, vel faucibus nibh enim sed eros. Mauris ipsum dui, placerat et tincidunt vitae, laoreet vel enim. Praesent at ligula et neque placerat blandit sed vulputate ipsum. Phasellus sodales, odio nec aliquam pretium, augue lacus mattis quam, nec vulputate purus lorem vitae nisi.
Suspendisse nisl ipsum, volutpat ac dapibus at, tincidunt eget nulla. Mauris ornare a nisi ac fringilla. Maecenas leo sapien, vulputate in dictum a, feugiat in eros. Aliquam sit amet sagittis leo. Mauris metus nisl, convallis eget mollis ut, ullamcorper eu tellus. Pellentesque eu dolor tempor, bibendum leo vitae, maximus velit. Aenean volutpat neque sit amet tellus mattis euismod.
Quisque nec vehicula orci. Curabitur varius fringilla risus, convallis tincidunt velit porttitor vitae. Aenean in lacus nec nunc tempor dignissim nec pretium sem. Nullam finibus odio quis metus ornare, in fermentum elit rutrum. Proin vitae dui in metus vehicula sodales. Donec massa neque, suscipit ac est quis, ultrices auctor risus. Cras eu auctor lectus. Nam sagittis vulputate hendrerit. Maecenas consequat odio justo, at malesuada nulla ullamcorper a. Donec arcu tellus, dignissim ut velit vel, consequat scelerisque dolor. Curabitur dictum vel risus quis consequat.
Pellentesque fringilla eu nisi sed tincidunt. Nulla feugiat sit amet purus sit amet cursus. Suspendisse nibh purus, tincidunt eu congue ut, ultricies id lectus. Phasellus convallis in nibh vel molestie. Nunc condimentum congue justo. In congue, turpis at vulputate imperdiet, dolor erat ultricies turpis, vitae egestas est augue in nisl. Ut ut leo diam. Duis vulputate ligula velit, vitae volutpat felis viverra a. Maecenas justo quam, lobortis a placerat ut, ullamcorper ac lorem. Sed eu vehicula odio.
Fusce id mauris ornare, mollis mi at, vulputate turpis. Praesent a risus feugiat, rutrum lacus nec, sodales nisi. Nulla ullamcorper libero pretium lacus accumsan, eu tempor mi porta. In tincidunt porta feugiat. Cras lectus arcu, convallis nec neque ac, vestibulum pretium ex. Curabitur mi ipsum, commodo ut eros eget, fringilla fringilla tortor. Curabitur maximus tellus ut turpis malesuada, auctor semper lectus porta. Suspendisse non sapien sagittis, dapibus tellus et, egestas quam. Aliquam vitae massa sit amet urna rhoncus rutrum sit amet et lorem. Phasellus gravida justo ut vulputate vestibulum.
Nunc sed tempus metus, sit amet volutpat mi. Quisque sed metus rutrum, iaculis enim sed, sodales lacus. Quisque quis mi ac sapien scelerisque efficitur lacinia et nunc. Proin tincidunt scelerisque turpis, non euismod ante interdum at. Sed vitae velit scelerisque, placerat nulla in, egestas justo. Mauris urna orci, pulvinar a nibh a, luctus pellentesque mauris. Nulla faucibus hendrerit urna non venenatis. Quisque nulla mi, suscipit sit amet nunc eu, dictum ullamcorper tellus. Donec lacus libero, commodo quis mauris pellentesque, feugiat iaculis nisl. Nulla facilisi. Suspendisse sed risus quis risus fringilla condimentum. Aenean aliquet in eros vel volutpat. Vivamus malesuada ultrices lorem sit amet feugiat. In interdum leo ac orci sollicitudin, maximus vestibulum nisl gravida. Sed venenatis pharetra fringilla. Etiam mauris risus, cursus et est tristique, mattis venenatis nisi.
</p>
</div> <!-- end div LOREM -->
</div> <!-- end div main -->
</div> <!-- end div hold -->
</div> <!-- end div container -->
</body>
</html>
You're on the right track! You can combine vh with calc to get the desired effect.
height: calc(100vh - 10px) - assuming the element is positioned at the top of the screen, that'll achieve the effect you're describing.
To handle scroll/overflow, you'll need an inner container - a div inside the one you set the height property on. Give that inner div { height: 100%; overflow: auto; } and you should be all set.
Here's a demo - to see it working, use the full screen view and shrink your browser's height.
/* These styles are just to make this easier to see,
and to normalize the display a little. */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page { width: 100px; border: 2px solid; }
/* Here's the box that locks to some distance from the bottom, in this case 30px */
.outer {
height: calc(100vh - 30px);
position: relative;
border: 1px solid blue;
}
/* And here's the scrollable container inside it */
.inner {
height: 100%;
overflow: auto;
}
<div class="page">
<div class="outer">
<div class="inner">
content content content content
content content content content
content content content content
</div>
</div>
</div>
I need to make a box. I Want an implementation of a flexbox to make a chat box.
But somewhat it doesn't gives me what I need.
.box{
width:350px;
margin:10px auto;
height:250px;
border:1px solid #000;
display:flex;
flex-flow:column;
}
.header{
border:1px solid blue;
width:100%;
flex: 0 1 auto;
}
.body{
width:100%;
flex: 1 1 auto;
border:1px solid red;
display:flex;
flex-flow:column;
}
.scrollable{
flex: 1 1 auto;
height:100px;
overflow:auto;
}
.writebox{
flex: 1 1 auto;
position:relative;
}
.writebox textarea{
height:100%;
width:100%;
}
<div class="box">
<div class="header">SOME CONTENT . Its fixed always</div>
<div class="body">
<div class="scrollable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus sapien lacus, vestibulum eleifend metus placerat at. Proin nec velit id orci lobortis feugiat. Phasellus cursus felis et imperdiet congue. In tincidunt vel urna eget venenatis. Ut libero velit, auctor non ipsum quis, interdum bibendum metus. Donec ut tempor nulla, sagittis volutpat magna. Donec ut ex fermentum, cursus lectus fringilla, vehicula quam. Morbi leo massa, rutrum non tortor eu, tristique mollis erat. Donec suscipit libero sit amet eleifend interdum. Quisque ut malesuada quam. Morbi interdum libero sed enim sodales rutrum.
Integer non metus vel tellus elementum auctor eu at lacus. Cras dapibus metus id purus porta, vitae fermentum mi imperdiet. Integer eget augue neque. Aenean varius lorem lectus, vitae lacinia nisl scelerisque et. Proin sed nibh aliquet, luctus elit sed, suscipit ligula. Morbi porttitor ligula eu risus varius, id hendrerit massa pharetra. Nullam nisl elit, sagittis nec libero non, tristique fermentum mauris. Phasellus posuere sem eu eros aliquam laoreet. Integer dui tellus, laoreet mollis nibh a, pretium finibus magna. Praesent quis convallis eros. Quisque pulvinar in sapien non dignissim. Praesent eu est nisl. Mauris sit amet nibh non nulla convallis sodales. Vestibulum porttitor dui vel nisl ultricies, non sollicitudin tortor imperdiet. Pellentesque vel nunc a est hendrerit accumsan non quis neque. Nam sagittis interdum elementum.</div>
<div class="writebox"><textarea></textarea></div>
</div>
</div>
Here is what it looks like: http://i.imgur.com/xCT7mCA.png
In my original code the textarea has variable height upto a limit x (I'm using autogrow plugin I didn't include that in the snippet)
Use flex: 1 only on .scrollable and make your .writable a flex container, Like:
.scrollable {
flex: 1;
}
.writeable {
display: flex;
}
Have a look at the snippet below (I've integrated the auto grow plugin for textarea as well):
autosize($('textarea'));
.box{
width:350px;
margin:10px auto;
height:250px;
border:1px solid #000;
display:flex;
flex-flow:column;
}
.header{
border:1px solid blue;
width:100%;
flex: 0 1 auto;
}
.body{
width:100%;
flex: 1 1 auto;
border:1px solid red;
display:flex;
flex-flow:column;
}
.scrollable{
flex: 1;
height:100px;
overflow:auto;
}
.writebox{
position:relative;
display: flex;
}
.writebox textarea{
height:100%;
width:100%;
}
<div class="box">
<div class="header">SOME CONTENT . Its fixed always</div>
<div class="body">
<div class="scrollable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus sapien lacus, vestibulum eleifend metus placerat at. Proin nec velit id orci lobortis feugiat. Phasellus cursus felis et imperdiet congue. In tincidunt vel urna eget venenatis. Ut libero velit, auctor non ipsum quis, interdum bibendum metus. Donec ut tempor nulla, sagittis volutpat magna. Donec ut ex fermentum, cursus lectus fringilla, vehicula quam. Morbi leo massa, rutrum non tortor eu, tristique mollis erat. Donec suscipit libero sit amet eleifend interdum. Quisque ut malesuada quam. Morbi interdum libero sed enim sodales rutrum.
Integer non metus vel tellus elementum auctor eu at lacus. Cras dapibus metus id purus porta, vitae fermentum mi imperdiet. Integer eget augue neque. Aenean varius lorem lectus, vitae lacinia nisl scelerisque et. Proin sed nibh aliquet, luctus elit sed, suscipit ligula. Morbi porttitor ligula eu risus varius, id hendrerit massa pharetra. Nullam nisl elit, sagittis nec libero non, tristique fermentum mauris. Phasellus posuere sem eu eros aliquam laoreet. Integer dui tellus, laoreet mollis nibh a, pretium finibus magna. Praesent quis convallis eros. Quisque pulvinar in sapien non dignissim. Praesent eu est nisl. Mauris sit amet nibh non nulla convallis sodales. Vestibulum porttitor dui vel nisl ultricies, non sollicitudin tortor imperdiet. Pellentesque vel nunc a est hendrerit accumsan non quis neque. Nam sagittis interdum elementum.</div>
<div class="writebox"><textarea></textarea></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/js/autosize.min.js"></script>
Hope this helps!
I have a side-bar div that will have ads. It should have a fixed width of about 333px and need it to be responsive is possible in its height.
It has a background but when content loads in the main div the side-bar div will not extend the length of the main content. I have tried a few things but get varied results in different browsers.
When in the mobile view or when it's in a small view the side bar should fit to the size of the window width wise and only be has high as the content in the side-bar.
I have loaded a few images for examples to show what I need.
Below is the ccs I have
.main
{
padding: 20px;
}
.side-bar
{
background-image: url('../images/BlueBG.jpg');
width: 333px;
display: block;
height: 100%;
}
This has been asked a few times on SO, but you can use flexbox for this. If you are using bootstrap, you most likely will have a container-fluid class. Simply set the display to flex and all the items inside will become flex-items. This will allow you to have them stretch. In your case, you will have to set container-fluid back to block or set your main and side-bar to flex-basis:100% in a media query for your mobile.
Here's the fiddle: http://jsfiddle.net/56we9rmj/2/
HTML
<div class="container-fluid">
<div class="main"><p>Arcu dictumst nec ultricies aptent rhoncus. Sed fermentum ligula. Donec vitae felis. Lectus nec ad. Tempus et quam. Nec dolor eu. Lacus at in eu dolor penatibus. Quis vivamus vehicula. Mauris dui ullamcorper diam eget pretium lectus consectetuer ultrices tincidunt sit nulla. Lobortis lacus et. Dolor ea placerat etiam diam aenean integer nec erat. Suscipit ut elementum. Consectetuer dui id vestibulum cras egestas. Quis nulla nulla. Pariatur pellentesque amet taciti neque lorem fermentum vehicula amet elit blandit pellentesque. Cras sit gravida. Cras vulputate curabitur mauris purus semper mauris lacus et et pulvinar in justo nullam qui sed quam massa. Integer amet ullamcorper. Feugiat quis sed quam fusce non feugiat amet vitae. Arcu elementum eget justo ac sed quis id tellus.</p>
<p>Vivamus non cras. Turpis in eleifend mattis nam arcu aliquam vulputate felis. Dignissim ligula dignissim habitant nonummy proin. Mauris varius varius. Purus lorem ullamcorper dictum cras in felis ullamcorper vitae. Nunc amet interdum nec adipiscing tempus ac vestibulum primis. Nisl purus orci sed sunt mauris. Odio donec nulla. Pellentesque arcu felis. Et varius ornare eros id quisque. Vel dui velit arcu eget in dignissim nunc nec habitasse habitasse elit quis ac aptent duis volutpat facilisis varius ut sem consectetuer erat arcu. Mauris condimentum sodales luctus a ullamcorper amet a pellentesque tellus ac sit. Nam mauris nulla neque aenean tempus. Mi dui ipsum. Laoreet vitae mauris. Arcu at tristique. Quia mi praesent nibh eu est. Dui libero condimentum elementum risus risus. Ut feugiat diam. Quam semper erat felis ultricies vel. Sed proin sollicitudin. Etiam eleifend morbi imperdiet purus pharetra. Vel diam feugiat. Vel volutpat vulputate. Enim ligula fringilla at nunc risus.</p>
</div>
<div class="side-bar">
<img src="http://placehold.it/300x100" />
<img src="http://placehold.it/300x100" />
</div>
</div>
CSS
.container-fluid {
display:flex;
align-items:stretch;
align-content:stretch;
}
.main {
flex-basis:66.66666667%;
padding:20px;
}
.side-bar {
background:red;
flex-basis:33.3333333%;
}
.side-bar img {
width:100%;
}
#media screen and (max-width:Mobile-PX-HERE) {
.container-fluid {
flex-wrap:wrap;
}
.main, .side-bar {
flex-basis:100%;
}
}
Hope that helps!
Giving position:absolute; and 100% height to the sidebar will do. http://jsfiddle.net/fdf01y4b/
Resize the window or add more text to see it in action
.side-bar {
height: 100%;
position: absolute;
top: 0;
right: 0;
}
If you have problems with the sidebar going out of the parent div, just give position:relative; to the parent wrapper like I did on the Jsfiddle example
<div class="wrapper">
<div class="main">Content</div>
<div class="side-bar">Sidebar</div>
</div>
.wrapper{
position:relative;
}
For smaller screens you can just remove the sidebar position:absolute; to position:initial; with media queries:
#media (max-width: 600px){
.side-bar{
position: initial;
}
}
I'm building a 3 row liquid layout. I have a fixed height header and a footer. I also have a minimum width for the wrapper (for these 3 rows).
The problem is, I can't make the middle one (#content) resize vertically. If I make position:absolute then I lose control over scrolling. I thought I could do it using the top,bottom,margin and padding while setting the height to 100% but I couldn't.
Here's the code that I'm using to test it and here's the fiddle link: http://jsfiddle.net/inhan/kUZgY/ You will see that the lighter gray background won't expand when window is resized.
I'm willing to use CSS only and not use HTML5 features. What am I missing? Thanks for any input.
CSS
body {
margin:0;
padding:0;
border:0;
height:100%;
max-height:100%;
}
* html body { /*IE6 hack*/
padding:30px 0;
}
* html #content { /*IE6 hack*/
height:100%;
width:100%;
}
#wrapper {
width:100%;
min-width:800px;
min-height:100%;
position:absolute;
}
#header, #footer {
position:absolute;
left:0;
width:100%;
height:30px;
overflow:hidden;
background-color:gray;
color:white;
}
#header {
top:0;
}
#footer {
bottom:0;
}
#content {
margin:31px 0;
overflow:hidden;
width:100%;
background:rgba(0,0,0,.2);
}
HTML
<body>
<div id="wrapper">
<div id="header">This is header</div>
<div id="footer">This is footer</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br/><br/>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
</div>
</div>
</body>
Extra Info
I'm actually not really interested in setting a minimum width for the whole page but some middle content will need that. So if I can, I might wanna make the whole structure respect when there's min-width property in the content that is loaded.
This should be what you're after http://jsfiddle.net/kUZgY/6/
You were just missing html {height:100%;}
I also changed the #header and #footer to position:fixed
I have a layout like this:
[left-image] | [title-------------------------------------]
(width up to 150) | [left-floated-p -----------[right-floated-p]
|
| lots of text................................
The only way I could implement this is by using float:left on the "left-image" and display:table-row on the contents from the right side.
The problem is that this doesn't seem to work in IE 7 :(
Are there any fixes for it? or other alternatives to implement such a layout?
note that I can't use margin-left on the right blocks because I don't know the exact size of the left image + I have 2 floats on the right side and clearing them messes up the layout...
Unfortunately IE 7 doesn't support it. A quick solution:
CSS
<style type="text/css">
#wrapper {
width: 800px;
margin: 0 auto;
}
#leftcol {
width: 150px;
}
#rightcol {
width: 650px;
}
#twocols {
overflow: auto;
}
#leftp,#rightp {
width: 325px;
}
#leftcol, #leftp {
float: left;
}
#rightcol, #rightp {
float: right;
}
</style>
HTML
<div id="wrapper">
<div id="leftcol"><img src="yourimage.jpg" /></div>
<div id="rightcol">
<h1>Title</h1>
<div id="twocols">
<p id="leftp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed iaculis augue. Proin accumsan tortor at dui imperdiet pellentesque. In eu purus vulputate orci porta scelerisque. Maecenas eget purus mauris, et sagittis turpis. Phasellus bibendum elit et risus dignissim gravida. Quisque feugiat mauris sit amet urna porta imperdiet. Proin feugiat rhoncus orci dictum mattis.</p>
<p id="rightp">Praesent condimentum, dolor eu aliquet adipiscing, neque est vestibulum nunc, id dignissim tortor risus sed tortor. Donec luctus scelerisque ornare. In fringilla ullamcorper erat, convallis adipiscing nulla adipiscing ut. Nunc convallis consequat tellus ut aliquam. Vivamus tortor tortor, lacinia eget dignissim sed, pharetra ac risus. Vestibulum quis condimentum turpis. Maecenas magna tellus, dignissim eu suscipit id, placerat quis metus.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nulla quis tempus tempus, arcu velit elementum risus, consectetur rutrum diam odio vitae mi. Curabitur euismod tincidunt ipsum, id volutpat lectus bibendum eget. Nam at pulvinar felis. Vestibulum non lectus id turpis congue tempor sed eget orci. Sed pellentesque felis vitae augue cursus ac gravida arcu tincidunt. Aenean et sem lectus. Curabitur vehicula odio lorem. Morbi ultricies fermentum dolor, vitae convallis leo condimentum at. Pellentesque faucibus justo non enim varius varius. Nulla accumsan feugiat orci, egestas laoreet mauris rhoncus non. In lacinia purus in magna pulvinar et sollicitudin urna mollis. In eleifend augue ac sem suscipit eget adipiscing odio gravida. Nam tincidunt dui pharetra lacus bibendum volutpat. Integer faucibus luctus magna, et eleifend metus iaculis vitae. Cras imperdiet dignissim mi, porta elementum elit dignissim non. Ut egestas congue elit quis volutpat. Nunc ac massa neque.</p>
<p>Praesent id lectus felis. Phasellus sapien leo, ultrices nec rhoncus a, tincidunt in lacus. Mauris tincidunt volutpat nisi, quis viverra ligula pellentesque semper. Phasellus sem sem, tristique vitae sollicitudin eu, tincidunt egestas felis. Aliquam id nunc augue. Integer lectus dolor, lacinia non pellentesque non, elementum at lorem. Donec nec vulputate magna. Vestibulum lobortis risus a elit fringilla dapibus congue tellus tincidunt. Nulla a eleifend justo. Sed nec nisl augue, id vulputate ante. Vestibulum dapibus tristique nisl, non consequat nisi bibendum sit amet. Phasellus quis diam orci, et fringilla est. Morbi quis aliquam ante. Donec bibendum suscipit magna tempus feugiat. Mauris ultricies, neque sed venenatis lacinia, nulla magna scelerisque libero, vitae pharetra urna mi eget nunc. Nullam tellus quam, sagittis a volutpat id, imperdiet vel libero. Curabitur fringilla velit id ligula faucibus dapibus. Aliquam id augue leo. Aenean ac felis vel lectus commodo tempus.</p>
<p>Fusce facilisis facilisis enim et pharetra. Vivamus luctus pellentesque accumsan. Mauris sem metus, ullamcorper vel ornare in, eleifend id risus. Pellentesque viverra lacinia nulla eget hendrerit. Integer consequat egestas placerat. Etiam libero nisl, euismod in tristique ac, convallis eget purus. Nulla vulputate quam sit amet purus consectetur dapibus. Etiam aliquet purus non felis sagittis porta. Fusce id libero nibh. Ut auctor odio sed leo iaculis ut faucibus leo blandit. Maecenas imperdiet enim imperdiet elit hendrerit mattis. Etiam mauris ipsum, malesuada eget posuere eget, molestie quis sem. In commodo consequat arcu laoreet fermentum. Duis et magna massa, et molestie magna.</p>
</div>
</div>
You would need to make the text and headline prettier, but this works.
The best alternative for implementing such a layout would be using a grid framework like blueprintcss, yahoo grid etc.
I think something like this would work
<div id="wrapper">
<div id="leftImage">Hello</div>
<div id="rightSide">
<!-- Right side things here -->
</div>
</div>
#wrapper {
width:400px;
height:400px;
background:red;
}
#leftImage {
position:absolute;
width:200px;
height:200px;
background:blue;
}
#rightSide {
position:relative;
width:200px;
height:200px;
background:green;
float:left;
margin-left:200px;
}
With the same HTML code used by Gert G in his answer, here is an alternative using display: inline-block;:
#wrapper {
width: 960px;
}
#leftcol {
display: inline-block;
width: 150px;
vertical-align: top;
}
#rightcol {
display: inline-block;
width: 800px;
}
Conditional comment for IE<8
#leftcol, #rightcol { display: inline; zoom: 1; }
#rightcol can have a width of 810px IF you strip whitespace between ending tag of #leftcol and the beginning one of #rightcol
if height of title & paragraphs height are static/
just write a margin-bottom to your left image. you dont need a extra column at right of the page/
height (title & paragraphs) = X;
margin-bottom (img) = X + 100; (for your text;)
btw text should be in a division/
max-width (img) = 150px;
min-width (div.all or body) = width(img)+width(your text at right) /