I am struggling to recreate this layout example. I attempted to make it align correctly, but I am having trouble looping the comment box under the review score. Can someone provide an example or guide me on how to achieve this design?
Example image:
https://i.stack.imgur.com/lt0sv.png
This is what I have created so far, using a background color to highlight the div box.
https://i.stack.imgur.com/B5aOI.png
Below is the code snippet:
* {
box-sizing: border-box;
}
body {
background-image: url("background.png");
font-family: Tahoma;
font-size: 8px;
}
.banner {
margin-left: auto;
margin-right: auto;
background-image: url("bannerbackground.png");
background-repeat: repeat;
}
H1 {
font-family: Tahoma;
font-size: 24px;
text-align: center;
}
DL {
width: 100%;
overflow: hidden;
background: #ff0;
padding: 0;
margin: 0
}
DT {
float: left;
width: 50%;
background: #cc0;
padding: 0;
margin: 0
}
DD {
float: left;
width: 50%; //background: #dd0
padding: 0;
margin: 0
}
.overview {
display: table;
margin: 0 auto;
float: right;
background-color: red;
}
.everything review {
border-style: solid;
border-width: 4px;
border-color: grey;
}
.review p {
float: left;
display: block;
background-color: blue;
margin: 0px 10px 0px 0px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>TMNT - Rancid Tomatoes</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<LINK rel="stylesheet" type="text/css" href="movie.css">
</HEAD>
<BODY>
<DIV class="banner">
<IMG alt="Rancid Tomatoes" src="images/banner.png" align="middle">
</DIV>
<H1>TMNT (2007)</H1>
<DIV class="everything" align="center">
<DIV class="overview">
<IMG alt="general overview" src="images/generaloverview.png">
<DL>
<DT>STARRING</DT>
<DD>Mako
<BR> Sarah Michelle Gellar</DD>
<DT>DIRECTOR</DT>
<DD>Kevin Munroe</DD>
<DT>RATING</DT>
<DD>PG</DD>
<DT>THEATRICAL RELEASE</DT>
<DD>Mar 23, 2007</DD>
<DT>MOVIE SYNOPSIS</DT>
<DD>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</DD>
<DT>MPAA RATING</DT>
<DD>PG, for animated action violence, some scary cartoon images and mild language
</DD>
<DT>RELEASE COMPANY</DT>
<DD>Warner Bros.</DD>
<DT>GENRE</DT>
<DD>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</DD>
<DT>OFFICIAL MOVIE SITE</DT>
<DD>
<A href="http://www.tmnt.com/">The Official TMNT Site</A>
</DD>
</DL>
</DIV>
<DIV class="review">
<DIV>
<IMG alt="Rotten" src="images/rottenbig.png"> 32% (88 reviews total) </DIV>
<P>
<IMG alt="Rotten" src="images/rotten.gif">
<Q>Ditching the cheeky,
self-aware wink that helped to excuse the concept's inherent corniness, the
movie attempts to look polished and 'cool,' but the been-there animation can't
compete with the then-cutting-edge puppetry of the 1990 live-action
movie.</Q>
</P>
<P>
<IMG alt="Critic" src="images/critic.gif"> Peter Debruge
<BR> Variety </P>
<P>
<IMG alt="Fresh" src="images/fresh.gif">
<Q>TMNT is a fun,
action-filled adventure that will satisfy longtime fans and generate a legion of
new ones.</Q>
</P>
<!-- Additional reviewer info here -->
</DIV>
</DIV>
<DIV>
<A href="http://validator.w3.org/check/referer">
<IMG alt="Valid XHTML 1.1" src="images/w3c-xhtml.png">
</A>
<BR>
<A href="http://jigsaw.w3.org/css-validator/check/referer">
<IMG alt="Valid CSS!" src="images/w3c-css.png">
</A>
</DIV>
</BODY>
</HTML>