Two column responsive layout with center px margin

HTML & CSS
1

HI all

I have a jsfiddle here - https://jsfiddle.net/6zcdovb7/

Ive been using bootstrap for too long and I cant work out this simple layout.

I have 2 50% columns but I need a center margin between them either px or %

2

Make them 45% width and float one left and one right and then there will be a 10% gap in the middle.

Or float both left at 45% width and put a margin-right of 10% on the first one only.

If you want px values for the margin then use calc() for the width to make the width less the px margin you want.
e.g. width:calc(50% - 10px)
Apply the 20px margin-right to the first one only.

Or use flexbox or … :slight_smile:

1 Like
3

I guess that could do this to someone. :grimacing:
Also affecting how you apply classes.

Easily done with display table/cell with some border-spacing.

Flex would do a nice job too.

2 Likes
4

With flex you don’t need any queries.

class="block fl width-50 mr-5 left"

^ This just seems like…

style="height: 60px;float:left;width:50%;margin-right:10%;"

…in disguise.
There is a reason we don’t do that anymore.
Step away from the Bloatstap! :grimacing:

3 Likes
5

clac() is awesome, isn’t it?

anyway, if you wanted to do it the old fashioned way here is how:

<html>
	<head>
		<title>fixed gutter width</title>
		<style type="text/css" media="screen">
			.col{
				
				float: left;
				width: 50%;
				background: pink;
				min-height: 15em; /* just for demo*/
                /* the following ensures that the calculated width includes any padding and borders */
                -webkit-box-sizing: border-box; 
				-moz-box-sizing: border-box;
				 box-sizing: border-box;
				 margin-left: -20px; /* sum of all gutters */
			}
			.conatiner{
				overflow: hidden;
				padding-left: 20px; /* sum of all gutters */

			}
			.col + .col{ margin-left:20px;} /* this is you gutter width */
		</style>
	</head>
	<body>
<div class="conatiner">
	<div class="col">column1</div>
	<div class="col">column2</div>
</div> 
		
	</body>
</html>

hope that helps

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.