Centering two sections of dynamic width on the same line and

Question

Well, I apologize if this is a repetition - but I have not found any working answers anywhere.

I want to have two divs (50% wide each) side by side ... so that left and right are inside the contents of the div (see photo below) .

I want them to have a minimum width of 300 pixels, and when the page gets smaller than 600 pixels (this is when both divs reach their minutes), I want the divs to wrap .. so that one on top of the other.

I tried to do it here: fiddle , but I have problems.

Here is EXACTLY what I want:

Answer 1

You do everything for yourself! This can be done quickly and easily with inline-block s. Have a nice JSfiddle .

Let's explain the code:

 .wrapper { text-align: center; /* specifies that the inline-blocks (which are treated like text here) will be centered. */ font-size: 0; /* Explained later */ max-width: 1000px; /* Your desired max-width */ position: relative; /* These two lines center your wrapper in the page. */ margin: 0 auto; } 

Now for the internal 50% of the elements:

 .left, .right{ display: inline-block; /* This will treat these divs like a text element. This will work with the parent "text-align: center" to center the element. */ min-width: 300px; width: 50%; font-size: 16px; /* Explained below */ vertical-align: text-top; /* Explained below */ } 

You might be wondering why font-size enabled. This is due to the fact that there is a slight quirk with this method - if the font size is kept by default, the div will have an annoying gap between them, which cannot be eliminated using the field.

However, adding font-size: 0; to the parent element eliminates this gap. This is strange, and then you need to specify the font size for your children, but it is worth the ease of use.

But still a problem - the blue element is shifted down and will not be photographed from above. This can be fixed with vertical-align: text-top; This will make sure that all Div elements are aligned to the tops, so they lie in a more pleasant pattern. This is another small quirk to keep in mind when using inline blocks. I know that it seems that many things can only be fixed for something so simple, but compared to your other options, using inline-block is the cleanest and easiest way to get around this. (Although, if you prefer, jshanley offers a very good alternative using float elements)

Also, since these children are now treated as text, they are automatically reordered when the window gets too small! No media queries are required. Yay

Good luck.

Answer 2

Instead of using an inline block that calls up some size-dependent expressions, you can use block elements and float both .left and .right left, giving each 50% width.

Then, to make them stack, you need to calculate a bit. Since you indicated that the wrapper is 80% width of the page, and the breakpoint for the content is at 600px (each element is 300px), the breakpoint of the page will be at 750px since 80% 750 is 600.

You can create a media query that will only apply styles when the page width is less than 750px and set .left and .right to 100% width to make them stack.

 @media only screen and (max-width: 750px) { .left, .right { width: 100%; } } 

It is very simple to implement and gives a good result, here is a fiddle .

Answer 3

I think both @jshanley and @ emn178 answers do the trick, but I want to point out something:

Display property : inline-block; css does not work with float: right or float: left , because when you use the float property, it ALWAYS automatically sets the display property to block.

Since you are doing this:

 .right{ min-width:100px; background-color:purple; height:100%; margin-left:50%; display:inline-block; } 

Display property : inline-block; doing nothing.

Answer 4

left and right can have the same layout, so I add the block class.
To use float:left and width:50% , it should work.

http://jsfiddle.net/emn178/mzbku/7/

I am adding a media query, this should be what you want.
But you need to figure out how to set the size.