CODEWITHSUNDEEP
css
Trido
Trido

Reputation: 545

Adding margins between divs

I want to create large button style divs in the centre of the page and for the most part, it is working. The only thing is that I want some space between them and I just can't seem to get it to work. Below is my CSS. What I have done is create 1 div called Wrapper and then created 2 more divs inside, one called topleft, the other is topright. At this stage, there are just those 2 divs, but (And the reason why the inner divs are called top) I might want to add additional divs on either the same line or perhaps the next line at a later time.

I kept reading that margin is the way to do it, but it won't work with my existing code. Is it because I am already using it in WRAPPER in order to get them centred? I had some trouble getting it to align the way I wanted and it does look the way I wanted, but I suspect my issue is because maybe I centred and aligned them incorrectly if that makes sense?

Basically, my question is how can I get some space between topleft and topright?

.wrapper {
    margin: 0 auto;
    width:600px;
}
.topleft {
    height: 200px;
    width: 300px;
    vertical-align: middle;
    display: table-cell;
    border-radius: 15px;
    background-color: rgb(0,178,219);
}
.topright {
    height: 200px;
    width: 300px;
    vertical-align: middle;
    display: table-cell;
    border-radius: 15px;
    background-color: rgb(134,197,73);
}

My HTML is simple:

<div class="wrapper">
  <div class="topleft"> <a href="energy.html">ENERGY</a> </div>
  <div class="topright"> <a href="minerals.html">MINERALS</a> </div>
</div>

Upvotes: 1

Views: 88

Answers (2)

Anagio
Anagio

Reputation: 3075

Check out this jsfiddle

http://jsfiddle.net/peter/YmKc4/

Updated CSS

.wrapper {
    margin: 0 auto;
    width:600px;
}
.topleft {
    height: 200px;
    width: 280px;
    border-radius: 15px;
    background-color: rgb(0,178,219);
    float:left;
    line-height:200px;
    margin:0 5px 0;
}
.topright {
    height: 200px;
    width: 280px;
    border-radius: 15px;
    background-color: rgb(134,197,73);
    float:left;
    line-height:200px;
    margin:0 5px 0;
}​

When you set a line-height to the same height as your div it'll center the content vertically. And floating the divs left I think is a little better than setting their display to table-cell. You also need to reduce the width when setting a margin to account for the margins pixels on either side

Upvotes: 2

Xhynk
Xhynk

Reputation: 13840

your "wrapper" div is 600px, and each internal div is 300px. That leaves no room for any space?

Upvotes: 1

Related Questions