CODEWITHSUNDEEP
htmlcss
Dano007
Dano007

Reputation: 1932

How to create a margin between two seperate divs?

I have two divs at the moment containing different images and text. They use the same css style of .cheese_people I need to create a margin between the middle of the two boxes. How would I do this?

Also do I really need two divs to do this? The only reason I've done it like this is to get them on the same grid line.

            <div class=" grid 6 cheese_people">
        <img class="people_photo" src="img/cheese_expert.jpg">
        <h4>Chief Cheese Taster <br> Dave Le Conk</h4>
        <p class="chesse_people">I've always had a passion for cheese - Now I get to taste it everyday!</p>
    </div>

    <div class=" grid 6 cheese_people">
        <img class="people_photo" src="img/cheese_owner.jpg">
        <h4>The Big Cheese Owner <br> Sally De Cheese</h4>
        <p class="chesse_people">I wanted to create an online store that I'd would trust</p>
    </div>

        .cheese_people {
        font-family: sans-serif;
        background-color: #dec38c;
        border:solid 3px #6b5221;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
        float:left;
        width:45%;
        }

Upvotes: 0

Views: 159

Answers (5)

Brewal
Brewal

Reputation: 8189

I'm not sure you want margin between both divs. You might want one sticked to the left, and the other sticked to the right (I say that because of the 45%). Then, use this : 

.cheese_people:last-child {float: right}

Upvotes: 0

Steam Engine
Steam Engine

Reputation: 60

Use 

float:left
float:right

For Both Image and Text

In the CSS Class

Use Accordingly

Upvotes: 0

Carlos Calla
Carlos Calla

Reputation: 6706

Maybe you can add a class to the first div so you give it the margin

    <div class=" grid 6 cheese_people margin-container">
        <img class="people_photo" src="img/cheese_expert.jpg">
        <h4>Chief Cheese Taster <br> Dave Le Conk</h4>
        <p class="chesse_people">I've always had a passion for cheese - Now I get to taste it everyday!</p>
    </div>

    <div class=" grid 6 cheese_people">
        <img class="people_photo" src="img/cheese_owner.jpg">
        <h4>The Big Cheese Owner <br> Sally De Cheese</h4>
        <p class="chesse_people">I wanted to create an online store that I'd would trust</p>
    </div>

        .cheese_people {
        font-family: sans-serif;
        background-color: #dec38c;
        border:solid 3px #6b5221;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
        float:left;
        width:45%;
        }

       .margin-container {
            margin-right: 2px solid black;
       }

This way if you need to add this margin to other div you just give it the class

Upvotes: 0

user216485
user216485

Reputation: 789

If you want there to be a space between the two div's, What you can try is giving one an id and then adding CSS to the ID (adding just margin-right: 10px; to the class would add a right margin to both images, if you want space in between the images and no where else, then I would use the ID technique), like so

    <div class=" grid 6 cheese_people" id="leftpic">
    <img class="people_photo" src="img/cheese_expert.jpg">
    <h4>Chief Cheese Taster <br> Dave Le Conk</h4>
    <p class="chesse_people">I've always had a passion for cheese - Now I get to taste it everyday!</p>
</div>

<div class=" grid 6 cheese_people">
    <img class="people_photo" src="img/cheese_owner.jpg">
    <h4>The Big Cheese Owner <br> Sally De Cheese</h4>
    <p class="chesse_people">I wanted to create an online store that I'd would trust</p>
</div>

    .cheese_people {
    font-family: sans-serif;
    background-color: #dec38c;
    border:solid 3px #6b5221;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
    float:left;
    width:45%;
    }

    #leftpic {
        margin-right: 10px;
    }

Upvotes: 0

Romain Paulus
Romain Paulus

Reputation: 2368

This will only affect the second div:

div.cheese_people + div.cheese_people{
    margin-left: 10px;
}

Upvotes: 1

Related Questions