How to display scroll bar when overflow if display:table ?
Sample code:
https://jsfiddle.net/mvnvnk5z/
html:
<div class="chatpanel">
<div id="chatcontent">
<p class="userchat">hello</p>
<p class="userchat">hello2</p>
<p class="userchat">hello3</p>
<p class="userchat">hello4</p>
<p class="userchat">hello5</p>
<p class="userchat">hello6</p>
<p class="userchat">hello7</p>
<p class="userchat">hello8</p>
</div>
</div>
css:
.chatpanel{
display:table;
table-layout:fixed;
overflow-x:hidden;
overflow-y:auto;
height:50px;
width:50px;
}
#chatcontent {
display:table-cell;
}
thanks
Change overflow-y:auto; to overflow-y:scroll; if you're looking forward to have scroll on overflowed content in y-axis, you can follow the same pattern for x-axis, here's the sample code;
Scroll
Use this code Check here
<div class="chatpanel">
<div id="chatcontent" style="overflow-y:auto;height:100px;">
<p class="userchat">hello</p>
<p class="userchat">hello2</p>
<p class="userchat">hello3</p>
<p class="userchat">hello4</p>
<p class="userchat">hello5</p>
<p class="userchat">hello6</p>
<p class="userchat">hello7</p>
<p class="userchat">hello8</p>
</div>
</div>
Enjoy...!
Related
I have a grid section in which I show posts and I display photos and text. However, no photos are the same size and that is inevitable so I try to make them the same size. I cut to the chase, the problem is the width:auto; stretches the image horizontally.
<div class="item_grid item2">
<div class="panel">
<div style="height:50px; overflow:hidden;">
<h4 class="recent-post-header">
Title
</h4>
</div>
<div style="height:300px; overflow:hidden;">
//Problem is Here
<img src="/Image" alt="img_preview" style="height:100%; width:auto; " /> /
</div>
<div style="height:100px; overflow:hidden">
<div class="clearfix post_date">
<span class="pull-left">DateCreated</span>
</div>
<p>Description</p>
</div>
<p> Read More <i class="icon-angle-right"></i></p>
</div>
</div>
Is there any way to allow the width of the image overflow and then hide it?
use
<img src="/Image" alt="img_preview" style="height: 100%; width: 100%; object-fit: cover" >
eventhoug ie doesnt support object-fit
Short and straightforward answers
style="height:100%; object-fit: cover;"
I'd like to make some sort of a program page for a festival. I want to create a list of images with little text underneath. I don't succeed in placing the text underneath (it always ends up next to the images instead of underneath). Can somebody help?
It should look like this:
[img1] [img2] [img3]
[text1] [text2] [text3]
[img4] [img5]
[text4] [text5]
... and so on
The size of the images is fixed, so that the rows with only 2 images are the same size as those who have 3.
This is my code in CSS thus far:
For the texts (small and big):
.prog_big{width:321px; height:434px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left; text-align:center}
.prog_small{width:207px; height:283px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left;text-align:center}
For the images (small and big):
.poster_big{width:321px; height:434px; margin-left:30px; float:left}
.poster_small{width:207px; height:283px; margin-left:30px; float:left}
I don't this this is a css issue really. You can achieve this in HTML with this type of layout
<figure>
<img src="your_Image">
<figcaption>text here</figcaption>
</figure>
Division and image tags are not inline element. Because of this reason they will create a new line in the screen for each of them.
Make them inline, using the css "display:inline-block". They will stand side by side.
div.first-row div, div.second-row div {
display:inline-block;
float:left;
width:100%;
}
div.first-row div {
width: 33.3%;
}
div.second-row div {
width: 50%;
}
div img {
width:100%;
height:auto;
}
p {
text-align:center;
}
<div class='first-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
<div class='second-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
A flexbox solution:
.row {
display: flex;
flex-flow: row;
justify-content: flex-start;
}
.column {
display: flex;
flex-flow: column;
justify-content: flex-start;
margin-right: 10px;
}
p {
width: 100%;
text-align: center;
}
<div class="row">
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 1</p>
</div>
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 2</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 3</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 4</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 5</p>
</div>
</div>
I'm having a dilemma which is causing my website to be pretty ugly, what I'm essentially trying to do is make these tiles wrap nicely and show more tiles on one row dependent on the client's screen size.
Most of it works but it looks terrible if aligned to the center (Tiles center)
Text-align: center
Text-align: left
What I want it to look like:
http://puu.sh/d3Rpt/6d1550eaa3.png
As you can see, the left align looks more aesthetically pleasing but there is a massively ugly piece of white space, what I want to do is remove that white space or center the actual tile parent.
<div class='ioholder'>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
<div class="imghold">
<p>
Test
</p>
</div>
</div>
.ioholder
{
display:inline-block;
text-align:left;
padding:10px;
}
.imghold
{
vertical-align:top;
display:inline-block;
min-width:200px;
width:200px;
height:240px;
max-height:240px;
margin:4px;
text-align:left;
background-color:rgb(240,240,240);
border-style:solid;
border-width:1px;
border-color:rgb(175,175,175);
border-radius:2px;
}
This looks like a good use case for flex boxes. You can set different levels of importance to boxes so some will expand to fill blank space while others do not. There are a lot of excellent examples you can use to learn at css-tricks here http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am not sure I understand what you are trying to achieve so I added this to the CSS based on my understanding:
.ioholder {
display:inline-block;
text-align:center;
padding:10px;
}
.ioholder > .imghold{
float: left;
}
I recommend you tou use grid system, for example Yui3 Grid - http://yuilibrary.com/yui/docs/cssgrids/ - or some other grid system.
.imghold{
margin: 5px;
border: 1px solid black;
height: 100px;
}
.container{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.ioholder{
width: 100%;
background-color: #eee;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids/cssgrids-min.css">
<div class='ioholder'>
<div class='yui3-g container'>
<div class="yui3-u-1-6"><div class="imghold">one</div></div>
<div class="yui3-u-1-6"><div class="imghold">two</div></div>
<div class="yui3-u-1-6"><div class="imghold">three</div></div>
<div class="yui3-u-1-6"><div class="imghold">four</div></div>
<div class="yui3-u-1-6"><div class="imghold">five</div></div>
<div class="yui3-u-1-6"><div class="imghold">six</div></div>
</div>
</div>
You can also use responsive grid:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssgrids-responsive/cssgrids-responsive-min.css">
and then
<div class='yui3-g-r'>
<!- ... ->
</div>
I have two inline divs, the second of which uses vertical-align:top. The problem is that the second div begins with a h2 and then followed by some content, and h2 by definition doesn't listen to vertical-align. So the h2 is dragging down the rest of the contents. How do I fix that?
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline; vertical-align:top;">
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>
The fix worked thanks to the answers from #Ishan Jain and #Hiral. I now have a similar problem with two nested divs in the original right div. New code:
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline-block; vertical-align:top;">
<h2>Heading</h2>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="233">
</div>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="191">
</div>
<p>
Paragraph of text
</p>
</div>
You must use display:inline-block; for make div inline.
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Use this: style="display:inline-block; vertical-align:top;"
Try this
Or just try to make your first div float:left:
Try this
Try:
HTML
<div>
<img src="" width=300 height=600>
</div>
<div>
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>
CSS:
div{
display:inline-block; //change from inline to inline-block
vertical-align:top;
}
DEMO
I've been going through documentation, tutorials and examples. But I can't seem to get these 4 boxes to align properly no matter what I do.
div#frontpage{width:100%; }
div#1{width:25%; float:left; position:relative;}
div#2{width:25%; float:left; position:relative;}
div#3{width:25%; float:right; position:relative;}
div#4{width:25%; float:right; position:relative;}
.clear{clear:both;}
<div id="frontpage">
<div id="1">
</div>
<div id"2">
</div>
<div id="3">
</div>
<div id="4">
</div>
<div class="clear">
</div>
</div>
This is what I came up so far and the closest result I want to achieve. Get them to all align horizontal straight across one row. The reason why I use % instead of px is because my wordpress theme is responsive.
Just tweaked it a bit and it works fine.
CSS
div#frontpage{width:100%; }
div.box{width:25%; float:left; position:relative;}
.clear{clear:both;}
HTML
<div id="frontpage">
<div class="box">
a
</div>
<div class="box">
s
</div>
<div class="box">
d
</div>
<div class="box">
f
</div>
<div class="clear">
</div>
</div>
As mentioned by Phil, Ids should not be numbers. Also, your <div id"2"> should have been <div id="2"> (missing '=' sign)
see this working example http://jsfiddle.net/QFMXx/
change Id's in your code. Id's shouldn't start with digits
<div id="frontpage">
<div id="d1">sfdfs
</div>
<div id="d2">dfsdf
</div>
<div id="d3">dsfsdf
</div>
<div id="d4">dfsfsd
</div>
<div class="clear">sdfsd
</div>
</div>
and css:
div#frontpage{width:100%; }
div#d1{width:25%; float:left; position:relative;}
div#d2{width:25%; float:left; position:relative;}
div#d3{width:25%; float:right; position:relative;}
div#d4{width:25%; float:right; position:relative;}
.clear{clear:both;}
I have modified your code little bit and got the result. Could you please try this?
<style>div#frontpage{width:100%; height:50%;border:1px solid red }
div.s1{width:25%; height:50%;float:left; position:relative;border:1px solid blue;clear:both}
.clear{clear:both;}
</style>
<div id="frontpage">
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="s1">
</div>
<div class="clear">
</div>
</div>
</div>
Hope this helps.
--Felix
Id must not start with a number. and maybe you can use the following style
<style>
div#frontpage{width:100%;background-color:#ccc; }
div#a1{width:25%; float:left; position:relative;background-color:red;margin-right:75%;}
div#a2{width:25%; float:left; position:relative;background-color:#ffccea;margin:0 50% 0 -75%}
div#a3{width:25%; float:right; position:relative;background-color:blue;margin:0 25% 0 -50%}
div#a4{width:25%; float:right; position:relative;background-color:yellow;margin:0 0 0 -25%}
.clear{clear:both;}
</style>
I used a margin to the right to push away all the elements and a negetive margin to the left to pull up my desired elements.
div#frontpage{width:100%; position:relative;}
div#a{width:25%; float:left; }
div#b{width:25%; float:left; }
div#c{width:25%; float:right;}
div#d{width:25%; float:right;}
.clear{clear:both;}
<div id="frontpage">
<div id="a"></div>
<div id"b"></div>
<div id="c"></div>
<div id="d"></div>
<div class="clear"></div>
</div>
I am not sure,