2 Columns with background colour/image that is 100% with inner columns that are fixed width

HTML & CSS
1

Hi,

I am struggling to work out how to create the following layout:

I’m trying to have two columns that are 50% of the full width of the screen with an inner column in each that is a fixed width inside each column so the text is centred.

This is what I have so far:

HTML:

<section class="publishers-advertisers">
		
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-6 col-xs-12 pad-x-0 publishers">
					<div class="overlay"></div>
				
					
					<div class="container">
								<div class="row">
												
									<div class="col-md-10 ml-auto text-center pad-x-0">
										<h2>text</h2>
										<p>text</p>
</div>
									
								</div>
												
												
												
					</div>
				</div>
				
				
				<div class="col-md-6 col-xs-12 pad-x-0 advertisers">
					<div class="overlay"></div>
				<div class="container">
								<div class="row">
												
									<div class="col-md-10 ml-auto text-center pad-x-0">
							<h2>text</h2>
										<p>text</p>
</div>
									
								</div>
												
												
												
					</div>
				</div>
				
			</div>
			
		</div>
		
		
		
	</section>

CSS:



.publishers-advertisers{
	padding-top: 0px
}

.publishers-advertisers h2{
	font-size: 36px;
	color: #fff;
	text-transform: uppercase
}


.publishers{
	background: #131313;
	height: 500px;
	background-size:cover;
	position: relative;
	color: #fff;
	z-index: 1}

.publishers .container{
	position: relative;
	z-index: 3;
	padding: 60px 0 ;
}


.advertisers{
		background: #2f2f2f;s
	height: 500px;
	background-size:cover;
	position: relative;
	color: #fff;
	z-index: 1
}

.advertisers .container{
	padding: 60px 0 ;
	position: relative;
	z-index: 3
}

The text is not centred in each of the left and right panels.

Any help would be appriciated

2

Get out of the bootstrap grid as floats won’t cut it and do something as simple as this:

If you are happy with modern support then use flexbox instead but html is much the same.

3

Thank you, that worked great :slight_smile:

1 Like
4

Hi again,

Thanks for the code. It works great, but I’m trying to make the two columns break into single columns when viewing on tablet/mobile. I tried setting each column to 50% and then 100% on a breakpoint, but the columns still remain 50%/half of the current width of each column :confused:

5

Set .column to display:block and width:100% :slight_smile:

6

Thank you, it worked :slight_smile:

7

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