inline block with pintrest like boards - html

I want the inner div to flow to top automatically.Like Pintrest UI
http://jsfiddle.net/zbbHc/127/
HTML
<div class="wrapper">
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br></div>
<div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>
CSS
.wrapper {
width: 100%;
background: red;
text-align: center;
}
.iB {
display:inline-block;
vertical-align:top;
width: 200px;
background: green;
}

If you are generating the HTML dynamically, just comment out the white space between the inline divs when you are generating the code.
Demo
<div class="wrapper">
<div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div>
</div>

Using display: block; in conjunction with float: left; omits this problem. But that'll require some additional efforts to center the whole cluster.
Another workaround is masking the line breaks:
<div class="iB">Content<br>Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br></div><!--
--><div class="iB">Content<br>Content<br>Content<br>Content<br></div>

Add font-size:0 to the parent element. Don't forget to define the font-size for child elements:
.wrapper {
font-size: 0px;
}
.iB {
font-size:15px;
}
Demo here

I believe you're looking for margin-left:-4px;
.iB {
display:inline-block;
margin-left:-4px;
}
http://jsfiddle.net/daCrosby/zbbHc/128/
To remove the spacing on top, you have to either use JavaScript, or reformat your everything into columns. This has some drawbacks, but it is a JS-free solution.
HTML
<div id="hold">
<div class="wrapper">
<div class="iB">Content<br />Content<br />Content<br /></div>
</div>
<div class="wrapper">
<div class="iB">Content<br />Content<br />Content<br /></div>
</div>
<div class="wrapper">
<div class="iB">Content<br />Content<br />Content<br /></div>
</div>
</div>
CSS
#hold{
width:100%;
}
.wrapper {
float:left;
width: 33%;
}
.iB {
display:block;
}
http://jsfiddle.net/daCrosby/zbbHc/131/

Related

margin: 0 auto; not centering div in parent

I have the following div arrangement, with the below css. Everywhere online seems to say you need margin:0 auto; for centering, but the text still goes to the top right,
Any help appreciated.
.menu_item {
margin: 0 auto;
}
<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
<div id='menu_but' style='width:36px;height:36px;'>
<div class='menu_line' />
<div class='menu_line' />
<div class='menu_line' />
</div>
<div id='menu'>
<div class='menu_item'>HOME</div>
<div class='menu_item'>ABOUT US</div>
<div class='menu_item'>CONTACT US</div>
<div class='menu_item'>PORTFOLIO</div>
</div>
</div>
First of all, <div> is not a self-closing tag so you have to write </div> instead of <div class='menu_line'/>
Then, you could simply do:
<style>
.menu_item{
display: inline-block;
}
#menu {
position: relative;
text-align: center;
}
</style>
<div id="menu">
<div class="menu_item">HOME</div>
<div class="menu_item">ABOUT US</div>
<div class="menu_item">CONTACT US</div>
<div class="menu_item">PORTFOLIO</div>
</div>
maybe use flexbox ?
.parent {
display:flex;
justify-content:center;
align-items:center;
}
All of the child elements will be centered

Placing the same Div's one behind the other?

I want to set several div's in succession, but find it unnecessary to copy the code again and again. How it is possible for me to put 5 times the same div's behind the other in a more effective way than I've described here?
HTML:
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
CSS:
.procduct {
margin: 5px;
padding: 5px;
height: 150px;
width: 150px;
border: 1px solid #F00;
float: left;
}
.image {
z-index: -1;
position: absolute;
}
.overlay {
padding-top: 65px;
padding-left: 17px;
display:none;
}
.procduct:hover .overlay {
display:block;
}
.procduct:hover .image {
opacity:0.00;
}
.clear {
clear: both;
}
http://jsfiddle.net/ghac101/hvpn4/
Unfortunately there is no way with vanilla HTML production to magically reduce the work required. You can, however, use a framework like HAML to reduce some of the repetitiveness.
For example, the code:
<div class='content'>Hello, World!</div>
in HAML, can become:
.content Hello, World!
It's not exactly what you're looking for, per se, but it is probably as close as you'll get. The bottom line is you can't cut corners with writing HTML this way. You could use another language like JavaScript or PHP to create or duplicate HTML elements as you need them, however.
There sure is:
<?php
$numberofdivs = 5;
for ($i=1;$i<$numberofdivs;$i++) {
echo '<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>';
}
?>
Hope this helps.

Hover on div element does not do the effect individually

I have multiple divs with the same class of "product". When I hover on each product element, I need them to have a hover effect, but the problem is that when I hover over the first element, all other elements also have the effect applied rather than just the one i hovered. What am i doing wrong?
<style>
div.product{
width:90%;
margin:10px auto;
height: 200px;
transition: all 0.1s ease;
background-color: #069;
}
div.product:hover{
margin-top:-5px;
}
.img_box{
width:50%;
height:100%;
padding: 10px;
float:left;
box-sizing: border-box;
}
.desc_box{
width:50%;
height:100%;
float:left;
padding: 10px;
box-sizing: border-box;
}
.img{
background-color: #b65050;
height: 100%;
}
.desc{
background-color: chocolate;
height: 100%;
}
</style>
HTML:
<div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
<div class="product">
<div class="img_box">
<div class="img">
image
</div>
</div>
<div class="desc_box">
<div class="desc">
desc
</div>
</div>
</div>
</div>
heres my fiddle: MY FIDDLE
This is because you are floating the divs. Changing margin-top moves the element which creates room underneath it.
What you need is this:
div.product{
position:relative;
}
div.product:hover{
top:-5px;
}
position:relative basically takes up the original space but lets the div to be rendered elsewhere.

Align container divs

I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.

Clear a section next to div using css

I need to clear a section after a div has class name last. For some reason I couldn't edit my html. I need to achieve it using just css.
My Html code:
<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>
<div class="column">test<br />test</div>
<div class="column">test</div>
<div class="column">test</div>
<div class="column last">test</div>
Css:
.column{ width:250px; margin-right:10px; float:left;}
.column.last{ margin-right:0px;}
Any help?
.column.last:after {
visibility: hidden;
display: block;
font-size: 0px;
content: " ";
clear: both;
height: 0px;
line-height: 0px;
}
This is known as "clearfix."
Use a div to clear the float. ;)
.column{ width:24%; margin-right:1%;float:left;background:grey;margin-bottom:20px;}
.column.last{ margin-right:0px;}
.clear {clear:both;}
<div class="column">1<br />2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column last">5</div>
<div class="clear"></div>
<div class="column">6<br />7</div>
<div class="column">8</div>
<div class="column">9</div>
<div class="column last">10</div>
http://jsfiddle.net/vinicius5581/YMf2j/7