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?
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
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:
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.
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.