I want make a tribute page like this:
I'm having trouble adding text with a border next to my image. Im only able to add it below the caption but not next to the image (exactly like the tribute page example). I'd like to do this with only html and css
<!DOCTYPE html>
<html lang="en">
<Style>
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#main {
border-style: double;
text-align: center;
}
header {
text-align: center;
}
#image {
border: groove;
}
p {
border: black;
}
</Style>
<header>Crikey, mate</header>
<head>
<title id="tittle">Steve Irwin</title>
</head>
<body>
<div id="img-div">
<img id="image" alt="steve Irwin" src="Steve-Irwin.jpg">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
<main id="main">
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Irwin">Learn More</a>
</main>
</body>
</html>
Try this. It floats the image to the left and uses clear: both on the following text to ensure it goes below the image.
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#image {
border: groove;
max-width: 300px;
float: left;
}
#img-caption {
font-size: 300px;
}
.clear {
clear: both;
}
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.
In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);
Then the figcaption sits below and is as wide as the entire figure.
figure {
background-color: grey;
border: solid 1px black
}
#img-div {
display: flex;
padding: 8px
}
#image {
border: groove;
width: 200px;
}
#img-quote {
flex-grow: 1;
padding: 8px
}
figcaption {
background: white;
padding: 8px;
}
<figure>
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p>
</div>
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
</figure>
Related
I am using vue-slick-carousel package.
I have three main elements with which I want to interact. The first one is a picture with a character with the class slide__person The second one is a text with the class slide__text and a picture with a cloud with the class banner__slider-cloud.
I need the text to overlap the cloud, and the cloud, in turn, overlaps the picture with the person.
The cloud must remain static and cannot be moved inside the slider
I want to achieve something like this.
.banner__slider-cloud {
z-index: 1;
}
.slide__text {
z-index: 2;
}
.slide__person {
z-index: 0;
}
I tried different options, interacted with the z-index property, tried to apply the position property, but I could not solve this problem
You can also see my code in the online sandbox codesandbox
<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
export default {
name: "HelloWorld",
components: { VueSlickCarousel },
};
</script>
<template>
<div class="lending">
<main class="banner">
<div class="banner__slider">
<VueSlickCarousel :arrows="true" :dots="true">
<div class="slide">
<div>
<img
class="slide__person"
src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg"
/>
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
<div class="slide">
<div>
<img
class="slide__person"
src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg"
/>
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
</VueSlickCarousel>
<img class="banner__slider-cloud" src="../assets/cloud.png" />
</div>
</main>
</div>
</template>
<style>
img {
max-width: 100%;
}
.slick-slide > div {
display: flex;
justify-content: center;
}
.slide {
max-width: 500px;
border: 2px solid orange;
padding: 1rem;
}
.slide .slide__text {
border: 2px solid green;
padding: 8px;
}
.banner__slider-cloud {
border: 1px solid;
max-width: 960px;
margin: auto;
position: absolute;
right: 0;
left: 0;
top: 5%;
}
</style>
img {
max-width: 100%;
}
.slick-slide>div {
display: flex;
justify-content: center;
}
.slide {
max-width: 500px;
border: 2px solid orange;
padding: 1rem;
}
.slide .slide__text {
border: 2px solid green;
padding: 8px;
}
.banner__slider-cloud {
border: 1px solid;
max-width: 960px;
margin: auto;
position: absolute;
right: 0;
left: 0;
top: 5%;
}
<div class="lending">
<main class="banner">
<div class="banner__slider">
<div class="slide">
<div>
<img class="slide__person" src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg" />
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto, corporis deserunt distinctio dolor dolores ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
<img class="banner__slider-cloud" src="https://via.placeholder.com/500" />
</div>
</main>
</div>
z-index only works on elements within the same stacking context
By moving the cloud image element to be a sibling of the text and person image elements, their z-indexes will cause them to overlap the way you want
<div>
<img
class="slide__person"
src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg"
/>
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
<img class="banner__slider-cloud" src="../assets/cloud.png" />
</div>
.slide .slide__person {
position: relative;
z-index: 0;
}
.slide .slide__text {
border: 2px solid green;
padding: 8px;
position: relative;
z-index: 2;
}
.banner__slider-cloud {
border: 1px solid;
max-width: 960px;
margin: auto;
position: absolute;
left: 17%;
top: 5%;
z-index: 1;
}
updated codesandbox
Although I believe a full solution is impossible, due to the DOM manipulation that the Vue Slick Carousel library uses, there is a workaround to the z-index limitation using transform-style: preserve-3d.
So long as all the elements in the DOM hierarchy being manipulated have the preserve-3d CSS attribute applied (this property is not automatically inherited), you can use transform: translateZ() to sort elements' layering even when they are not siblings in the stacking context. See the edited snippet below.
img {
max-width: 100%;
}
/* ### Added this block ### */
.banner * {
transform-style: preserve-3d;
}
.slick-slide>div {
display: flex;
justify-content: center;
}
.slide {
max-width: 500px;
border: 2px solid orange;
padding: 1rem;
}
.slide .slide__text {
border: 2px solid green;
padding: 8px;
transform: translateZ(1px); /* ### Added this line ### */
}
.banner__slider-cloud {
border: 1px solid;
max-width: 960px;
margin: auto;
position: absolute;
right: 0;
left: 0;
top: 5%;
}
<div class="lending">
<main class="banner">
<div class="banner__slider">
<div class="slide">
<div>
<img class="slide__person" src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg" />
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto, corporis deserunt distinctio dolor dolores ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
<img class="banner__slider-cloud" src="https://via.placeholder.com/500" />
</div>
</main>
</div>
[Tree with all its leaves off the brancges[1]
[1]: https://i.stack.imgur.com/hfQGM.png
Im trying to make the image fit to the bottom left and top of the inside border, but not the right i just want it to fit in that certain space.
This is what i have so far...
<section class="winter">
<div class="outside-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="inside-border">
<div class="winter-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit
reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui
eaque.</p>
</div>
</div>
</div>
css
.outside-border{
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
background-color: white;
padding: 20px;
margin-bottom: 20px;
}
.section-heading{
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
.inside-border{
border: 2px solid var(--winter-primary);
display: flex;
align-items: center;
background-color: var(--winter-light);
}
.section-content{
background-color: var(--winter-light);
}
.winter-image{
display: inline-flex;
background-size: cover;
}
p{
margin-left: 1em;
text-align: center;
padding: 10px;
}
Now im just saying the same thing over and over again because im a stupid newbe coder that is having trouble with this problem. Stack overflow says i need to add more words because all i have is code right now.
try to put margin and padding 0.
hope this helps
.winter-image{
display: inline-flex;
background-size: cover;
margin: 0;
padding: 0;
}
This is my first ever webpage:
https://karmah24.github.io/Coursera/mod2_sol/
In each of the sections the titles pizza, burger, beverages should be on the top right of the section. I've assigned each column: relative position, and the headers: absolute position. But this takes them out of normal document flow and when I view the page with different widths, the lorem epsum content moves up for different sizes.
How can I correct this? And why does the content in the paragraph tag move up for all the sizes since the header is taken out of the document flow?
Also how can I center the entire figure(image + caption)?
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1, .title2, .title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
position: absolute;
top: 0%;
right: 0%;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 1%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza" width="50%" height="50%">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger" width="50%" height="50%">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages" width="50%" height="50%">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
You can use float: right instead of position: absolute; so the text inside of the paragraph will float around your header.
Setup margin and padding to your paragraph. The browser default is different from browser to browser.
Don't use width="50%" height="50%" in img, they are outdated. Set it in CSS.
Use text-align: center; in section figure to set the content to center.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: azure;
}
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.row {
width: 100%;
}
.title1,
.title2,
.title3 {
padding: 1%;
margin-left: 1%;
margin-bottom: 1%;
border-left: 4px solid black;
border-bottom: 4px solid black;
float: right;
}
.title1 {
background-color: rgb(223, 209, 25);
}
.title2 {
background-color: rgb(132, 214, 24);
}
.title3 {
background-color: aqua;
}
section p {
padding: 1%;
margin: 0;
}
section figure {
padding: 1%;
margin: 0;
text-align: center;
}
section img {
width: 50%;
height: auto;
}
#media (min-width: 992px) {
.col_lg_4 {
position: relative;
float: left;
width: 31.33%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (min-width: 768px) and (max-width: 994px) {
.col_md_6 {
position: relative;
float: left;
width: 48%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
.col_md_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
#media (max-width: 767px) {
.col_sm_12 {
position: relative;
float: left;
width: 98%;
padding: 0%;
margin: 1%;
border: 4px solid black;
background-color: #909090;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MENU</title>
<link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title1">PIZZAS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="pizza.jpg" alt="pizza">
<figcaption>Try our latest Supreme Pizza</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_6 col_sm_12">
<header class="title2">BURGERS</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="burger.jpg" alt="burger">
<figcaption>Try our latest Supreme Burger</figcaption>
</figure>
</section>
<section class="col_lg_4 col_md_12 col_sm_12">
<header class="title3">BEVERAGES</header>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br> Error cupiditate ipsa sint iusto a voluptas quas quis,
<br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
</p>
<figure>
<img src="beverages.jpg" alt="beverages">
<figcaption>Try our Latest Chillers</figcaption>
</figure>
</section>
</div>
</body>
</html>
So first of all position: absolute removes the element out of the document flow, that means the space that the element take will be removed, so that's why other elements will move a little up.
So a way of setting the titles on the top right side and still take the space.
I will set the following for the parent element (section):
display: flex;
flex-direction: column;
And for the titles remove the position and top / left properties and add the following:
margin-left: auto;
When you set the margin-*direction*: auto it will move the element to the oposite direction.
Css flex module is a great way of creating layouts. Try learn it and it will make thing easier. source
Yes you should use CSS flex module or bootstrap 4, you can achieve this easily.
In the current code you should use px instead of % and column top padding should be similar of button height.
Can someone please help me?!
I'm trying to code a PSD file to HTML and CSS, but I'm struggling with one of the sections. Here's an image of what I want to do:
Click Here
The problem is I don't know how to put the image in the timeline line. I tried to add the image in the ::after psuedo, but I don't think this is the right way of doing that.
This is my HTML Code :
<section class="about">
<div class="wrapper">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<div class="container left">
<div class="content">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h5>January 2011<br> Facing Startups Battles</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</section>
This is my CSS code:
.about .wrapper{
padding: 80px 10%;
text-align: center;
position: relative;
}
.about .wrapper::after{
content: '';
position: absolute;
top: 200px;
bottom: 0;
width: 6px;
background: red;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.about .container{
position: relative;
width: 50%;
top: 60px;
margin: 0 0 60px 0;
}
.about .container::after{
content: 'How Can I Add an Image Here in this circle?';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
top: 20px;
right: -104px;
background-color: blue; /* Just because there is no image */
background-image: url(assets/img/about-1.png);
background-repeat: no-repeat;
background-size: cover;
z-index: 2;
}
.left{
text-align: right;
}
.right{
text-align: right;
}
.content{
padding: 30px 0px 80px 0px;
}
.left .content{
padding-right: 140px;
}
.right .content{
padding-left: 140px
}
.right{
text-align: left;
left: 50%;
}
.right:after {
left: -104px;
}
I think this is called a timeline, there is a lot of tutorials talking about how to do something like this, but I don't know how to make the images in the timeline line. Can you please help me do this?
Thanks
To build this, you could use css grid layout (guide: https://css-tricks.com/snippets/css/complete-guide-grid/)
Treat each of the content+image as a row in the layout. And each row as a container for a grid.
You can visually break every row down to 3 columns. One column for left-side content, the second one for the image and the third one for right-side content.
Example css grid for a layout like this:
.grid-container {
display: grid;
grid-template-columns: 1fr 10em 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content-left image content-right";
text-align: center;
}
.content-left { grid-area: content-left; background: lightblue; }
.image { grid-area: image; background: lightgreen; }
.content-right { grid-area: content-right; background: lightblue; }
<div class="grid-container">
<div class="content-left">Left content</div>
<div class="image">Image</div>
<div class="content-right">Right content</div>
</div>
(grid generated with: https://grid.layoutit.com/)
To alternate between content on the left and on the right, you can use css even/odd selectors (How can I style even and odd elements?) to set which grid area is used for the element.
Example:
I've built an example of a timeline layout for this answer which you can find at https://codepen.io/hendrysadrak/pen/VwLEraz
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title></title>
</head>
<body>
<section class="about">
<div class="wrapper">
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div id="container">
<div class="row">
<div id="col1" class="col right">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
<div id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
</div>
<div class="row2" >
<div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
<div id="col4" class="col left">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
in main.css file:
.about .wrapper{
padding: 80px 10%;
text-align: center;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.row {
width: 59%;
margin-right: 41%;
display: flex;
}
.row2 {
width: 59%;
display: flex;
margin-left: 41%;
}
.col {
flex:1;
}
.col.left {
text-align: left;
}
.col.right {
text-align: right;
}
#col2 {
flex-basis: 30%;
}
#col1 {
flex-basis: 70%;
}
#col3 {
flex-basis: 30%;
}
#col4 {
flex-basis: 70%;
}
.img {
margin: 10% 5%;
width: 90%;
border-radius: 50%;
}
#container {
background-image: linear-gradient(lightgrey,lightgrey);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: center center;
}
put this in assets/img/about-1.png
I'm trying to:
center a container div which contains 2 inline elements: Another div, and a title.
The title can be any length.
The elements must be next to each other.
The text must be left aligned.
The div must be vertically aligned to the center of text.
This is the aim:
This is what I have so far.
HTML
<div class="container">
<div class="container">
<div class="box"></div>
<h2>This is my title</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
<div class="container">
<div class="box"></div>
<h2>This is another title. It could be any length. Any length at all.</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsum reprehenderit ipsam hic adipisci ex obcaecati asperiores ab rerum, incidunt eius eligendi ea, odit, maiores fugit cumque modi, facere laudantium.</p>
</div>
CSS
.container{
width: 80%;
height: auto;
margin: 0 auto;
background-color: rgba(150,100,200,0.8);
text-align: center;
padding: 1em;
p{
text-align: left;
}
}
.box{
display: inline-block;
width: 3em;
height: 3em;
background-color: lightblue;
vertical-align: middle;
}
h2{
display: inline-block;
width: calc(100% - 4em);
margin: 0 auto;
text-align: left;
}
And here it is in a codepen
Help much appreciated.
Here is a solution with display: table.
Edit - Improved
Have a fiddle!
HTML
<div class="container">
<div class="heading">
<div class="box">
<div></div>
</div>
<h2>This is my title</h2>
</div>
<p>Content</p>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.box {
display: table-cell;
vertical-align: middle;
}
.box div {
width: 3em;
height: 3em;
background-color: lightblue;
}
h2 {
display: table-cell;
vertical-align: middle;
padding: 0 0 0 10px;
text-align: center;
max-width: 400px;
}
.heading {
display: table;
margin: 0 auto;
}
p {
text-align: center;
}
Like this?
http://codepen.io/anon/pen/pfbvH?editors=110
I created a class "title-box" and made the square and h2 inside table cells. The light blue square scales with the height of the header:
.title-box {
background-color: rgba(150,100,200,0.8);
margin: 0 auto;
padding: 1em;
display: table;
}
.box{
width: 3em;
height: 3em;
background-color: lightblue;
display: table-cell;
}
h2{
margin: 0 auto;
text-align: left;
display: table-cell;
padding: 10px;
}