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


Tags: html,css,alignment

Problem :

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.



Solution :

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 */

    CSS Howto..

    How to refer to third level lists in css?

    Show or hide div based on selected value

    How to access parent element in CSS? [duplicate]

    How to magnify a pure CSS menu item when hovering using JS?

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How can I create a fluid and responsive horizontal toolbar with affix in Bootstrap 3?

    How to attach CSS to my template?

    How can I line up the two containers in view?

    How to display items side by side until window width then in next row

    How to scroll horizontally when there are many columns (or a very long row)?

    How to have two elements with scrollbars next to each other?

    How to make image fit in div using Jquery

    How to add a background to text only?

    How can I use dropdowns in a masonry layout?

    How refresh the style of an HTML element after changing it using Javascript?

    How to set font family and size in html/css

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to create this type of element using XHTML & CSS?

    How can I change the font (family) for the labels in Chart.JS?

    How can you hide CSS from the iPhone, but not other browsers?

    How To Make This Form Work

    How to solve this (seemingly simple) formatting problem in CSS?

    How can I get horizontal overflows to work in CSS?

    How to eliminate scroll text jumps

    How to notify view from model to change a value in backbone

    How can I edit CSS on an HTML tab?

    How to stop word-wrapping in a CSS Dropdown menu.

    How to remove space above and below the in-line block elements?

    how to move image vertically with css [closed]

    how to add background image to css3 arrow