Any suggestion of how can I make this layout task on comments is welcome..
I don't want to use javascript, I want to maintain this layout until 994px
of wide.
I'm practicing CSS and I'm implementing a web layout. The layout has the following
An element with a heading and paragraphs, a floating element with an image, I want the image have
45%
of the viewport width.The image also must to keep its position on the top right corner of the viewport.
The element which has the paragraphs and the heading must to be to the left of the image
The element with heading and paragraphs is in a container provided by materialize framework.
Image and the element with paragraphs an heading are inside a container, a header
element to be specific.
I have some troubles, to carry the image to the right, I'm using float
property and the header
have display: flow-root
to contain the floated element.
With the height increased thanks to the floated image, then I've tried to use the following code to center vertically the element with the paragraphs and heading.
position: relative
top: 50%
transform: translateY(-50%)
It haven't work, the top: 50%
doesn't work, seems like the height doesn't increment even with the floated image adding more height to the header
.
Another thing that I've tried has been to set the height of the element with heading an paragraphs to 100% (again expecting the header's height can be included in that percentage calculation) then display: flex; align-items: center
and I added a wrapper element to make it flex-item
but also haven't work.
What can I do to center vertically the element with the paragraphs and heading?
I need the image always have the 45% of the viewport width, I don't want a size in pixels.
The full code is this:
*{
margin: 0;
}
.header{
display: flow-root;
}
/* Image floting to the right, because his parent element have float: right ( .float class) */
img{
width: 100%;
}
.float{
float: right;
width: 45vw;
z-index: 1;
}
.desc{
padding-top: 12%;
padding-bottom: 12%;
}
.desc > div{
width: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!--Header with display: flow-root to contain the floating element --!-->
<header class="header">
<!--Image floating to the right---!-->
<div class="float">
<img src="http://demo.themeies.com/leospa/images/spa.png">
</div>
<!--The contents of this container must to be centered verticcally---!-->
<div class="container">
<div class="desc">
<div>
<h1 class="header__headingPage">
Beauty and success starts here. It's Overwhelming this layout
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia saepe omnis consectetur. Perferendis in, dolorem ex rerum quo reprehenderit sit, eveniet ducimus illum distinctio optio cum magni voluptate, enim eum.
</p>
</div>
</div>
</div>
</header>