How to create a margin between two seperate divs?


Tags: html,css,html5,css3

Problem :

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%;
        }


Solution :

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}

    CSS Howto..

    How to add an informative popup over a given text

    how to style every html posts differently in css

    How can i edit font-size and font-family option in css file using sed?

    How to create an absolutely positioned submenu which appears on css hover

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    Primefaces p:growl css. How to extend div message background color width

    CSS, how to size an img back to its width attribute

    How to keep the aspect ratio of the image in css?

    Horizontal scrolling doesn't show up when I resize browser

    How to align 2 divs inside one div container with CSS (see image)

    How do I span columns with a div based table?

    How to trigger one element inside a div on mouse hover in CSS

    How to place an image and text under it, side by side using HTML and css?

    How to style the values in a textfield using CSS?

    How do I apply a CSS to a clutter stage?

    How to show a default SVG Fill Color on jQuery mouseout / mouseleave?

    How to appear two HTML input elements in single line (row)

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?

    How to make rotate photos when you change position iPhones in ios app [closed]

    how to set css for Zend form?

    How to test a CSS parser?

    Slideshow flickering image on :hover

    How to get less to output a css variable with quotes

    CSS sliding-window rounded-corner buttons: how to avoid the “dead” area on right side of “window”?

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    How to force a responsive element to retain its aspect ratio [duplicate]

    How do I remove white space due to position relative of CSS?

    How to make a box expand a distance from the sides

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How to expand input field to 100% of the parent