So I'm building out a design for a client for a single-page newsletter site. Attached is the concept here and I have everything built out except the actual main copy. The idea is that they add in new news every day, and what they want to do is have a simple page that has basic styling markup applied to the news, that will then get sucked into the page via AJAX or something similar. However, with the column format, they want the columns to be auto-created by some method applied when the content is getting sucked into the page. Each news story preview will be the same length and formatting. My question is, is it possible to have columns auto-created that are a specific height and width and just have them be auto-created until they run out of copy? I'm a graphic designer with only experience in HTML and CSS, so I'm looking for solutions that are within my abilities. Thank you for any suggestions anyone might have! At this point I'm just looking to be pointed in the right direction.
Here is the current page I have up: http://personal.justgooddesign.net/dailydose/
What I want is for a new column to be created with each h2 element. Here's a sample of the code:
<h1>Top News Stories for November 11, 2011</h1>
<hr color="#fe0000" />
<h2>Coffee growers in Uganda and elsewhere find climate change hurting their crops</h2>
A farmer near Uganda's Mount Elgon holds Arabica coffee berries. It's getting more difficult to grow coffee berries because of erratic weather patterns. (Photo by Jill Braden Balderas.) In Uganda, the coffee trees are nearly empty — and it's not ...
<br />http://www.pri.org
<h2>Exclusive: Europe coffee buyers upset at Liffe delivery delays</h2>
Some companies that urgently need robusta coffee -- used mostly in blends and instant coffee and the second largest grown variety after arabica coffee -- are scrambling to find other sources. Many are turning to the spot market and effectively paying ...
<br />
http://www.reuters.com
<h2>Asia Coffee: Vietnam Slow to Sell, Indonesia Premiums Dip</h2>
Robusta coffee beans are roasted at the Losari Coffee Plantation in Magelang, Central Java, Indonesia, on Saturday, Sept. 18, 2010. Indonesia is the largest Asian coffee grower after Vietnam. (Bloomberg Photo/ Dimas Ardian) Singapore. ...
<br />
http://www.thejakartaglobe.com
<h2>Coffee Cupping</h2>
By Rachel Gibian and Nicole J. Levin, CONTRIBUTING WRITERS With a metal spoon and the steady hands of a surgeon, Jaime Vanschyndel, general manager of Barismo, gently pushes aside the coffee grounds that have floated to the surface of the cup. ...
<br />
http://www.thecrimson.com
<h2>Espresso cups outsell mugs</h2>
Britain's coffee revolution has claimed another victim: the humble mug. According to two leading department stores, sales of espresso cups are now outselling mugs for the first time, as more and more households switch to using coffee machines. ...
<br />
http://www.telegraph.co.uk
<h2>Specialty coffee abounds in Austin</h2>
Austin has a number of local coffee outlets that specialize in roasting their own beans, providing much needed caffeination for countless Austinites. Third Coast Coffee is a fair trade coffee house that serves up many Austinites on a daily basis. ...
<br />
http://www.dailytexanonline.com
<img src="IMG/main-banner_2.jpg" id="ad-b" />
<h1>For Roasters and Retailers</h1>
<hr color="#fe0000" />
You could use divs that are 50% width and float, like this:
jsfiddle: http://jsfiddle.net/myn3h/
CSS
#Container {
overflow: auto;
}
.NewsItem {
float: left;
width: 50%;
height: 100px;
background: red;
}
HTML
<div id="Container">
<div class="NewsItem">
<h1>title</h1>
<p>
Lorem ipsum dolor sit amet..
</p>
</div>
<div class="NewsItem">
<h1>title</h1>
<p>
Lorem ipsum dolor sit amet..
</p>
</div>
<div class="NewsItem">
<h1>title</h1>
<p>
Lorem ipsum dolor sit amet..
</p>
</div>
</div>
Update
You could try CSS3 multi column layout. It's just not widely supported yet:
#container {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
CSS3.info Reference: multi column layout
W3C reference: CSS multi-column layout module
caniuse reference: multiple column layout
Related
For a school project, I need to use a grid. I want to change the position of some articles with text. Can anyone help me? I don't understand how columns work and how to make article 1 the biggest one for example. See my image where I explain how the articles need to be positioned.
.
For example, the second article needs to be displayed, and then the first one.
.product-text {
display: grid;
grid-template: [row1-start] "grid-area2 grid-area1 grid-area3" 50% [row1-end]
/* [row2-start] "grid-area6" 25% [row2-end] */
/* [row3-start] "grid-area5" 25% [row3-end] */
/* [row4-start] "grid-area1" 25% [row4-end] */
/33%;
}
.story {
grid-area: grid-area1;
color: #B12293;
}
.problem {
grid-area: grid-area2;
color: #2297B1;
}
.use {
grid-area: grid-area3;
color: #44CB5F;
}
.users {
grid-area: grid-area4;
color: #4452CB;
}
.expectations {
grid-area: grid-area5;
color: #CB444C;
}
.future {
grid-area: grid-area6;
color: #593E3F;
}
<section class="product-text">
<article class="story">
<p><strong> Story about the innovation: </strong> </p>
<p>The development of our product began in 2016. We created this company with love and passion. </p>
<p>We wanted to create a thing were people can see the data of shoes. To be specific runnin shoes. </p>
<p>With this data we can help a lot of people to determine which type of running shoes they need </p>
<p>We worked for 3 years on this innovation, with a lot of testing we came with the right product. </p>
</article>
<article class="problem">
<p><strong> What problem does this solve? </strong> </p>
<p>The type of shoes you have, do have a lot of impact on how you run. With this innovation you can </p>
<p>choose the best shoes made for you, so you can be the best of yourself. </p>
<p>Poeple can set their own personal records when running the right type of shoes. </p>
<p>Btw, It is way better for your feet when walking on the right type of shoes. You won't get any blisters. </p>
</article>
<article class="use">
<p> <strong> How to use this innovation? </strong> </p>
<p>There is a treadmill with sensors and a computer connected when using this. </p>
<p>A person puts on some running shoes and will walk a couple of times up and down. </p>
<p>The computer connected will collect data and there you will see how you place your foot and shoe. </p>
<p>On the computer it will suggest if you need softer or harder shoes based on the algoritm</p>
</article>
<article class="users">
<p> <strong> Who will use this innovation?</strong> </p>
<p>A lot of people can use this innovation. The age is most of the time between 15-60.</p>
<p>Since running is a populur type of sport, we will have a lot of clients. </p>
<p>We have some collabs in the future with celebrities. This way we can promote this product. </p>
<p>This month we will have a collab with a famous Canadian singer. </p>
<p>We will update very soon when we have more information. </p>
</article>
<article class="expectations">
<p> <strong> What can be expected from our company?</strong> </p>
<p>Anyone can walk in our store to use the innovation. We will kindly massure your shoes and which type you need. </p>
<p>With in 10 minutes we have all the data you need to buy the perfect shoes. </p>
<p>Our employies are always there for you and can answer anything. So you won't have any questions. </p>
<p>On our contact page you can see the opening times and much more. </p>
</article>
<article class="future">
<p> <strong> What is the future of this innovation? </strong> </p>
<p>We are constantly trying to improve this product. With the help of our programmers, we can make it more accurate. </p>
<p>Since our product is getting bigger and bigger, we will open more locations in and outside of The Netherlands.</p>
<p>This way, more people can massure there foot and shoes to buy the best shoes for them. </p>
<p>In 5 years, the company will be 5 times larger from our calculations.</p>
</article>
</section>
Writing the grid-are-templates clean will solve it for you already (see the grid-area-templates in the CSS part):
.product-text {
display: grid;
grid-auto-rows: 1fr; /* makes the rows equal height */
grid-template-areas:
"grid-area2 grid-area1 grid-area3"
"grid-area2 grid-area1 grid-area3"
"grid-area5 grid-area1 grid-area3"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area1 grid-area4"
"grid-area5 grid-area6 grid-area6";
}
.story {
grid-area: grid-area1;
color: #B12293;
}
.problem {
grid-area: grid-area2;
color: #2297B1;
}
.use {
grid-area: grid-area3;
color: #44CB5F;
}
.users {
grid-area: grid-area4;
color: #4452CB;
}
.expectations {
grid-area: grid-area5;
color: #CB444C;
}
.future {
grid-area: grid-area6;
color: #593E3F;
}
/* added by editor for visualisation purpose */
article {
border: 2px dashed red;
}
<section class="product-text">
<article class="story">
<p><strong> Story about the innovation: </strong> </p>
<p>The development of our product began in 2016. We created this company with love and passion. </p>
<p>We wanted to create a thing were people can see the data of shoes. To be specific runnin shoes. </p>
<p>With this data we can help a lot of people to determine which type of running shoes they need </p>
<p>We worked for 3 years on this innovation, with a lot of testing we came with the right product. </p>
</article>
<article class="problem">
<p><strong> What problem does this solve? </strong> </p>
<p>The type of shoes you have, do have a lot of impact on how you run. With this innovation you can </p>
<p>choose the best shoes made for you, so you can be the best of yourself. </p>
<p>Poeple can set their own personal records when running the right type of shoes. </p>
<p>Btw, It is way better for your feet when walking on the right type of shoes. You won't get any blisters. </p>
</article>
<article class="use">
<p> <strong> How to use this innovation? </strong> </p>
<p>There is a treadmill with sensors and a computer connected when using this. </p>
<p>A person puts on some running shoes and will walk a couple of times up and down. </p>
<p>The computer connected will collect data and there you will see how you place your foot and shoe. </p>
<p>On the computer it will suggest if you need softer or harder shoes based on the algoritm</p>
</article>
<article class="users">
<p> <strong> Who will use this innovation?</strong> </p>
<p>A lot of people can use this innovation. The age is most of the time between 15-60.</p>
<p>Since running is a populur type of sport, we will have a lot of clients. </p>
<p>We have some collabs in the future with celebrities. This way we can promote this product. </p>
<p>This month we will have a collab with a famous Canadian singer. </p>
<p>We will update very soon when we have more information. </p>
</article>
<article class="expectations">
<p> <strong> What can be expected from our company?</strong> </p>
<p>Anyone can walk in our store to use the innovation. We will kindly massure your shoes and which type you need. </p>
<p>With in 10 minutes we have all the data you need to buy the perfect shoes. </p>
<p>Our employies are always there for you and can answer anything. So you won't have any questions. </p>
<p>On our contact page you can see the opening times and much more. </p>
</article>
<article class="future">
<p> <strong> What is the future of this innovation? </strong> </p>
<p>We are constantly trying to improve this product. With the help of our programmers, we can make it more accurate. </p>
<p>Since our product is getting bigger and bigger, we will open more locations in and outside of The Netherlands.</p>
<p>This way, more people can massure there foot and shoes to buy the best shoes for them. </p>
<p>In 5 years, the company will be 5 times larger from our calculations.</p>
</article>
</section>
Normally I would use a CSS page, but i don't think i can do that with canvas :(
<div id="Bell_hooks" class="">
<h3><i class="fas fa-chalkboard-teacher" aria-hidden="true"> </i>Philosopher's perspective - <em>Bell Hooks</em></h3>
</div>
<div style="display: flex;">
<div>
<p><img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366" /></p>
</div>
<div>
<p>In her 1999 book "All about love" Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life. In the first few chapters of book, Hooks brings up the state of the newer generations' views on love, in which she states how she was "sad" and "appalled" at how the younger regards love and romance culture, quoting the reply of someone she had interviewed: "Love what's that, I have never had any love in my life". Hooks comments on the more modern view on love, in which claims that more and more younger people are defining love as something "for the naïve, the weak, the hopelessly romantic.". After bringing up her viewpoint, Hooks presents a theory in which she theorises that our cynicism stems from the reoccurring feeling that love will not and cannot be found, on which she expands by theorising that this is ultimately because we are simply trying hide behind the mask of cynicism to hide our disappointed and betrayed heart. In her book, Hooks quotes multiple other philosophical works such as When all you've ever wanted isn't enough (Harold Kushner) and Bitch: In Praise of Difficult Women (Elizabeth Wurtzel), in which both works theorise that the newer generation are growing up much more apprehensive about loving, and that "None of us are getting better at loving: we are getting more scared of it."</p>
</div>
</div>
this is my full code, but once i add the flex display the image shrinks to the size of one line of text, is there any way to fix that?
here's what it looks like now
This is an example using flexbox. Wrap your divas in a container and give it a display: flex.
<div class="container" style="display: flex">
<div>
<img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366">
</div>
<div>
<p>In her 1999 book "All about love" Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life</p>
</div>
</div>
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
<!DOCTYPE html>
<html>
<head>
<title>This is London</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Getting around</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- End of nav -->
<div id="header">
<div id="header-text">
<h2>
Visiting London has never been easier with these ideas.
</h2>
<p>The capital of the United Kingdom is a thriving multicultural metropolis. The contrast between the spectacular historic sights and the lively cultural scene makes a visit to London an interesting and exciting adventure. </p>
</div> <!-- End of header-text -->
</div> <!-- End of header -->
<div id="middle">
<div id="mid-text">
<h1>- Getting around in London -</h1>
<h5>One of the world's most visited cities, London has something for everyone: from history and culture to fine food and good times.</h5>
<p>Immersed in history, London's rich seams of eye-opening antiquity are everywhere. The city's buildings are striking milestones in a unique and beguiling biography, and a great many of them – the Tower of London, Westminster Abbey, Big Ben – are instantly recognisable landmarks. There’s more than enough innovation (the Shard, the Tate Modern extension, the Sky Garden) to put a crackle in the air, but it never drowns out London’s seasoned, centuries-old narrative. Architectural grandeur rises up all around you in the West End, ancient remains dot the City and charming pubs punctuate the historic quarters, leafy suburbs and river banks. Take your pick.
Art & Culture
A tireless innovator of art and culture, London is a city of ideas and the imagination. Londoners have always been fiercely independent thinkers (and critics), but until not so long ago people were suspicious of anything they considered avant-garde. That’s in the past now, and the city’s creative milieu is streaked with left-field attitude, whether it's theatrical innovation, contemporary art, pioneering music, writing, poetry, architecture or design. Food is another creative arena that has become a tireless obsession in certain circles.
Diversity
This city is deeply multicultural, with one in three Londoners foreign-born, representing 270 nationalities and 300 tongues. The UK may have voted for Brexit (although the majority of Londoners didn't), but for now London remains one of the world's most cosmopolitan cities, and diversity infuses daily life, food, music and fashion. It even penetrates intrinsically British institutions; the British Museum and Victoria & Albert Museum have collections as varied as they are magnificent, while the flavours at centuries-old Borough Market run the full global gourmet spectrum.
A Tale of Two Cities
London is as much about wide-open vistas and leafy landscape escapes as it is high-density, sight-packed urban exploration. Central London is where the major museums, galleries and most iconic sights congregate, but visit Hampstead Heath or the Queen Elizabeth Olympic Park to flee the crowds and frolic in wide open green expanses. You can also venture further out to Kew Gardens, Richmond or Hampton Court Palace for beautiful panoramas of riverside London followed by a pint in a quiet waterside pub.</p>
<div id="img-mid">
<a href="https://goo.gl/maps/PSDhvQ25fRZBqWHC8" target="_blank">
<img src="images/Feature-images.jpg" alt="Map">
</a>
</div><!-- End of img-mid -->
</div> <!-- End of mid-text -->
</div> <!-- End of middle -->
<div id="footer">
<div class="credits">
<div class="credits_left">
<h6> Designed by Alba Heidari</h6>
</div>
<div class="credits_right"><img src="https://www.arct.cam.ac.uk/images/instagram-icon/image" class="social_icon">
</div>
</div> <!-- End of footer -->
</body>
</html>
Add this to your css file:
#img-mid{
height: 300px;
width: 300px;
}
#img-mid img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
hi so iv been writing html for a website and was wondering if there is anyway someone could help me im trying to get my 2 sections " early history" and " european adoption" side by side above " modern cards " any recommendations? i dont know how to position them like this any help would be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
<style>
section {
margin: 10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
Add a class to the first two sections and assign these rules to it:
.myClass {
display: inline-block;
width: 50%;
}
This will put them next to each other. Of course, if there are other factors that influence their width, you have to take that into account (and, for example, reduce the width accordingly)
You're looking for something along this lines, I think:
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<style>
#parent {
float: left;
}
#parent section {
width: 45%;
float: left;
margin:10px
}
</style>
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section id="parent">
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by
play money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</section>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to
merit their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are
a relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
</main>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
I've wrapped your sections in another section (parent) and just adapted the CSS code a little bit.
I've put width:45% so you can keep your margin:10px. Otherwise I would probably have set width:50%
Try using display:flex; on parent div
main {
display: flex;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../CSS/styles.css">
</head>
<body>
<!-- Page Header -->
<header>
<img class="imageBannerLeft" src="../images/bannerCardsLeft.png">
<img class="imageBannerRight" src="../images/bannerCardsRight.png">
<h1>Playing Cards</h1>
</header>
<!-- Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Multi-player</li>
<li>Single-player</li>
<li>Free Cards</li>
</ul>
</nav>
<!-- The main content of the page -->
<main>
<section>
<h2>Early history</h2>
<p>The first playing cards are recorded as being invented in China around the 9th century AD by the Tang dynasty author Su E who writes about the card game "leaf" in the text Collection of Miscellanea at Duyang. The text describes Princess Tongchang,
daughter of Emperor Yizong of Tang, playing leaf in 868AD with members of the family of the princess' husband.</p>
<p>The mass production of Cards became possible following the invention of wooden printing block technology. Early Chinese packs contained 30 cards with no suits.</p>
<p>The first cards may have doubled as actual paper currency being both the tools of gaming and the stakes being played for. This is similar to modern trading card games. Using paper money was inconvenient and risky so they were substituted by play
money known as "money cards".</p>
<p>The earliest dated instance of a game involving cards with suits and numerals occurred on 17 July 1294.</p>
</section>
<section>
<h2>European Adoption</h2>
<p>The first four-suited playing cards appeared in Europe in 1365. They are thought to originate from traditional latin decks whose suits included: cups, coins, swords, and polo-sticks. As Polo was not yet a European game, polo sticks became batons
(or cudgels). Wide use of playing cards is recorded from 1377 onwards.</p>
<p>Professional card makers in Ulm, Nuremberg, and Augsburg created printed decks. Playing cards even competed with devotional images as the most common uses for woodcuts in this period. These 15th-century playing cards were probably painted.</p>
<p>The Flemish Hunting Deck, held by the Metropolitan Museum of Art is the oldest complete set of ordinary playing cards made in Europe.</p>
<p>Cards were adapted in Europe to contain members of the royal court and by the 15th Century French and English packs of 56 cards contain the King, Queen and Knave cards.</p>
</section>
</main>
<section>
<img class="imageCardsRight" src="../images/germanPlayingCards.jpg">
<h2>Modern Cards</h2>
<p>Contemporary playing cards are grouped into three broad categories based on the suits they use: French, Latin, and Germanic. Latin suits are used in the closely related Spanish and Italian formats. The Swiss-German suits are distinct enough to merit
their subcategory. Excluding Jokers and Tarot trumps, the French 52-card deck preserves the number of cards in the original Mamluk deck, while Latin and Germanic decks average fewer.</p>
<p>Within suits, there are regional or national variations called "standard patterns" because they are in the public domain, allowing multiple card manufacturers to copy them. Pattern differences are most easily found in the face cards but the number
of cards per deck, the use of numeric indices, or even minor shape and arrangement differences of the pips can be used to distinguish them. Some patterns have been around for hundreds of years. Jokers are not part of any pattern as they are a
relatively recent invention and lack any standardized appearance so each publisher usually puts their own trademarked illustration into their decks. </p>
</section>
<!-- Page Footer -->
<footer>
<p> © Card Foundation <br> 2017 <br> Please provide feedback to: jlongridge#jlinternet.co.uk </p>
</footer>
</body>
</html>
You could also try the css grid. It's very powerful in terms of building complex grid layout.
Documentation
.parentDiv {
display: grid;
}
.firstChild {
grid-column: 1;
background-color: yellow;
}
.secondChild {
grid-column: 2;
background-color: lime;
}
<div class="parentDiv">
<div class="firstChild">
Column 1
</div>
<div class="secondChild">
Column 2
</div>
</div>
I am trying to create an about page for a personal website. I am wondering how to wrap the text around the picture. I want this kind of effect. http://alexbudak.com/about/
The code I have right now is:
<div class="about_content">
<img src="placeholder.jpg" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>
and the css is:
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
}
.about_content p: last-child{
margin-bottom: 0;
}
What you have now will cause the content to wrap around the image. The trick to doing this is applying float: left; to the image, which you have already done.
What I'm suspecting is happening is your image is too wide. If it's 500px or wider, the image will take up the entire width of .about_content, so you need to limit the size of the image. Here's an example utilizing max-width on the image.
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
max-width: 250px;
}
.about_content p: last-child{
margin-bottom: 0;
}
<div class="about_content">
<img src="https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/54b43e30e4b0ad2aad39a7f2/1421098552235/budak?format=500w" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>