I have the following code jsbin. Is it possible to have vertical scroll when messages overflow the wrapper? Thanks!
replace your css with this css demo
#wrapper {
position: relative;
height: 400px;
border: 1px solid #AAA;
margin-bottom: 20px;
}
#list {
position: absolute;
bottom: 0;
width: 100%;
max-height:100%;
overflow-y: auto;
}
.message {
background-color: orange;
padding: 10px;
border-bottom: 1px solid red;
}
Related
I have a div with an arrow before it.
the problem is, when I add:
overflow-y: auto;
the arrow disappears.
https://jsfiddle.net/z95frkuv/
#n {
position: fixed;
min-width: 140px;
min-height:100px;
max-height:400px;
//overflow-y: auto; // need to remove this to see arrow
border:1px solid #000;
z-index:3000;
}
#n:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
why?
overflow:auto works like overflow:hidden when it comes to absolute positioned elements.
In order to overcome it, add a wrapper div:
<div class="wrapper">
<div id=n>content<br>content<br>content<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br></div>
</div>
And update the css:
.wrapper {
position: fixed;
z-index:3000;
}
.wrapper:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
#n{
min-width: 140px;
min-height:100px;
max-height:400px;
overflow-y: auto;
border:1px solid #000;
}
fiddle: https://jsfiddle.net/yow7wm7r/1/
That's exactly what overflow is doing, if an element is defined inside the box, but with css it sticks outside, the overflow will clip it out.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have a jsfiddle here - http://jsfiddle.net/w2tbefap/
It's a simple css problem.
I have a two separate elements (div's here).
The two elements have different widths.
I need to responsively center the elements next to each other so it is positioned like in the bottom example. The bottom example is just a centered image.
.block-1{
border: 1px solid red;
height: 100px;
}
.content{
border: 1px solid green;
position: relative;
}
.block-1-1{
background: blue;
width: 100px;
height: 50px;
//float: left;
position: absolute;
right: 50%;
margin-right: 20px;
}
.block-1-2{
background: yellow;
width: 300px;
height: 50px;
//float: right;
position: absolute;
left: 50%;
//right: 0;
}
.block-2{
border: 1px solid red;
height: 100px;
}
.content-2{
text-align: center;
}
Try this CSS for the blocks, and add text-align:center; to .content:
.block-1-1 {
background: blue;
width: 100px;
height: 50px;
margin-right: 20px;
display:inline-block;
}
.block-1-2 {
background: yellow;
width: 300px;
height: 50px;
display:inline-block;
}
jsFiddle example
Do you have to use position: absolute; ?
I suggest inline-block:
http://jsfiddle.net/w2tbefap/4/
.content{
border: 1px solid green;
position: relative;
text-align: center;
}
.block-1-1, .block-1-2 {
display: inline-block;
width: 100px;
height: 50px;
}
I know this is probably very simple but I have tried using all position settings, float, and nesting. The top div varies in height due to dynamically created text and I need the div below it to be 20px below the top div. Any help is greatly appreciated.
I know I have the position as absolute but that is just to demonstrate kind of what I'm looking for.
#wrapper {
position:absolute;
width:341px;
height:371px;
z-index:1;
border: solid #777 1px;
}
#topbox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
border: solid #000 1px;
top: 7px;
}
#bottombox {
position:absolute;
width:280px;
z-index:1;
padding: 30px;
top: 136px;
border: solid #000 1px;
}
<div id="wrapper">
<div id="topbox">Top text box #1. The text is dynamically created here with a height that will vary. </div>
<div id="bottombox">Bottom text box #2. The text is dynamically created here with a height that will vary and needs to be 20px below the bottom of the top text box.</div>
</div>
Looking at the CSS you have, the problem is you are using absolute positioning. For a task like this you should use relative positioning. Here it is on jsFiddle to show you it in action & here is the CSS I adjusted to achieve that:
#wrapper
{
position: relative;
float: left;
display: inline;
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 7px 0 0 0;
border: solid #000 1px;
}
#bottombox
{
position: relative;
float: left;
display: inline;
width: 280px;
z-index: 1;
padding: 30px;
margin: 20px 0 0 0;
border: solid #000 1px;
}
Here is how it renders in my local browser now:
I also looked over your CSS & combined/consolidated it since I find that repeating code can cause confusion when debugging items like this. Here is how I would code this:
#wrapper, #topbox, #bottombox
{
position: relative;
float: left;
display: inline;
}
#topbox, #bottombox
{
width: 280px;
z-index: 1;
padding: 30px;
border: solid #000 1px;
}
#wrapper
{
width: 341px;
min-height: 371px;
z-index: 1;
border: solid #777 1px;
}
#topbox { margin: 7px 0 0 0; }
#bottombox { margin: 20px 0 0 0; }
To give #topBox a bottom margin you simply have to use:
#topBox {
margin-bottom: 20px;
}
The problem is that since you use position: absolute the elements jumps out of their normal flow and will no longer relate to each other.
I am working on kind of a popup. Its structure is very simple and is as follows:
<div class = "popup">
<div class = "upper">
<img src = "http://www.tapeta-mis-galazki-koala.na-pulpit.com/pokaz_obrazek.php?adres=mis-galazki-koala&rozdzielczosc=128x128" />
</div>
<div class = "description">This is a very interesting description of what you can see above.</div>
</div>
with styles of
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
display: inline-block;
}
.popup .upper img {
display: block;
}
and here is a fiddle with the code applied.
As you can see, the div.popup is positioned as fixed to the body.
What I want to achieve is to make the div.description NOT extend its parent div.popup width when it contains much text, instead it should wrap the text to be multilined and be of width of the div.popup. The div.popup width should be determined by the div.upper width and its content. In other words I mean to have div.description's width AT MOST of the div.upper's width, regardless to its (div.description text content).
EDIT
There's this little difficulty: the image content is not static and may be dynamically changed so the width is not constant.
Is that even possible to achieve that with CSS?
http://jsfiddle.net/de6fr/1/ - a basic example of how to fix
You're basically using popup as a container, which means that if you want to retain its width, that's what you have to work on. I used the max-width property with .popup like this:
.popup {
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
display: table;
width: 1px;
}
.popup > div {
display: table-row;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
}
.popup .upper img {
display: block;
}
Update - Flexible
http://jsfiddle.net/de6fr/4/
The fix for making it flexible is to use a CSS hack, which basically changes the nature of the element to a table
The nature of CSS (cascading style sheets) means that it's pretty hard to get a parent DIV to take the size of a child div without some crazy ideas involved. However, there's nothing preventing a "table" with a really small width doing that, as per this code:
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
display: table;
width: 1px;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
display: table-row;
}
.popup .upper img {
display: block;
}
.popup .description {
display: table-row;
}
You have not defined the width for fixed element so add some width to your fiexed element
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
width: 100%;
}
here is the demo
Add a CSS property to your popup class and Give it a width
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
overflow:scroll;
width:400px;
}
I am new to CSS and I am trying to make my first website as css but I am having a problem getting the two boxes to align side by side for the body and the four boxes above that don't stay next to each other. I have played around with Float and position with no luck.
You can see the site here: http://gdisinc.com/barker/default.php
I'm trying to get it to look like this: http://gdisinc.com/barker/images/menubar/layout_barker.jpg
Could you please tell me what I am doing wrong and how I can fix it? Thank you!
just updated your css with my css that will work perfectly there were few bugs you made so i sort it out those points so now its working fine updated your with mentioned below css :-
CSS
div#main {
margin: auto;
overflow: hidden;
width: 902px;
}
div#outerbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: left;
height: 300px;
width: 660px;
}
div#innerbox {
background-color: #4D1516;
border: 1px solid #000000;
height: 277px;
margin-left: 10px;
margin-top: 10px;
width: 640px;
}
div#sideouterbox {
background-color: #A2282C;
border: 2px solid #FFFFFF;
float: right;
height: 300px;
width: 222px;
}
First you're at the very limit in box width, try making it a bit smaller
after that use
display:inline-block;
if the sum of the boxes width fit in the container you should have no problem.
Hope this helps
Solution without floats and weird overflow:hidden statements, just standard positioning...
div#main {
margin: auto;
position: relative
width: 902px;
}
div#outerbox {
border: 2px solid white;
height: 300px;
width: 669px;
background-color: #A2282C;
position: absolute;
}
div#innerbox {
margin: 10px;
border: 1px solid black;
height: 277px;
background-color: #4D1516;
}
div#sideouterbox {
border: 2px solid white;
height: 300px;
width: 222px;
background-color: #A2282C;
position: absolute;
right: 0;
}
div#sideinnerbox {
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
height: 280px;
width: 198px;
background-color: #4D1516;
}
Just copy this over your styles and you should be fine.