CODEWITHSUNDEEP
htmlcss
Asean Jazz
Asean Jazz

Reputation: 125

CSS Auto top div

Need your help about simple css question :

How to auto top div using display: inline block and vertical-align: top with my case below?

The css here :

vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 10px;
margin-top: 5px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;

and here is the fiddle

Help much appreciated...

Upvotes: 1

Views: 432

Answers (3)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Remove margin-top: 5px from .content_wall, but you probably don't want them to touch each other, so don't remove it, but change it to margin-bottom: 5px.

Then add following to your stylesheet:

body, html {
    margin: 0;
    padding: 0;
}

Check the updated fiddle

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

change your css for class content_wall like this

.content_wall
{
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 0px;
margin-top: 0px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
}

Removed the margin and the padding;

Demo Fiddle

or even better give the padding first then remove the top padding like this

.content_wall
{
vertical-align: top;
display: inline-block;
width: 194px;
background: #fff;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
word-wrap: break-word;
padding: 10px;
padding-top:0px;
margin-top: 0px;
-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
text-align: left;
 }

Fiddle for this

Upvotes: 0

Robin
Robin

Reputation: 7895

Use multiple columns:

<div class="content_wall_column">
    <div class="content_wall">...</div>
    <div class="content_wall">...</div>
</div>

<div class="content_wall_column">
    <div class="content_wall">...</div>
</div>

See my JSFiddle.

Upvotes: 1

Related Questions