By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,212 Members | 1,331 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,212 IT Pros & Developers. It's quick & easy.

How to have horizontal space between two boxes?

P: 1
I created a rectangle using this code:
<div style="width:500px;height:100px;border:1px solid #3D5B9B;">This is a rectangle!</div>

I want to have three such boxes horizontally with white space between them. From the past two hours I have tried every bit of code.

What should I use to have whitespace between the horizontal boxes.
Jun 28 '14 #1
Share this Question
Share on Google+
2 Replies


Exequiel
100+
P: 288
try to use css/css3 for neat coding. . you can use margin, margin-top, margin-bottom, margin-left, margin-right property,
example:

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. .horizontal_div
  3. {
  4.   width:500px;
  5.   height:100px;
  6.   border:1px solid #3D5B9B;
  7.   background: #ccc;
  8.   margin: 5px; /*margin-top:5px;*/
  9. }
  10. </style>
  11.  
  12. <div class="horizontal_div">div 1</div>
  13. <div class="horizontal_div">div 2</div>
  14. <div class="horizontal_div">div 3</div>
  15.  
I hope it helps you.
Jun 29 '14 #2

P: 33
Try This Code
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <title>Space between flexbox</title> 
  5.         <style> 
  6.             .flex2 { 
  7.                 display: flex; 
  8.                 justify-content: space-around; 
  9.                 background-color: green; 
  10.             } 
  11.             .flex3 { 
  12.                 display: flex; 
  13.                 justify-content: space-between; 
  14.                 background-color: green; 
  15.             } 
  16.             .flex-items { 
  17.                 background-color: #f4f4f4; 
  18.                 width: 100px; 
  19.                 height:50px; 
  20.                 margin: 10px; 
  21.                 text-align: center; 
  22.                 font-size: 40px; 
  23.             } 
  24.             h3 { 
  25.                 text-align:center; 
  26.             } 
  27.             .geeks { 
  28.                 font-size:40px; 
  29.                 text-align:center; 
  30.                 color:#009900; 
  31.                 font-weight:bold; 
  32.             }                     
  33.         </style> 
  34.     </head> 
  35.  
  36.     <body> 
  37.         <div class = "geeks">GeeksforGeeks</div> 
  38.         <h3>Space between flexbox</h3> 
  39.  
  40.         <br> 
  41.         <b>justify-content: space-around </b> 
  42.         <div class="flex2"> 
  43.             <div class="flex-items">1</div> 
  44.             <div class="flex-items">2</div> 
  45.             <div class="flex-items">3</div> 
  46.         </div> 
  47.         <br> 
  48.         <b>justify-content: space-between </b> 
  49.         <div class="flex3"> 
  50.             <div class="flex-items">1</div> 
  51.             <div class="flex-items">2</div> 
  52.             <div class="flex-items">3</div> 
  53.         </div> 
  54.         <br> 
  55.  
  56.     </body> 
  57. </html>                                 
  58.  
1 Week Ago #3

Post your reply

Sign in to post your reply or Sign up for a free account.