Solved

Css to add margin to column

Posted on 2013-06-26
3
381 Views
Last Modified: 2013-06-26
I have this newspaper style column in css but I would like to add equal margin in left and right so it would center the 3 columns. right now it looks wide.
I applied it in a DIV in HTML. Should I need another DIV on top of this DIV to add the margin.
Please add the code necessary. thanks

.newspaper3
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
0
Comment
Question by:zachvaldez
  • 2
3 Comments
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 225 total points
ID: 39279538
No need to add more DIVs on top. Just assign some margins (for example 120px):
    margin-left:120px;
    margin-right:120px;

Open in new window


So, final CSS will be:
.newspaper3{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    margin-left:120px;
    margin-right:120px;
}

Open in new window


Here is demo:
http://jsfiddle.net/2E3fp/
0
 

Author Comment

by:zachvaldez
ID: 39279559
That works perfect! What Id like to shift into is getting away from table structures-the td,tr,etc..
which I've previously use and instead use CSS with rows and cols that is controlled by DVs.
I'll be  creating a page with many labels and textboxes in rows and cols using css.
Im looking for examples to start to buld it.It is a registration page kinda , therefe=ore a a lot of info required with several kinds of controls in it.
Can yo provide an excellent layout to to start with?  Perhaps a few lines for rows and cols. thanks
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39279644
Seems that should be posted as another question, as I haven't excellent layout that will help you to start with.
0

Featured Post

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question