Unstick Table Cells

HTML & CSS
1

Hello I am using the table cell method and once my two divs
are next to each other they stick together. I went them to have
space between each other. It currently looks like this:

what can I do to unstick them? I tried to use margin but it does not move

HTML:

  <div class="inner-page-content about-wrap">
                <div id="about-intro">
                    <p>In today’s sophisticated world of search engines, social media, discount websites and apps, Preferred Dentist is dedicated to making sure that we help you find the best dentist in the most simple way. We personally walk you through the process by identifying your needs and matching you with the right dentist. We also ensure that you are satisfied with the dentist and the service that was provided. </p>
                    <p>Preferred Dentist is committed to both our dentists and patients.</p>
                    <p>Our mission is to help you. In other words, you are our top priority.</p>
                    <p><span id="about-quote">“We make finding you a Dentist a PERSONAL matter.”</span></p>
                    <p><span id="about-representative">Talk to a Preferred Dentist <br> representative today at (818) 245-6959</span></p>
                </div>
                <div id="statements-icons">
                    <div class="missions">
                        <h3>Our Mission</h3>
                        <p>To provide you with the best possible Dentist for yur needs</p>
                    </div>
                    <div class="missions">
                        <h3>Our Dedication</h3>
                        <p>To endure both you and the Dentist are a good match</p>
                    </div>
                    <div class="missions">
                        <h3>Our Dentists</h3>
                        <p>Dedicated Friendly Professionals that want to help you.</p>
                    </div>
                </div>
            </div>

CSS:

#about-wrap{
    display: table;
    table-layout: auto;
}

#about-intro, #statements-icons {
    display: table-cell;
    
}
2

Hi there csosa,

have you considered padding rather than margin as a possible solution?

#about-intro, #statements-icons { display: table-cell; padding: 2%; }

coothead

1 Like
3

You can use border spacing on the display:table element to space cells out if padding is not what you are looking for.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.table {
	display:table;
	width:80%;
	margin:auto;
	border-spacing:20px;
}
.cell {
	background:#f9f9f9;
	padding:10px;
	display:table-cell;
	vertical-align:top;
}
</style>
</head>

<body>
<div class="table">
		<div class="cell">1</div>
		<div class="cell">2</div>
		<div class="cell">3</div>
		<div class="cell">4</div>
</div>
</body>
</html>
1 Like
4

I see. Thank you both.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.