1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to create a quadrant layout in html/css

Discussion in 'CSS' started by WebDev Solutions, Mar 4, 2016.

0
  1. #1
    Hi All,

    http://territoryinteriordesign.co.uk/
    Code (markup):
    In the website above, there is a nice quadrant section for the 'About Us' section which makes 4 areas of content appear in a quadrant layout. I would like to achieve the same layout for the following website..

    http://www.curtainandblindnewark.co.uk/
    Code (markup):
    Can somebody please advise?
     
    WebDev Solutions, Mar 4, 2016 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Here's one way to do it: 
    <!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width; height=device-height; initial-scale=1"
            name="viewport">
    <title>
      Test document
    </title>
    <style type="text/css">
    /*<![CDATA[*/

    html, body {
	background-color: white;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0  1.5em;
	padding: 0;}

    p {
	font-size: 1em;}

    hr {
	display: none;}

    .row {
	overflow: hidden;}

    .row div:nth-child(odd) {
	float: left;
	width: 47.5%;}

    .row div:nth-child(even) {
	float: right;
	width: 47.5%}

    /*]]>*/ 
    </style>
  </head>
  <body>
    <h1>
      Quad view
    </h1>
    
    <div class="row">
      <div>
	<h2>
	  WHO WE ARE
	</h2>

	<p>
	  We are a family run business, professional and aspire to offer
	  the best customer service and value within the market. We are a
	  very light hearted company, passionate and care about the end
	  result, not for ourselves but for what our clients are aiming to
	  achieve.
	</p>
      </div>

      <div>
	<h2>
	  WHAT WE OFFER
	</h2>

	<p>
	  We aim to collate the newest trends and quirkiest fabrics,
	  something that complements all people, and all different types
	  of rooms. We stock a huge amount of materials, one of very few
	  in the local area.
	</p>
      </div>
    </div> <!-- end row -->
    
    <div class="row">
      <div>
        <h2>
          WHAT WE'RE ABOUT
        </h2>

        <p>
          The words bespoke is literal, we are more than willing to tackle
          all projects to the highest standard. From curved vertical
          blinds following delicate arched windows to pelmets shaped to
          fit perfectly between old exposed beams, you name it, we will
          think of a solution. We fit and install, design if necessary and
          ensure you are left ecstatic with the products purchased.
        </p>
      </div>

      <div>
        <h2>
          HOW WE WORK
        </h2>

        <p>
          We are a shop based company with over 20 years’ experience
          behind us. Our passion and our services is our strong selling
          point. All our projects are managed in house; blinds and
          curtains are made in our workrooms by people who care.
        </p>
      </div>
    </div> <!--  end row -->
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Mar 4, 2016 IP
    WebDev Solutions likes this.
  3. Leo-WS

    Leo-WS Greenhorn

    Messages:
    8
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    Digital Goods:
    1
    #3
    Using CSS display:table is another way to do it.

    <!DOCTYPE html>
