The outer container for two panel layout does not stretch vertically.
The <DIV> with id container is surrounding two DIVs of two panels:
<DIV> sidebar is left panel
<DIV> content is right panel
When sidebar is longer than content the outer container does not stretch.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<style>
#container {
width: 600px;
border: 1px solid blue;
}
#content {
border: 2px dashed red;
margin-left: 220px;
margin-right: 10px;
}
#sidebar {
float: left;
border: 2px dashed green;
width: 200px;
margin-right: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.
Cras vel lorem. Etiam pellentesque aliquet tellus.
</div>
<div id="content">
Article with some content. Article with some content. Article with some content.
</div>
</div>
</body>
</html>
so-example-html-two-panel-outer-container-not-stretched
Use overflow css attribute for the container. That will auto adjust its height.
Documentation on overflow.
Use code below.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<style>
#content {
border: 2px dashed red;
margin-left: 220px;
margin-right: 10px;
}
#sidebar {
float: left;
border: 2px dashed green;
width: 200px;
margin-right: 10px;
margin-left: 10px;
}
#container {
width: 600px;
overflow: hidden;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.
Cras vel lorem. Etiam pellentesque aliquet tellus.
</div>
<div id="content">
Article with some content. Article with some content. Article with some content.
</div>
</div>
</body>
</html>
set both divs to be inline-block. they will automatically be next to one another, no need for float:left for the left div, or margin-left for the right div.
#content {
border: 2px dashed red;
margin-right: 10px;
display: inline-block;
width: 350px;
vertical-align:top;
}
#sidebar {
border: 2px dashed green;
width: 200px;
margin-right: 10px;
margin-left: 10px;
display: inline-block;
}
here is a fiddle
Related
I am making a simple messaging app UI. I am trying to make the messages anchor to the bottom of the screen like most modern messaging applications. So far, here is the bare bones of my messaging UI:
HTML
<div class="main-wrapper">
<div class="contact-list">
contacts here
</div>
<div class="conversation-area">
<div class="msg msg-them">this is Alison</div>
<div class="msg msg-me">this is me!</div>
<div class="msg msg-them">you are so cool! :)</div>
<div class="msg msg-them">seriously.</div>
</div>
</div>
SASS
body, html {
height: 100%;
}
.main-wrapper {
height: 100%;
margin: 0px auto;
overflow: hidden;
.contact-list{
float: left;
width: 200px;
height: 100%;
background-color: #aaa;
border-right: 2px solid #777;
}
.conversation-area{
overflow: hidden;
height: 100%;
background-color: #ccc;
.msg{
vertical-align: bottom;
border: 1px solid black;
&-them{
background-color: blue;
float: left;
max-width: 250px;
display: inline;
clear: both;
}
&-me{
background-color: red;
float: right;
max-width: 250px;
display: inline;
clear: both;
}
}
}
}
Whenever a new message comes in, I'll insert it as the last child of the .conversation-area div. I have the messages stacking just like I want them. I just need to make them stick to the bottom of the .conversation-area div.
I've tried messing with position attributes of both the parent and child divs, as well as tried to get vertical-align to work, but so far I haven't gotten it functioning.
How can I make my messaging app look exactly the same EXCEPT the messages stick to the bottom rather than the top?
Here's the jsFiddle: https://jsfiddle.net/63vufn7u/1/
You can achieve this with display:table-cell; and vertical-align:bottom;
I have made some changes to your code but im sure you can adapt now its working:
.main-wrapper {
width: 100%;
height: 200px;
font-family:sans-serif;
}
.contact-list {
width:25%;
display: table-cell;
height: 200px;
background: #555;
color: #fff;
text-align: center;
float: left;
}
#conversation-area {
height: 200px;
width: 300px;
background: steelblue;
display: table-cell;
vertical-align: bottom;
}
.msg {
display: block;
margin: 15px 10px;
}
.msg p {
border-radius:5px 5px 5px 5px;
background: #fff;
display: inline;
padding: 5px 10px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.msg-me {
text-align: left;
}
.msg-me p {
border-radius:15px 15px 15px 0px;
}
.msg-them {
text-align: right;
}
.msg-them p {
border-radius:15px 15px 0px 15px;
}
<div class="main-wrapper">
<div class="contact-list">
Contacts
</div>
<div id="conversation-area">
<div class="msg msg-them"><p>this is Alison</p></div>
<div class="msg msg-me"><p>this is me!</p></div>
<div class="msg msg-them"><p>you are so cool! :)</p></div>
<div class="msg msg-them"><p>seriously.</p></div>
</div>
</div>
Your friendly neighborhood Flexbox solution:
On the container, you could also use the justify-content property to align it's contents to the bottom:
.conversation-area {
display:flex;
flex-direction:column;
justify-content:flex-end;
}
Learn more about flexbox here: http://www.flexboxin5.com
The easiest way I've found is to use flex-direction: column-reverse;.
The drawback to flex-direction: column; is that it starts you at the top and you have to scroll down for older texts. And that's not how chat app interfaces tend to work.
column-reverse makes the texts stick to the bottom. The tradeoff is you have to insert your messages in ascending time stamp order instead of reversed like you normally would, because flex-box does the reversing in css. Same with any animations. So new text bubble animation would be applied to the :first child rather than the :last child.
Here's an example without animations: https://jsfiddle.net/ut1Lybsj/1/
<style>
.container {
height: 200px;
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
border: 1px solid black;
}
.container div {
margin-top: 20px;
}
</style>
<div class="container">
<div style="background:red;">First Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
<div style="background: skyblue;">Second Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
<div style="background: green;">Third Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
</div>
I have 2 floating divs, inner-left and inner-right inside parent container inner-container.
inner-container is set to display: inline-block; to have it's width to be equal of width of it's children.
The problem is, when I resize the window, inner-right div goes down and only then starts to resize itself.
How do I inner-right make it stay on the same line with inner-left, and, in the event of window resize, to resize instead of going down?
HTML:
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="inner-container">
<div class="inner-left"><img src="http://placehold.it/100x100" alt=""></div>
<div class="inner-right"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo orci, rutrum nec feugiat sed, ultrices non dolor. Aliquam laoreet.</strong><br>
Vivamus purus metus.
</div>
</div>
</div>
CSS:
.container {
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
display: inline-block;
}
.inner-left {
float:left;
width: 60px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
float:right;
text-align: left;
padding-left: 10px;
}
JSFIDDLE:
https://jsfiddle.net/acidonyx/naw6ojwe/4/
well just remove float: right from .inner-right and your problem will be solved.
.inner-right {
text-align: left;
padding-left: 10px;
}
to solve your other problem you can do
.inner-right {
overflow: hidden;
text-align: left;
padding-left: 10px;
}
For this you should use flexbox, here with inline-flex to fit your requirement
.container {
display: inline-block;
background-color: #f0fff0;
padding: 10px;
border: 1px solid #bce2c1;
border-radius: 5px;
}
.inner-container {
display: inline-flex;
padding: 10px;
background-color: #ffffff;
border: 1px solid #bce2c1;
border-radius: 5px;
margin-top: 10px;
}
.inner-left img {
height: 60px;
width: 60px;
}
.inner-right {
padding-left: 10px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="wrap-container">
<div class="inner-container">
<div class="inner-left">
<img src="http://placehold.it/100x100" alt="">
</div>
<div class="inner-right"><strong>Lorem ipsum dolor sit</strong>
<br>Vivamus purus metus.
</div>
</div>
</div>
</div>
You could try floating .inner-right to the left instead, and giving it a width set in a percentage value, like this:
.inner-right {
float:left;
width: 85%;
}
JSFIDDLE
You can use media queries to update the percentage as you need.
OK so here is my code
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
I want my website to look like this: first square is red, next to is green, and below red is yellow square. I thought that float left on first element should make next one jump right next to him. Why doesn't it work?
Add float: left; to .div2 and clear:left to .div3
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float: left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
clear: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
You need to add float:left to the green box in order to make the element stand next to red. If you added the float:left to the yellow square, it would stand next to green. We added clear: left to "clear" the left floats.
Read more about floats.
The problem is that floating elements are out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
Therefore, they don't impact surrounding elements as an in-flow element would.
This is explained in 9.5 Floats:
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
There is an exception to that problematic behavior: if a block element establishes a Block Formatting Context (is a BFC root), then it won't overlap the float:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context […] must not overlap the margin box of any floats in the same
block formatting context as the element itself.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
For example, you can establish a BFC with overflow different than visible, e.g. hidden
.div2 {
overflow: hidden;
}
.div1 {
height: 40px;
width: 40px;
background-color: red;
display: block;
float: left;
}
.div2 {
height: 40px;
width: 40px;
background-color: green;
display: block;
overflow: hidden;
}
.div3 {
height: 40px;
width: 40px;
background-color: yellow;
display: block;
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float:left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
float:left;
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
This will do what you want, but, there is much to improve in that code to make it more simple and more DRY, this will be a short answer, if you want to see a better and smaller style to do the same just ask, and gladly will help.
I want my page to fill the screen even if it doesn't contain enough content. I have made this happen with height set to 100% in body. What I also want is some space around my content, and by adding 5px to the margin it gets how I want it. My problem is that then I have to scroll to see the whole page, even if the content is not too long for the screen. I guess there is a simple sollution to this, but I can't seem to find it. Anyone who can?
/* Allmänt */
html, body{
background: grey;
background-size: cover;
height: 100%;
}
#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
/* Header */
#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}
#fadein {
margin: 10px auto;
position:relative;
width:970px;
height:215px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
#main-blogg{
width: 1050px;
margin: 0 auto;
}
#blogg{
min-height: 1000px;
}
/* Fot */
#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}
#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;
}
#adress{
width: 327px;
float: left;
}
#kontakt{
width: 326px;
float: left;
}
#tider{
width: 326px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>
<body>
<div id="content">
<div id="huvud">
<img id="header" src="hej.jpg" alt="Header">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li>HEM</li>
<li>OM OSS</li>
<li>BLOGG</li>
<li>MÄRKEN</li>
<li>HITTA HIT</li>
</ul>
</div>
</div>
<div id="main">
<div id="fadein">
<img src="slides1.jpg">
<img src="slides2.jpg">
<img src="slides3.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
</div>
<div id="fot">
<div id="fot-inre">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Hej</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info#mail.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av Maria</p>
</div>
</div>
</div>
</div>
</body>
Bulletproof full height!
*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-mozbox-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
height:100vh;
margin:0;
padding:0;
}
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
}
Reasons:
100vh is supported in IE9 and above (and basically anything else), and 100% is used as a fallback
border-box is a key piece of layout functionality, to support recalc after padding (so width:50px actually remains 50px, instead of 50px plus padding), and it works back to IE8
adding the margin:0;padding:0; to the html,body eliminates the white space around it ... if you desperately want padding on the body, add it separately (although you should really have it on whatever container you have for everything)
EDIT
So the reason you are still needing to scroll is because border-box handles padding, but not margin. If you want "room" around your content, add the padding there:
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
padding:5px 0;
}
This will give you the effect of room on top and bottom. However, if (for some crazy reason) you are really clinging to the need for margin over padding, you could use calc:
#content {
height:auto !important;
min-height:calc(100% - 10px);
min-height:calc(100vh - 10px);
margin:5px auto;
}
Only supported on IE9 and up, but will give you what you are looking for. I highly advise against it though, as what you are trying to attain is much more easily doable in ways that don't involve margin.
I would implement 2 things. I would use a bumper and calc.
<div class="bumper"></div>
.bumper {
height:5px;
width:100%;
}
put the bumper where you would want your padding to be. Then use calc to set the height of the content.
#content {
background-color: white;
max-width:800px;
padding: 5px;
min-height:90%; //backup for browsers who do not support calc
min-height:calc(100% -5px);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
html, body {
background: grey;
height: 100%;
margin:0px; //important
}
Result:
http://jsfiddle.net/m/qes/
Full Code: http://jsfiddle.net/neoaptt/r2ddyg8e/
Change
html, body{
background: grey;
background-size: cover;
height: 100%;
}
to
html, body{
background: grey;
background-size: cover;
height: 100vh;
}
then add a reset
*{box-sizing: border-box; padding: 0; margin: 0}
you can read more about Sizing with CSS3's vw and vh units
The problem:
The reason you have to scroll to see the whole page is because you are giving your element with the id content a min-height of 100% and then also giving it a margin of 5px auto. This is essentially saying I want my content element to have a height of 100% + 5px on the top and 5px on the bottom of margin. height now equals: (100% + 10px).
The answer:
If you want space around your content use the padding property on your content element instead of the margin. This will push the elements within the content element inward 5px from the top and 5px from the bottom, without increasing the height of your content element past 100%.
It should look something like this (not tested):
#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
You have a top and bottom margin on your #content div. Remove it and add this to the body :
body {
padding: 5px 0;
box-sizing: border-box;
}
I want to center a DIV which width is unknown. It should be as width as the actual content. I tried:
<div style="background-color: red; width: 300px; text-align: center; margin: 0 auto;">dsffsffsfsddf</div>
it only works when "width" is set. Auto wont help.
display: table; margin: 0 auto;
http://jsfiddle.net/vabxz/
div{
display:table
margin:0 auto;
}
Take a look at this previous answer: centering variable width divs
But one answer is to basically use css-floats
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
It's quite simple (http://jsfiddle.net/bukfixart/tYyJN/):
<div style="border:1px solid #000;text-align:center;">
<div style="border: 1px solid #f00; display:inline-block;">some content</div>
</div>
The key points are text-align:center for the outer box and display:inline-block for the inner box
Check out my fiddle: http://jsfiddle.net/PRUBd/
CSS
body {
text-align: center;
}
#container {
text-align: left;
border: 1px solid black;
padding: 10px;
display: inline-block;
}
HTML
<div id="container">
This div is as wide as its content and centered!
</div>