cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Styles, with divs, please answer for me?

TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017

Hello just curious how do you mimmic this picture using Divs or HTML5 Elements using article,section an what not? I know tables is out dated.

divpresentation.JPG

517
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

pziecina
LEGEND , Sep 18, 2017 Sep 18, 2017

Thats the best part about flexbox, providing you use row wrap it automatically flows from rows to columns.

Resize the browser to see this in the demo.

Translate
replies 14 Replies 14
latest latest Jump to latest reply
pziecina
LEGEND ,
Sep 18, 2017 Sep 18, 2017

Use css flexbox, view the code for this demo -

http://www.pziecina.com/Adobe/lightbox/lightbox.html

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017
In Response To pziecina

Ok this is close to what I need how did you separate them so they are not next to each other? When you use flex?

Sent from my Verizon, Samsung Galaxy smartphone

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
pziecina
LEGEND ,
Sep 18, 2017 Sep 18, 2017
In Response To TonyMancuso

change the margin values for the article elements.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017
In Response To pziecina

After you change the margin css, is this the way to use the flex code to make it look like there in rows and columns?

Sent from my Verizon, Samsung Galaxy smartphone

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
pziecina
LEGEND ,
Sep 18, 2017 Sep 18, 2017
In Response To TonyMancuso

Thats the best part about flexbox, providing you use row wrap it automatically flows from rows to columns.

Resize the browser to see this in the demo.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017
In Response To pziecina

Oh ok where can you learn about flex styles ?

Sent from my Verizon, Samsung Galaxy smartphone

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
pziecina
LEGEND ,
Sep 18, 2017 Sep 18, 2017
In Response To TonyMancuso

Look in the resources section of -

http://caniuse.com/#feat=flexbox

for anyone using browsers below 25 inch, (not 4k) or mobile devices flexbox is the most simple method available for building responsive layouts. For anything over 25 inch screen then css grid layouts is the up-comming best method, (in 1-2 years time).

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017
In Response To pziecina

pziecina  wrote

Thats the best part about flexbox, providing you use row wrap it automatically flows from rows to columns.

Resize the browser to see this in the demo.

pziecina​ Thank you for informing me about flex

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Sep 18, 2017 Sep 18, 2017

Like this, using Flexbox:

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

<meta charset="UTF-8">

<style>

* {

box-sizing: border-box;

}

body {

font-family: arial, helvetica, sans-serif;

font-size: 14px;

line-height: 20px;

}

.services_wrapper {

width: 85%;

margin: 0 auto;

}

.services_wrapper h3 {

font-size: 30px;

margin: 0;

padding: 30px 0;

font-weight: 400;

text-align: center;

}

.services {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;   

}

article {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 29%;

border: 1px solid #ccc;

padding: 25px;

text-align: center;

}

@media screen and (max-width: 768px) {

article {

width: 100%;

margin: 0 0 40px 0;

}

}

article h2 {

margin: 0;

padding: 0;

font-size: 18px;

line-height: 22px;

}

article p {

margin: 0;

padding: 0;

font-size: 14px;

line-height: 22px;

color: #808080;

}

hr {

border-top: 2px solid #C7A75E;

width: 30%;

}

</style>

</head>

<body>

<section class="services_wrapper">

<h3>Our Services</h3>

   

<div class="services">

<article>

<h2>Market Research</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<!-- end article -->

<article>

<h2>Investment Management</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<!-- end article -->

<article>

<h2>Sales & Training</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<!-- end article -->

</div>

<!-- end services -->

</section>

<!-- end services_wrapper -->

</body>

</html>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017
LATEST
In Response To osgood_

Thank you

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Sep 18, 2017 Sep 18, 2017

Bootstrap version 4 and Cards can do that.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4.0, Cards Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--Latest Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

html, body { height: 100% }

</style>

</head>

<body class="container">

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<div class="row row-eq-height">

<div class="col-sm-4">

<div class="card card-block h-100 justify-content-center ">

<h3 class="text-center">Vertically Centered Content</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</div>

</div>

<div class="col-sm-4">

<div class="card card-block h-100 justify-content-center">

<h3 class="text-center">Vertically Centered Content</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iusto veritatis minus, maiores odio.</p>

</div>

</div>

<div class="col-sm-4">

<div class="card card-block h-100 justify-content-center">

<h3 class="text-center">Vertically Centered Content</h3> <p>Cumque iusto veritatis minus, maiores odio.</p>

</div>

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Latest Bootstap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
pziecina
LEGEND ,
Sep 18, 2017 Sep 18, 2017
In Response To Nancy OShea

No comment, ().

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017
In Response To Nancy OShea

Thanks

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
TonyMancuso
Explorer ,
Sep 18, 2017 Sep 18, 2017

Thank you guys sorry took me a while to respond i wasnt on my computer

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices