I'm trying to create a web page, that has three columns of text, but these columns float around a central quote. It's supposed to look like this: http://ift.tt/1QkoNWA
but it currently looks like this: http://ift.tt/1Q2Ngpa
The problem is, the "float:left" applied to the quote is not affecting the text, because the text is in a containing div. I can't take the text out of the div, because then it won't be in 3 columns. Is there some trick I don't know to fix this?
Here's my code if that helps:
#magicquote{
position: absolute;
top: 10vh;
width: 50%;
float: left;
}
#maintext{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
margin-left: 25%;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel = "stylesheet" href = "teststylesheet.css" type = "text/css" media = "all"/>
</head>
<body>
<p id = "magicquote"> lorem</p>
<div id = "maintext">
<p> lorem</p>
<p> lorem</p>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire