Responsive 4 x 4 Grid with centered images. This is a square grid made up of 4 segments. Each has an image and a block of text.
Float Method (Fully Working)
This only works properly if bootstrap is present. Bootstrap allows the images to resize dynamically and the square block collapses into a single column.
We provide Chauffeurs
- For Individual Journeys
- On Contract for Corporate Clients
- On Relief - Cover for when your Chauffeur is unavailable
- Please enquire about our Corporate Rates and Chauffeur Placement service.
- Please enquire about our Chauffeur and Executive Car service.
- Please see HERE for the benefits of using Car Company for your business needs
The Method is Simple
We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.
The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.
We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.
There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.
Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles.
HTML
<h2 style="text-align: center;">We provide Chauffeurs</h2>
<div class="float-parent" style="display: table; margin: auto;">
<div style="float: left; margin: 5px; max-width: 400px;">
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE for the benefits of using Car Company for your business needs</li>
</ul>
</div>
<div style="float: left; margin: 5px;">
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="min-width: 200px; padding: 10px;" />
</div>
</div>
<h2 style="text-align: center;">The Method is Simple</h2>
<div class="float-parent" style="display: table; margin: auto;">
<div style="float: left; margin: 5px;">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="padding: 10px;" />
</div>
<div style="float: left; margin: 5px; max-width: 400px;">
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles.</p>
</div>
</div>
All the following code is for reference only but might be useful for fault finding
Float method with borders (same as above but with visual aids)
This is exactly the same as above but demostrates how the floating works.
We provide Chauffeurs:
- For Individual Journeys
- On Contract for Corporate Clients
- On Relief - Cover for when your Chauffeur is unavailable
- Please enquire about our Corporate Rates and Chauffeur Placement service.
- Please enquire about our Chauffeur and Executive Car service.
- Please see HERE for the benefits of using Car Company for your business needs
The Method is Simple
We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.
The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.
We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.
There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.
Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.
Thank you for your interest. The Car Company Team.
HTML
<h2>We provide Chauffeurs:</h2>
<div class="float-parent" style="display: table; margin: auto; border: green 3px solid;">
<div style="float: left; margin: 5px; max-width: 400px; border: blue 3px solid;">
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE for the benefits of using Car Company for your business needs</li>
</ul>
</div>
<div style="float: left; margin: 5px; border: blue 3px solid;">
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="min-width: 200px; padding: 10px;" />
</div>
</div>
<h2>The Method is Simple</h2>
<div class="float-parent" style="display: table; margin: auto; border: green 3px solid;">
<div style="float: left; margin: 5px; border: blue 3px solid;">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="padding: 10px;" />
</div>
<div style="float: left; margin: 5px; max-width: 400px; border: blue 3px solid;">
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.</p>
<p>Thank you for your interest. The Car Company Team.</p>
</div>
</div>
Inline method
Working inline version of the Square Block. Centered, no floats, text all looks nice except the images end up at the bottom and not centered.
HTML
<div style="text-align: center;">
<div style="overflow: hidden;">
<div style="display: inline-block; overflow: hidden; min-width: 200px; max-width: 450px; padding: 10px; text-align: justify;">
<h2>We provide Chauffeurs:</h2>
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs</li>
</ul>
</div>
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="min-width: 200px; padding: 10px;" />
</div>
<div style="overflow: hidden;">
<div style="display: inline-block; max-height: 450px; min-width: 200px; max-width: 450px;">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="padding: 10px;" />
</div>
<div style="display: inline-block; overflow: hidden; min-width: 200px; max-width: 450px; padding: 10px; text-align: justify;">
<h2>The Method is Simple</h2>
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.</p>
<p>Thank you for your interest. The Car Company Team.</p>
</div>
</div>
</div>
Inline version with fix
This is the same as the inline code above but with me trying to apply the vertical image fix with the code from JSFiddle. The fix is not working on my demo.
CSS
/* https://jsfiddle.net/hashem/46psK/ Image fix section */
.responsive-container {
position: relative;
width: 100%;
/*border: 1px solid black;*/
}
.responsive-container .dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.responsive-container .img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center; /* Align center inline elements */
font: 0/0 a;
}
.responsive-container .img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.responsive-container .img-container img {
vertical-align: middle;
display: inline-block;
}
HTML
<div style="text-align: center;">
<div style="overflow: hidden;">
<div style="display: inline-block; overflow: hidden; min-width: 200px; max-width: 450px; padding: 10px; text-align: justify;">
<h2>We provide Chauffeurs:</h2>
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs</li>
</ul>
</div>
<div class="responsive-container" style="display: inline-block; min-width: 200px; max-width: 450px; max-height: 450px;">
<div class="dummy"></div>
<div class="img-container">
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="min-width: 200px; padding: 10px;" />
</div>
</div>
</div>
<div style="overflow: hidden;">
<div class="responsive-container" style="display: inline-block; min-width: 200px; max-width: 450px; max-height: 450px;">
<div class="dummy"></div>
<div class="img-container">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="padding: 10px;" />
</div>
</div>
<div style="display: inline-block; overflow: hidden; min-width: 200px; max-width: 450px; padding: 10px; text-align: justify;">
<h2>The Method is Simple</h2>
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.</p>
<p>Thank you for your interest. The Car Company Team.</p>
</div>
</div>
</div>
Inline Method - CSS Version
This uses both parts of the CSS script and is all set by the CSS. This looks different in a normal HTML file.
We provide Chauffeurs:
- For Individual Journeys
- On Contract for Corporate Clients
- On Relief - Cover for when your Chauffeur is unavailable
- Please enquire about our Corporate Rates and Chauffeur Placement service.
- Please enquire about our Chauffeur and Executive Car service.
- Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs
The Method is Simple
We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.
The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.
We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.
There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.
Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.
Thank you for your interest. The Car Company Team.
CSS
/*-- Square Block - Responsive 4 x 4 Grid with centered images --*/
.square-grid {text-align: center;}
.square-grid .square-grid-row {overflow: hidden;}
.square-grid .square-grid-image {
display: inline-block;
max-height: 450px;
min-width: 200px;
max-width: 450px;
}
.square-grid .square-grid-content {
display: inline-block;
overflow: hidden;
min-width: 200px;
max-width: 450px;
padding: 10px;
text-align: left;
}
.square-grid .square-grid-content ul {
display: table;
}
/* https://jsfiddle.net/hashem/46psK/ Image fix section */
.responsive-container {
position: relative;
width: 100%;
/*border: 1px solid black;*/
}
.responsive-container .dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.responsive-container .img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center; /* Align center inline elements */
font: 0/0 a;
}
.responsive-container .img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.responsive-container .img-container img {
vertical-align: middle;
display: inline-block;
}
HTML
<div class="square-grid">
<div class="square-grid-row">
<div class="square-grid-content">
<h2>We provide Chauffeurs:</h2>
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs</li>
</ul>
</div>
<div class="square-grid-image">
<div class="dummy"></div>
<div class="img-container">
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="padding: 10px;" />
</div>
</div>
</div>
<div class="square-grid-row">
<div class="square-grid-image">
<div class="dummy"></div>
<div class="img-container">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="padding: 10px;" />
</div>
</div>
<div class="square-grid-content">
<h2>The Method is Simple</h2>
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.</p>
<p>Thank you for your interest. The Car Company Team.</p>
</div>
</div>
</div>
Joomlashine Grid Method
This will not work unless you use a joomlashine template (v1)
We provide Chauffeurs:
- For Individual Journeys
- On Contract for Corporate Clients
- On Relief - Cover for when your Chauffeur is unavailable
- Please enquire about our Corporate Rates and Chauffeur Placement service.
- Please enquire about our Chauffeur and Executive Car service.
- Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs
The Method is Simple
We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.
The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.
We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.
There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.
Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.
Thank you for your interest. The Car Company Team.
HTML
<div class="grid-layout">
<div>
<div style="display: inline-block; min-width: 250px; height: 300px; padding: 10px;">
<h2>We provide Chauffeurs:</h2>
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs</li>
</ul>
</div>
</div>
<div>
<div style="display: inline-block; min-width: 250px; height: 300px; padding: 10px;">
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="margin: 10px;" />
</div>
</div>
</div>
<div class="grid-layout">
<div>
<div style="display: inline-block; min-width: 250px; height: 300px; padding: 10px;">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="margin: 10px;" />
</div>
</div>
<div>
<div style="display: inline-block; min-width: 250px; height: 300px; padding: 10px;">
<h2>The Method is Simple</h2>
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.</p>
<p>Thank you for your interest. The Car Company Team.</p>
</div>
</div>
</div>
Float and Overflow Method
This does work but the images are not neat (DOES WORK)
HTML
<div>
<div style="overflow: hidden;">
<img src="/images/kb/2017/869/cat-whiskers-kitty-tabby.jpg" alt="Business people working in backseat of car" style="float: right; min-width: 200px; min-height: 300px; padding: 10px;" />
<div style="overflow: hidden; min-width: 200px; max-width: 450px; min-height: 300px; padding: 10px;">
<h2>We provide Chauffeurs:</h2>
<ul>
<li>For Individual Journeys</li>
<li>On Contract for Corporate Clients</li>
<li>On Relief - Cover for when your Chauffeur is unavailable</li>
<li>Please enquire about our Corporate Rates and Chauffeur Placement service.</li>
<li>Please enquire about our Chauffeur and Executive Car service.</li>
<li>Please see HERE (link to who we are benefits section) the benefits of using Car Company for your business needs</li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
<div style="overflow: hidden;">
<img src="/images/kb/2017/869/kitten-green-eyes-grass.jpg" alt="Female CEO working inside car" style="float: left; min-width: 200px; min-height: 300px; padding: 10px;" />
<div style="overflow: hidden; min-width: 200px; max-width: 450px; min-height: 300px; padding: 10px;">
<h2>The Method is Simple</h2>
<p>We will open an account in your company's name and make the booking for the day and time required. We would appreciate 24 hours notice, whenever possible.</p>
<p>The chauffeur will arrive at your designated pick-up point in his own car and will be available to drive you in your car for as long as you wish.</p>
<p>We charge a flat rate per hour, this remains the same irrespective of unsocial hours, weekends and bank holidays.</p>
<p>There is a call out charge of £15 per trip and a minimum charge per trip of 5 hours.</p>
<p>Our Car Company Chauffeurs: Are Uniformed, Are over 30 years old, Have clean driving licences, Have been individually tested by a Class 1 Police experienced officer, are experienced in chauffeuring Rolls Royce, Jaguar, Mercedes Benz and all other marques of vehicles. Please call 01344 887 439 or 01189 401 880 for more information.</p>
<p>Thank you for your interest. The Car Company Team.</p>
</div>
</div>
</div>