How to have horizontal space between two boxes?

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

Subscribe Post Reply

10584

Exequiel

288

256MB

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

 
<style>

.horizontal_div

{

  width:500px;

  height:100px;

  border:1px solid #3D5B9B;

  background: #ccc;

  margin: 5px; /*margin-top:5px;*/

}

</style>
 
<div class="horizontal_div">div 1</div>

<div class="horizontal_div">div 2</div>

<div class="horizontal_div">div 3</div>

I hope it helps you.

Jun 29 '14 #2

Sherin

64KB

Try This Code

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html> 

<html> 

    <head> 

        <title>Space between flexbox</title> 

        <style> 

            .flex2 { 

                display: flex; 

                justify-content: space-around; 

                background-color: green; 

            } 

            .flex3 { 

                display: flex; 

                justify-content: space-between; 

                background-color: green; 

            } 

            .flex-items { 

                background-color: #f4f4f4; 

                width: 100px; 

                height:50px; 

                margin: 10px; 

                text-align: center; 

                font-size: 40px; 

            } 

            h3 { 

                text-align:center; 

            } 

            .geeks { 

                font-size:40px; 

                text-align:center; 

                color:#009900; 

                font-weight:bold; 

            }                     

        </style> 

    </head> 
 
    <body> 

        <div class = "geeks">GeeksforGeeks</div> 

        <h3>Space between flexbox</h3> 
 
        <br> 

        <b>justify-content: space-around </b> 

        <div class="flex2"> 

            <div class="flex-items">1</div> 

            <div class="flex-items">2</div> 

            <div class="flex-items">3</div> 

        </div> 

        <br> 

        <b>justify-content: space-between </b> 

        <div class="flex3"> 

            <div class="flex-items">1</div> 

            <div class="flex-items">2</div> 

            <div class="flex-items">3</div> 

        </div> 

        <br> 
 
    </body> 

</html>

Jul 24 '20 #3

by: Ian McCall | last post by:

Hello. How can I make an absolutely-positions div element expand and fill the remaining horizontal space available on-screen? The background is that I've used CSS to create the normal 'three...

HTML / CSS

why paragraphs have a space on top in FireFox?

by: lkrubner | last post by:

Am I wrong, or do paragraphs have extra space on top in FireFox, when compared to Microsoft IE. The top of this page is an example: http://www.publicdomainsoftware.org/index.php?pageId=299 The...

HTML / CSS

Why doesn't IDLE editor windows have horizontal scrollbars?

by: chuck | last post by:

The browser windows do. Why not the editor windows? I hate to complain but is there any way to get IDLE to run in more of an MDI mode? Having the floating windows everywhere is rather...

Python

Not Enough Horizontal Space in Report

by: CSDunn | last post by:

Hello, I need to create an Access 2003 ADP report that will require more horizonal space on the report than can be accomodated by a legal paper size in landscape orientation. It would be okay...

Microsoft Access / VBA

Is it possible to have several list boxes control a data grid

by: Michael D. Reed | last post by:

I have 2 list boxes and a combo box that are bound to table adaptors. I have another table that has relations with the underlying tables to the adaptors above. I have set this up in a dataset. ...

C# / C Sharp

How to have more text boxes with a scroll bar

by: chandru8 | last post by:

hi guys iam using vb6.0 i need to arrange more than 50 text boxes with a scroll bar is it possible to arrange using vb6.0 or any other alternative please its urgent thanxs

Visual Basic 4 / 5 / 6

My string crashes when i have a space- NEED HELP!

by: Onlynewsopleasebenice | last post by:

Hi, I am trying to input a message into a string within my program.... however each time i input a space the program crashes. Here is the code, please help me. #include <iostream> #include...

C / C++

have 2 combo boxes - need one more

by: buddyr | last post by:

Hello, I was able to use the example on Cascading /List boxes on the site here for 2 combo boxes. http://bytes.com/topic/access/insights/605958-cascading-combo-list-boxes Is there a way to add...

Microsoft Access / VBA

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

How to have horizontal space between two boxes?

Similar topics