0

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

  1. An element with a heading and paragraphs, a floating element with an image, I want the image have 45% of the viewport width.

  2. The image also must to keep its position on the top right corner of the viewport.

  3. The element which has the paragraphs and the heading must to be to the left of the image

  4. 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>
Ana Todd
  • 3
  • 3
  • [Several ways to contain floated elements](https://pageaffairs.com/notebook/containing-floats/) – Chris L Jun 05 '20 at 23:21
  • I'm having trouble figuring out what you want. Both elements are different heights at different viewport widths and the `header` element size also depends on the amount of content and your font isn't changing size with the viewport. So when the viewport width is small, the `header` content is much larger than the image, so how do you want it vertically centered on the image then? Do you just want the content to start at the middle of the image? doesn't make sense. – Chris L Jun 05 '20 at 23:37
  • I put your code in a [jsfiddle](https://jsfiddle.net/MilkyTech/52mgkqw3/4/). Play with it and clarify what you are trying to accomplish. – Chris L Jun 05 '20 at 23:43
  • Right now the Image I have makes the header be quite big, the image determines the max height that the header can have in this moment, because of this the content could be in the middle of the image and because of this I get confused writing and I've explained bad my trouble, because I keep in mind the Idea of the conten being in the middle. – Ana Todd Jun 05 '20 at 23:52
  • The content is in a container provided by materialize, must be centered horizontally – Ana Todd Jun 06 '20 at 00:02
  • what do mean by "right now"? Are you talking about a fixed window width? Yes, at a large window width, the image is larger than the text and sets the height of the container. But you are using percentages for the width (45%, 45vw) so at a small window width, the image will be smaller than the text and the text will determine the height of the container (header) – Chris L Jun 06 '20 at 00:19
  • https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css – Chris L Jun 06 '20 at 00:20
  • Why aren't you using any of the provided grid system? Materialize already has a class for centering content in a div, `.valign-wrapper`. If you're interested in a solution that uses the framework rather than custom css, let me know... – Sean Doherty Jun 06 '20 at 15:59

1 Answers1

0

Your content can't be centered vertically until your .container element has a height defined.

I'll assume you want the .container to expand and fit the header vertically, so we can simply set its height to 100%; just be aware that then the height of the header needs to be defined.

Again you could set the height of the header to 100% and it will look to its parent to get its height. For the purposes of the exercise I've set a height of 100% on html, body, header and .container in the fiddle below. In this example, the CSS you had applied now works:

.desc {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

jsFiddle

(I've reduced the size of the font for h1 in my example so the centering effect is perceivable).

Obviously setting 100% height on every parent element all the way up the tree may not be a workable solution for you but at least it should help you understand why your vertical centering attempts haven't been working.

Luke
  • 2,823
  • 25
  • 34