I have a question, I tried to search on google but unluckily I didn't find any answer...
So i want to remove gap between DIVs.
I have a small PHP application which shows users images in a div with some other info, DIV width is 250px and DIV height is auto because I don't know the length of content and I also didn't know the number of the DIV because i fetch data from MYSQL.
Here is a screen-shoot of my web page:
And my code is:
<style>
#det
{
width:250;
height:auto;
max-height:400px;
border-bottom:3px solid darkred;
background-color:white;
float:left;
padding:0px;
margin:0 auto;
border-radius:5px;
}
HTML
<div id='det'>
<img src='$user_image'><p>some text</p>
</div>
I want to remove gap between DIV and show it how a magazine-style look like. Example: masonry.desandro.com. Currently i used float:left but it's not working properly and maybe because I didn't set height. Is there anyway to solve this without set div height?
Thanks
Use flex fluid layout for showing variable height elements properly.
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 179px;
flex-grow: 0;
flex-shrink: 0;
}
https://jsfiddle.net/w4pfxk2x/
You should use display:inline-block; instead of float:left; and your problem will be fixed.
.det{
width:250;
height:auto;
max-height:400px;
border-bottom:3px solid darkred;
background-color:white;
display:inline-block;
padding:0px;
margin:0 auto;
border-radius:5px;
vertical-align:top
}
https://jsfiddle.net/IA7medd/haqkxkmb/
Related
I want to have a list with fixed height and inside items in one row. If the amount of items exceed the width, I want an overflow-x scroll so the items shouldn't be pushed to next row.
So far i've played around with inline-block for ul/li and float left for divs but they all get pushed to the next row..
Thanks for your help!
Try this:
.container {
overflow: auto;
white-space:nowrap;
width: 500px;
}
.item {
padding: 10px;
border: 1px solid red;
display: inline-block;
vertical-align:top;
margin-right:20px;
white-space:normal;
}
Working example: https://jsfiddle.net/3dsign/gw35yq9p/
Instead of using display:inline-block and floatings ,try learning Flexbox which its much easier and has incredible features :Flexbox Tutorial
So if you want, use this:
.container {
overflow: auto;
display:flex;
justify-content:space-around;
}
.item {
padding: 10px;
border: 1px solid red;
vertical-align:top;
white-space:normal;
}
I have the following CSS/Markup
http://jsfiddle.net/3SNm8/
.res-tile-wrap {padding-bottom:25px;}
.res-tile
{
border:solid 1px #CCC;
width:36px; height:34px; margin: 25px 0 0 25px; float:left; position:relative;
}
<div class="res-tile-wrap">
<div class="res-tile">1</div>
<div class="res-tile">2</div>
<div class="res-tile">...etc</div>
</div>
res-tile-wrap will contain an unknown number of tile divs. Is there a way to center res-tile-wrap or give the appearance that it is centered given that I do not want to give it a specific width because I want as many tiles per row as the screen will allow.
For the inner divs you can use display:inline-block instead of float:left and as inner content is behaving like an inline element you can center it in the container res-tile-wrap with text-align:center :
res-tile-wrap {
padding-bottom:25px;
text-align:center;
}
.res-tile{
border:solid 1px #CCC;
width:36px; height:34px; margin: 25px 0 0 25px;
display:inline-block;
}
Example with 4 inner divs
Example with 11 inner divs
.res-tile-wrap{text-align:center}
.res-tile
{
border:solid 1px #CCC;
width:36px; height:34px; margin: 25px 0 0 25px;
display:inline-block;
}
You don't need position:relative or float at all. Make tiles display: inline-block, so they will behave like "text" and text-align:center the container.
While #Noyulysses answer works well for centering along the X-axis (and I'm assuming that's what your question was asking about) it's nearly impossible to both vertically and horizontally center an element with an unspecified width and height without using JavaScript.
You can center something in the exact center of the screen with something like this:
jQuery.fn.center = function ()
{
this.css("position","fixed");
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
$('.downBig').center();
$(window).resize(function(){
$('.downBig').center();
});
I got this function from another SO answer somewhere... I can't find it at the moment but when I do I'll link to it.
DEMO
To center a div of an unknown width simply apply display: table to it, with margin: 0 auto.
DEMO http://jsfiddle.net/3SNm8/8/
.res-tile-wrap {
padding-bottom:25px;
display: table;
margin: 0 auto;
}
You have 2 easy ways :
1) display:table : DEMO
html{
display:table;
height:100%;
margin:auto;
}
body {
display:table-cell;
vertical-align:middle;
}
2) display:flex; : DEMO
html, body{
display:flex;
flex-direction:column;
height:100%;
align-items:center;
}
body > div {
margin:auto;
}
.res-tile-wrap
{
width: 100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
hand type: untested
Another option http://jsfiddle.net/3SNm8/12/
body {
text-align:center;
}
.res-tile-wrap {
padding-bottom:25px;
margin:0 auto;
display:inline-block;
}
I am designing a webpage that needs to be split into 4 equal DIVs. This would be easy if I didn't also need to overlap text onto two of these DIVs. So, I have decided the best route would be to stack two container DIVs on top of each other, each with a width of 100% and height of 50%. Then, I would split these into two DIV classes, each with a height of 100% width of 50%, thus giving me 2 DIVs per container DIV, which are 2 in number.
My current CSS:
#collectionsTop {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.topRight {
background-color:red;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.topLeft {
background-color:blue;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
#collectionsBottom {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.bottomRight {
background-color:yellow;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.bottomLeft {
background-color:green;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
And my HTML:
<div id="collectionsTop">
<div class="topRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="topLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
<div id="collectionsBottom">
<div class="bottomRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="bottomLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
Apparently, none of the above works in any capacity at all, displaying the images in their full resolution, not floated, and in no way limited by their parent DIVs. I have no idea why. Please help.
You have placed - clear:both in the css of topLeft , topRight elements
idea => clear:both; - No floating elements allowed on the left or the right side of a specified element ,
hence in your case also similar thing is happening,
check this fiddle : http://jsfiddle.net/4q4Jz/
update:
now check the fiddle.. demo
remove all the `clear:both;
and try it.
`
I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden).
So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.
Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:
http://jsfiddle.net/nmartin867/StHJA/
HTML
<body>
<div class="floating">
I'm floating!
</div>
<div class="container">
<div class="inner">
Why am I not overlapping?
</div>
</div>
CSS:
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:visible;*/ <--This would work
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
float:right;
}
You could do this but I am not sure if it applies to your situation.
.inner{
background-color:yellow;
position: absolute;
width:100%;
text-align: right;
}
Alternatively when you want to override third party styles but do not wish to edit them in the third party application you can recreate the same css class in your own stylesheet and force it to overwrite the third parties by using important! eg:
float: none !important;
Have you tried absolute positioning instead? Because you are floating a DIV that is not in the same container you want to overlap, it will position outside in the body itself. Also, you did not set the z-index for the floated DIV, so it will be layered behind because it is ahead of the other container in sequential order.
div{
border: solid 1px red;
}
.container{
height:300px;
position: relative;
overflow: visible;
z-index: 1;
background-color:black;
color: blue;
}
.inner{
background-color:yellow;
overflow:hidden;
/*overflow:hidden;*/
text-align: right;
}
.floating{
color:black;
width:100px;
height:100px;
background-color:green;
/* float:right;*/
position:absolute;
top:0px;
right:0px;
z-index:2;
}
I am not sure if this is the effect you want to accomplish, but this will position the first container on the top.
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/