I do some pretty minimal web design, but I do have to maintain some of our company’s web pages that are running wordpress. Don’t judge.I was asked to do something like the following screenshot, have a hanging quote, and at first I thought “no problem”. Normally I would hobble my way through it and poke around to various web sites trying to get some combo of HTML and CSS to pull it off, but I realized getting the GDF hivemind involved would be better.
Best case scenario is to CSS the box so that I can reuse as needed.
A whole lot depends on how you’re handling the parent containers since the hanging container needs to interact with its parents, but here’s a possibility I quickly wrote out. There are other ways to do it that are likely better.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {
text-align: center;
max-width: 600px;
padding-left: 40px;
}
.centered-container {
max-width: 600px;
text-align: left;
display: inline-block;
}
.hang {
margin: 0.5em 1em 0.5em -40px;
width: 300px;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
padding: 1em;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-container">
<p>On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone him his dear sure. Fat decisively estimating affronting assistance not. Resolve pursuit regular so calling me. West he plan girl been my then up no.</p>
<div class="hang">
<p>Of will at sell well at as. Too want but tall nay like old. Removing yourself be in answered he. Consider occasion get improved him she eat. Letter by lively oh denote an.</p>
</div>
<p>Man request adapted spirits set pressed. Up to denoting subjects sensible feelings it indulged directly. We dwelling elegance do shutters appetite yourself diverted. Our next drew much you with rank. Tore many held age hold rose than our. She literature sentiments any contrasted. Set aware joy sense young now tears china shy.</p>
<p>Material confined likewise it humanity raillery an unpacked as he. Three chief merit no if. Now how her edward engage not horses. Oh resolution he dissimilar precaution to comparison an. Matters engaged between he of pursuit manners we moments. Merit gay end sight front. Manor equal it on again ye folly by match. In so melancholy as an sentiments simplicity connection. Far supply depart branch agreed old get our.</p>
<p>It as announcing it me stimulated frequently continuing. Least their she you now above going stand forth. He pretty future afraid should genius spirit on. Set property addition building put likewise get. Of will at sell well at as. Too want but tall nay like old. Removing yourself be in answered he. Consider occasion get improved him she eat. Letter by lively oh denote an.</p>
</div>
</div>
</body>
</html>
I was wondering if I could do something with negative numbers to hang it “out to the side”. My only concern is on mobile I need it to be more “inline” with the copy. I suppose I could do that with a media query, correct? Thanks @Just-B
Yes, you can have it hang outside the margin by using a negative left margin. You will need to write a media query for smaller screens so it hangs off a bit less.
But you would want to use a relative measurement such as width: 50% if you want the quote to occupy half the width of the body copy space.
Thanks @creativeboost , I’m planning on just having the text and callout quote just all go one column, no hang on mobile. But I appreciate the help from you both. Thanks! I know enough HTML and CSS to be dangerous (i.e. someone would probably look at code that I cobble together and twitch, or scream, or laugh. Maybe all 3.)
