Created
July 18, 2022 01:26
-
-
Save adamfortuno/45d4914ff9c6d9232a7136c061819402 to your computer and use it in GitHub Desktop.
Example of Columns in Side by Side Layout in HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Marcus is a douche bag</title> | |
<meta charset="UTF-8"> | |
<style> | |
html, | |
body { | |
height: 100%; | |
} | |
p { | |
font-family: "Arial, Helvetica, sans-serif"; | |
} | |
img { | |
width: 75; | |
height: 25px; | |
} | |
.column-container { | |
display: flex; | |
max-width: 600px; | |
} | |
.column { | |
flex: 1; | |
border: 3px solid pink; | |
margin: 5px; | |
} | |
.column:first-child { | |
margin-right: 5px; | |
} | |
.article { | |
display: flex; | |
align-items: left; | |
margin-top: 10px; | |
} | |
.article img { | |
float: left; | |
margin-right: 15px; | |
width: 100px; | |
height: auto; | |
} | |
.article p { | |
float: right; | |
text-align: left; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Why is Marcus a douche bag?</h1> | |
<div> | |
<div class="column-container"> | |
<div class="column one">There are things we don't understand. Scary things. Rappy things.</div> | |
<div class="column two">This is the studd in column 2,</div> | |
<div class="column three">This is the stuff in column 3.</div> | |
</div> | |
<div class="article"> | |
<img src="golden-retriever-puppy-kitten.webp"></img> | |
<p>Dog known to be cat murder even as a puppy.</p> | |
</div> | |
<div class="article"> | |
<img src="puppy-in-cup.jpeg"></img> | |
<p>Highly unstable man wants to drink puppy.</p> | |
</div> | |
<div class="article"> | |
<img src="puppy-yawn.jpeg"></img> | |
<p>Puppy wants to show friend this spot on his tongue.</p> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment