CODEWITHSUNDEEP
css
user418751
user418751

Reputation: 1955

margin-right not working when using columns property

I am trying to apply columns css on so that I can show the content in pages horizontally. But when I set padding-right on body. I found it didn't work? Why? Also, some times, there is blank column at the end 

body{
height: 200px;
text-align: center;
-webkit-column-width: 608px;
-webkit-column-gap: 160px;
padding: 80px 80px 100px 80px;

}

updated to reply @jimjimmy1995

<html>
<style type="text/css">
.div{
height: 344px;
text-align: center;
-webkit-column-width: 608px;
-webkit-column-gap: 160px;
}   
body{
margin: 80px 80px 100px 80px;
}
</style>
</head>
<body>
<div class='div'>
<p> blablablabla. </p>
</div>
</body>
</html>

Upvotes: 1

Views: 1043

Answers (1)

James Coyle
James Coyle

Reputation: 10418

I personally wouldn't use the column property for layout as it is intended for use elements containing inline elements and text rather than block elements. There are several ways which allow you to achieve a similar effect such as using display:inline; or float:left.

In response to your question, you may need to specify a width to the body. Also note that your column width is rather large so may not fit two columns on the line:. The total width of two columns in with your styles is 80px+608px+160px+608px+80px=1536px which is larger than most peoples monitors.

I would suggest creating a jsfiddle so we can see exactly what the problem is.

Upvotes: 1

Related Questions