How do I achieve this layout with CSS? - html

Question

I have some Javascript pulling information from a database for various films, but the layout of the page is dreadful, I want to achieve something similar to the layout in the screenshot below:
but this is how it looks right now:
How would I go about achieving a layout similar to the one in the top image?
Here is my code (tweaked so you can see content, though the divs would actually be empty without the database usually)
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
/* third page */
#filmImage {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
#filmTitle {
font-weight: 700;
margin: 0;
font-size: 3em;
width: 100%;
text-align: center;
color: #B2365F;
}
<header>
<img src="img/rv-logo.png">
<p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>
<div class="sortFilms">
<div id="filmContainer">
<img id='filmImage'src="https://images-na.ssl-images-amazon.com/images/I/51Gh9OaWVcL.jpg">
<p id='filmTitle'>Deadpool</p>
<label>Year:</label><p id='filmYear'>2016</p>
<label>Genre:</label><p id='filmGenre'>Comedy</p>
<label>Rating:</label><p id='filmRating'>9</p>
<label>Synopsis:</label><p id='filmSynopsis'>Just Ryan Reynolds, doing Ryan Reynolds things in a tight suit.</p>
<a href='viewFilms.html'>Back to list</a>
</div>
</div>
(ignore the font on the text in the ideal layout, I just used the last one I used on Photoshop)
Any help would be greatly appreciated.

Answer 1

try separate the image and the text in the different div.
make two column, and adjust the width accordingly with the CSS.
<div id="filmContainer">
<div id="leftcolumn">
<img id='filmImage'src="https://images-na.ssl-images-amazon.com/images/I/51Gh9OaWVcL.jpg">
</div>
<div id="rightcolumn">
<p id='filmTitle'>Deadpool</p>
<label>Year:</label><p id='filmYear'>2016</p>
<label>Genre:</label><p id='filmGenre'>Comedy</p>
<label>Rating:</label><p id='filmRating'>9</p>
<label>Synopsis:</label><p id='filmSynopsis'>Just Ryan Reynolds, doing Ryan Reynolds things in a tight suit.</p>
<a href='viewFilms.html'>Back to list</a>
</div>
</div>

Answer 2

First, you should convert most, of not all your IDs to CLASS tags. You don't need to make them all ID and then it limits you from having multiple movie cards on one page.
Where's a JSfiddle I created for you, updating the html a little and mostly the CSS.
HTML:
<header>
<img src="img/rv-logo.png">
<p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>
<div class="sortFilms">
<div id="filmContainer">
<div class="poster">
<img id='filmImage'src="https://images-na.ssl-images-amazon.com/images/I/51Gh9OaWVcL.jpg">
</div>
<div class="info">
<p id='filmTitle'>Deadpool</p>
<label>Year:</label><p id='filmYear'>2016</p>
<label>Genre:</label><p id='filmGenre'>Comedy</p>
<label>Rating:</label><p id='filmRating'>9</p>
<label>Synopsis:</label><p id='filmSynopsis'>Just Ryan Reynolds, doing Ryan Reynolds things in a tight suit.</p>
<a href='viewFilms.html'>Back to list</a>
</div>
</div>
</div>
CSS (All of your original CSS is in there too, which could be cleaned up):
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
width:100%;
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: block;
position: relative;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#filmContainer .poster {
width:45%;
float:left;
}
#filmContainer .info {
width:50%;
float: right;
}
#filmContainer .info label {
float:left;
width: 25%;
padding:0;
margin: 5px 0;
}
#filmContainer .info p {
float:left;
width: 75%;
margin: 5px 0;
}
#filmContainer .info a {
display:block;
padding: 25px 0;
clear:both;
}
#filmContainer .info p#filmTitle {
width:100%;
clear:both;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 20px;
float: unset;
text-align:left;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
/* third page */
#filmImage {
width: 95%;
height: auto;
margin: 10px;
border-radius: 20px;
}
#filmTitle {
font-weight: 700;
margin: 0;
font-size: 3em;
width: 100%;
text-align: center;
color: #B2365F;
}
http://jsfiddle.net/sstracy/vaq60zyp/