CODEWITHSUNDEEP
htmlcss
Andy897
Andy897

Reputation: 7133

space between two columns div

I have the following code. Can someone please suggest the right way to give space between two column classes ? 

<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>

.row {
    clear: both;
}

.column {
    width: 50%;
    box-sizing:border-box;
    padding: 10px;
    float: left;
}

Upvotes: 1

Views: 13607

Answers (2)

CMS_95
CMS_95

Reputation: 335

try 

<div...></div> <div...></div>

if that does not work or has a compatibility issue

then try:

<div class="column" id="1"></div>
<div class="column" id="2"></div>

CSS:

div.column#1{position:fixed/relative/absolute;left: #px or #% ;top: #px or #%;}

note: ".column" is the class; the "#1" is the id; position should have only one of the listed values and there may be a few others; Left defines the # of px or % from the left of the document; and top defines the # of px or % from the Top of the document;

NOTE:I have only tested this method with Firefox. so other browsers may have other parameters.

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

1 Using margin (Recommended way)

.column {
   margin: 10px; /* or what ever */
}

2 Using Line Breaks (Not recommended)

Using this:

<div class="column"></div>
<br />
<div class="column"></div>

3 Padding (that you're using)

Padding would add a space inside the element. Which won't do the trick. You need to use margin instead of padding.

Upvotes: 2

Related Questions