WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts

WeLoveCSS > WEB DESIGN > HTML & XHTML > Help building 4 columns according to the picture

  Thread Tools Display Modes
Old 17th January 14, 01:19 AM   #1
WLC Member
Join Date: Jan 2014
Posts: 1
Default Help building 4 columns according to the picture

Can someone please help me to build this type of 4 columns adding images on each corner of the column to form a mirror shape.
I tried so many times but nothing only more mistakes and stress, it has been a week now I've been trying and looking through
google there is not even one layout like this. Please Help me I would appreciate it a lot!
The overall width of the content of the page is about 940px the idea is to center this four columns and leave a bit of space around the corners.

I'm quite new to this.

this is the html code I did but it's wrong.

HTML Code:
<div id="column1" style="float:left; margin:0px;margin-left: 20px; width:425px;"><img src="images/M.png" width="105" height="130"  style="float:right; margin:-80px;margin-right: -25px;">
      <div style="background-color: #181818; height: 50px;"><p> </p><h1 align="left"> ART</h1> <p> </p></div></div>

<div id="column2" style="float:right; margin-top:50px;margin-right:15px;  width:425px;"><img src="images/MN.png" width="105" height="130"  style="float:left; margin-top:-129px;margin-left:-15px;">
      <div style="background-color: #181818; height: 50px;"><h1 align="right">SCULPTURE  </h1> <p> </p></div></div>

<div id="column1" style="float:right; margin:0px;margin-right:0px; width:403px;border:thin solid #D8D8D8; padding:10px;">
      <div style="background-color: #F8F8F8; height: 800px;"></div></div>
and the CSS:
HTML Code:
<style type="text/css">

    #left {border: 1px solid lightgray;}
      width: 350px;
      float: left;

      width: 350px;
      margin-left: 0px; /* Change this to whatever the width of your left column is*/

      clear: both;
Angie33 is offline   Reply With Quote
Old 18th January 14, 01:05 AM   #2
meesa's Avatar
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Help building 4 columns according to the picture

Can you provide a live link please?
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 21st January 14, 02:00 AM   #3
WLC Member
Join Date: Dec 2011
Posts: 2
Default Re: Help building 4 columns according to the picture

Here's a way in doing what you want in using flexbox, it's a little advance though:

HTML Code:
<!doctype html>
<html lang="en">
	<meta charset="UTF-8">
	<title>4 Columns</title>
		* {	box-sizing: border-box;	}
		body {
			margin: 40px 0;
			background: #203542;
			color: #222;
			font-size: 1.1em;
			font-family: sans-serif;
			line-height: 1.5;
		.container {
			width: 1000px;
			margin: 0 auto;
		.main {
			display: -webkit-flex;
			display: flex;

		.col {
			width: 300px;
			height: 300px;
			margin: 0;
			padding: 25px;
			border-radius: inherit;
			background: rgba(255,255,255,.8);
		.col {
			-webkit-flex: 1;
			flex: 2;			
		.col-a {
			background-image: url(http://www.jrpepp.com/lib/images/img-top-left.png);
			background-repeat: no-repeat;
			background-position: bottom right;
			background-color: lightblue;

		.col-b {
			background-image: url(http://www.jrpepp.com/lib/images/img-top-right.png);
			background-repeat: no-repeat;
			background-position: bottom left;
			background-color: orange;

		.col-c {
			background-image: url(http://www.jrpepp.com/lib/images/img-bottom-left.png);
			background-repeat: no-repeat;
			background-position: top right;			 
			background-color: magenta; 
			clear: left;
		.col-d { 
			background-image: url(http://www.jrpepp.com/lib/images/img-bottom-right.png);
			background-repeat: no-repeat;
			background-position: top left;			
			background-color: lightgreen; 
<div class="container">
	<div class="main">
		<div class="col-a col"></div>
		<div class="col-b col"></div>		
	<div class="main">
		<div class="col-c col"></div>
		<div class="col-d col"></div>
I just use one image and split it four, but it serves its purpose.

Last edited by Strider64; 21st January 14 at 04:41 AM.
Strider64 is offline   Reply With Quote

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 01:58 AM.

Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.