<html>
<head>
    <title>Test document</title>
    <style type="text/css">
    html,body{ padding:0; margin:0; border:0; }
    #page{ max-width:1200px; margin:0 auto; }
    .table{ display:table; border-collapse:separate; border-spacing:10px; }
    .row{ display:table-row; }
    .cell{ display:table-cell; background-color:#000; color:#fff; padding:20px; }
    @media (max-width:800px) {
        .table, .row, .cell{ display:block; }
        .cell{ margin:10px; }
    }
    </style>
</head>
<body><div id="page">
    <div class="table"><div class="row">
        <div class="cell">
            <h2>WHO WE ARE</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas felis sit amet eros interdum, ut venenatis dui mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id venenatis turpis. Mauris non leo molestie, dapibus risus at, auctor quam. Nunc lobortis vel urna eu ornare. Vivamus interdum rhoncus leo, a fringilla erat suscipit ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vulputate ligula dui, vel pretium nulla imperdiet sit amet. Vestibulum lorem ligula, tempus vitae elementum a, semper vel augue.
            </p>
        </div>
        <div class="cell">
            <h2>WHAT WE OFFER</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas felis sit amet eros interdum, ut venenatis dui mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id venenatis turpis. Mauris non leo molestie, dapibus risus at, auctor quam. Nunc lobortis vel urna eu ornare. Vivamus interdum rhoncus leo, a fringilla erat suscipit ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vulputate ligula dui, vel pretium nulla imperdiet sit amet. Vestibulum lorem ligula, tempus vitae elementum a, semper vel augue.
            </p>
        </div>
    </div></div>

    <div class="table"><div class="row">
        <div class="cell">
            <h2>WHAT WE’RE ABOUT</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas felis sit amet eros interdum, ut venenatis dui mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id venenatis turpis. Mauris non leo molestie, dapibus risus at, auctor quam. Nunc lobortis vel urna eu ornare. Vivamus interdum rhoncus leo, a fringilla erat suscipit ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vulputate ligula dui, vel pretium nulla imperdiet sit amet. Vestibulum lorem ligula, tempus vitae elementum a, semper vel augue.
            </p>
        </div>
        <div class="cell">
            <h2>HOW WE WORK</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas felis sit amet eros interdum, ut venenatis dui mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id venenatis turpis. Mauris non leo molestie, dapibus risus at, auctor quam. Nunc lobortis vel urna eu ornare. Vivamus interdum rhoncus leo, a fringilla erat suscipit ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vulputate ligula dui, vel pretium nulla imperdiet sit amet. Vestibulum lorem ligula, tempus vitae elementum a, semper vel augue.
            </p>
        </div>
    </div></div>
</div></body>
</html>
    HTML:
     
    Leo-WS, Mar 5, 2016 IP
    WebDev Solutions likes this.
  4. WebDev Solutions

    WebDev Solutions Well-Known Member

    Messages:
    1,644
    Likes Received:
    80
    Best Answers:
    2
    Trophy Points:
    170
    #4
    Thank you very much for both of your replies, I have not had time to read just yet but I will revisit this thread tomorrow without the kids around. :)
     
    WebDev Solutions, Mar 5, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    You can do it with less elements too this way:

    
<div class="barbarino">
	<div>
		<h2>WHO WE ARE</h2>
		<p>
			We are a family run business, professional and aspire to offer the best customer service and value within the market. We are a very light hearted company, passionate and care about the end result, not for ourselves but for what our clients are aiming to achieve.
		</p>
	</div><div>
		<h2>WHAT WE OFFER</h2>
		<p>
			We aim to collate the newest trends and quirkiest fabrics, something that complements all people, and all different types of rooms. We stock a huge amount of materials, one of very few in the local area.
		</p>
	</div><div>
		<h2>WHAT WE'RE ABOUT</h2>
		<p>
			The words bespoke is literal, we are more than willing to tackle all projects to the highest standard. From curved vertical blinds following delicate arched windows to pelmets shaped to fit perfectly between old exposed beams, you name it, we will think of a solution. We fit and install, design if necessary and ensure you are left ecstatic with the products purchased.
		</p>
	</div><div>
		<h2>HOW WE WORK</h2>
		<p>
			We are a shop based company with over 20 years’ experience behind us. Our passion and our services is our strong selling point. All our projects are managed in house; blinds and curtains are made in our workrooms by people who care.
		</p>
	</div>
<!-- .barbarino --></div>
    Code (markup):
    .barbarino {
	max-width:58em;
	margin:0 auto;
}
.barbarino div {
	display:inline-block;
	vertical-align:top;
	width:50%;
}
.barbarino h2 {
	margin:0.66em 0.66em 0.33em;
	font:bold 150%/120% arial,helvetica,sans-serif;
}
.barbarino p {
	margin:0 1em 1em;
}

@media (max-width:40em) {
	.barbarino div {
		display:block;
		width:auto;
	}
}
    Code (markup):
    Mind you this will break if you add whitespace between those inner DIV, but is nice for needing less extra div than the display:table approach, not relying on nth-child, and being less prone to clearing alignment issues than the floated approach.

    Pretty much depending on the data and how you want to style it, you have to weigh all the advantages and disadvantages of all the approaches.

    Oh, and I tossed a media query in there so when the display is too narrow to have them "useful" as columns you strip the column behavior off them.
     
    deathshadow, Mar 9, 2016 IP