CODEWITHSUNDEEP
htmlcssalignment
Alexander Galkin
Alexander Galkin

Reputation: 12524

How to center two blocks with some gap inbetween using CSS?

What I would like to reach is the following design:

enter image description here

Two text blocks with some gaps inbetween aligned around the page midline (see the picture).

I tried to play around with float property, using margin and padding to get the gap, but I can't get them centered.

EDIT: I forgot to indicate that the arrows show the resizable parts: so, the page width must be resizeable whereas the text itself isn't, but the text is dynamic content and can change from page to page, so there is no way to just define constant width for it in pixels.

Upvotes: 2

Views: 1209

Answers (4)

corpico
corpico

Reputation: 637

For the left block, set the left margin to auto. For the right block, set the right. Like this:

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

This puts them back to back in the center of the screen. To add space in between the blocks, set the other margin to some defined amount:

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

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

Upvotes: 0

Nikita Shekhov
Nikita Shekhov

Reputation: 503

Something like this?

HTML:

<!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. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</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. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>

CSS:

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

Upvotes: 0

Marat Tanalin
Marat Tanalin

Reputation: 14123

Use display: table with margin: 0 auto for centered block and display: table-cell with percentage padding for its children. Set percentage width for centered block if needed.

Upvotes: 1

Ilja
Ilja

Reputation: 46479

You could do it like this

<div id="wrapper">       <!-- wrapper will be in the middle of the page -->
   <div id="box1"></div> <!-- Your First Box -->
   <div id="box2"></div> <!-- Second Box -->
</div>

#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */

Upvotes: 5

Related Questions