What is the best way to use CSS to center two blocks with space in between them?

Question

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design:

I want two text blocks with some space in between them aligned around the midline of the page (refer to the image).

I have experimented with the float property, as well as used margin and padding to create the gap, but I am struggling to center them.

UPDATE: I should mention that the arrows indicate the resizable parts: therefore, the width of the page can be adjusted while the text remains static. However, the text itself is dynamic and subject to change on different pages, so setting a fixed width in pixels is not feasible.

html css alignment

Answer 1

Answer №1

One way to accomplish this is:

<div id="wrap_container">       <!-- wrapping container for center alignment -->
   <div id="content_box1"></div> <!-- First Content Box -->
   <div id="content_box2"></div> <!-- Second Content Box -->
</div>

#wrap_container { width: 1000px; margin: 0 auto }
#content_box1 { width: 400px; float: left; }
#content_box2 { width: 400px; float: right; }
/* Maintain a gap of 200px between the two boxes */

Answer 2

One way to accomplish this is:

<div id="wrap_container">       <!-- wrapping container for center alignment -->
   <div id="content_box1"></div> <!-- First Content Box -->
   <div id="content_box2"></div> <!-- Second Content Box -->
</div>

#wrap_container { width: 1000px; margin: 0 auto }
#content_box1 { width: 400px; float: left; }
#content_box2 { width: 400px; float: right; }
/* Maintain a gap of 200px between the two boxes */

Answer 3

Answer №2

To center a block, apply the style display: table along with margin: 0 auto. For its child elements, use display: table-cell with percentage-based padding. Adjust the percentage-based width for the centered block as required.

Answer 4

To center a block, apply the style display: table along with margin: 0 auto. For its child elements, use display: table-cell with percentage-based padding. Adjust the percentage-based width for the centered block as required.

Answer 5

Answer №3

What about this example?

Here is the HTML structure:

<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien...
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas...
</div>
</div>
</div>
</body>
</html>

And here is the CSS styling:

body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}

Answer 6

What about this example?

Here is the HTML structure:

<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien...
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas...
</div>
</div>
</div>
</body>
</html>

And here is the CSS styling:

body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}

Answer 7

Answer №4

To create a centered layout with two blocks, adjust the margins accordingly. Here's how:

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

By setting the left block's margin to "auto", and the right block's margin as well, you align them together in the center of the page. If you want to add space between the blocks, specify a specific margin value:

#leftBlock {
    margin-left: auto;
    margin-right: 5%;
}

#rightBlock {
    margin-right: auto;
    margin-left: 5%;
}

Answer 8

To create a centered layout with two blocks, adjust the margins accordingly. Here's how:

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

By setting the left block's margin to "auto", and the right block's margin as well, you align them together in the center of the page. If you want to add space between the blocks, specify a specific margin value:

#leftBlock {
    margin-left: auto;
    margin-right: 5%;
}

#rightBlock {
    margin-right: auto;
    margin-left: 5%;
}

What is the best way to use CSS to center two blocks with space in between them?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Where could I be missing the mark with AngularJS?

Adaptable Bootstrap navigation bar

Guide to modifying the background image color using CSS

Developing a customizable datepicker with the ability to select specific months or date ranges

How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

The sidebar.querySelector method is not working as expected

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

What is the best way to ensure that a header with SVG graphics is SEO-friendly and accessible to screen readers?

PHP code to insert a advertisement div after every 5 rows of results

Managing the AJAX response from a remote CGI script

What is the best way to make just the background image transparent using HTML and CSS?

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

Copy the style of a chosen element and apply it to another element

Enhancing Google Custom Search Engine with Bootstrap3 and CSS3 styling

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

The paragraph tag remains unchanged

Place a Button or Link Right Below the Title on the Custom Post Type Editing Page

Is there a tool available for monitoring server status with HTML/CSS

The phrase 'nodemon' is not identified as a valid cmdlet, function, script file, or executable program

What is the best way to customize column width in AG-Grid?