CODEWITHSUNDEEP
htmlcss
Corona
Corona

Reputation: 374

HTML/CSS Space Between 2 Divs

I looked across the web for an answer to my question but most of the returns to my queries were asking the opposite of my question which seems to be more of a common problem. I want to separate two divs with a 20 pixel space so that the divs appear as 2 rectangles rather than one.

Here is my CSS:

#balances {
font-family:Lato;
background-color:#00253F;
color:#FFFFFF;
font-size:28px;
padding-left:15px;
font-weight:bold;
padding-right:10px;
padding-top:15px;
height:130px;
width:52%;
float:left;
}

#transact {
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
background-color:#00253F;
color:#FFFFFF;
font-size:28px;
padding-left:15px;
font-weight:bold;
padding-right:10px;
padding-top:15px;
height:130px;
width:52%;
float:left;
}

this is the HTML:

<body>
     <div id="main-page-content">

          <div id="balances">
                <u>Balances</u>
                <div class="total-balance">Total Balance</div>


                <div class="balance">Balance:
                     <a href="#" class="button"/>Deposit</a>
                     <a href="#" class="button"/>Withdraw</a>
                </div>

                <div class="fbalance">
                     <a href="#" class="button"/>Deposit</a>
                     <a href="#" class="button"/>Withdraw</a> 
                </div>

          </div>

          <div id="transact">

          </div>

     </div>
</body>

The result of the above: Result of the code I've given

Upvotes: 1

Views: 10086

Answers (2)

Ruddy
Ruddy

Reputation: 9923

Pretty simple using margin, there are many ways to do it but I went with the simple way of putting a class on button 2 and setting margin-left: 20px;.

If you don't want to add a class you can use :nth-child(n)(or other selectors, find more here), note that this is using CSS3. More on that here.

.button {
  width: 100px;
  height: 20px;
  background: blue;
  float: left;
  color: #fff;
}
.button2 {
  margin-left: 20px;
}
<div class="button">Button 1</div>
<div class="button button2">Button 2</div>

Using the code you provided and using nth-child(n), you can do it like this.

.balance a:nth-child(2) {
    margin-left: 20px;
}
.fbalance a:nth-child(2) {
    margin-left: 20px;
}
#balances {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:28px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:100%;
    float:left;
}
#transact {
    font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:28px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
}
<div id="balances"> <u>Balances</u>
    <div class="total-balance">Total Balance</div>
    <div class="balance">Balance: 
        <a href="#" class="button">Deposit</a>
        <a href="#" class="button">Withdraw</a>
    </div>
    
    <div class="fbalance">
        <a href="#" class="button">Deposit</a>
        <a href="#" class="button">Withdraw</a>
    </div>
</div>

Upvotes: 4

Saiyam Gambhir
Saiyam Gambhir

Reputation: 536

Add margin to the divs in which you want space simple.

Upvotes: 0

Related Questions