Understanding CSS positioning better

I am currently working on the product page project for the web design certification. I have continued to struggle understanding how elements are positioned, and this issue finally pushed me to ask for help. Here is my current project: https://codepen.io/recon14193/pen/zYGPyNz

I am trying to get it sort of a logo layout I get you could say. Essentially, I am trying to place the title, Cross Product, next to the image. I have placed them inside a parent div that I called company in hopes to maybe to a grid or inline-block, but I have had no success changing their position. When I do inspect element, it doesn’t even appear that they are in that element even though they are clearly nested there in the code. Can someone help? I am completely lost and frustrated.

If you want to have a grid or flexbox, you need to explicitly specify that.
I suggest flexbox here.

Try to copy my playground and learn a bit more about how the boxes behave:
https://codepen.io/beiti/pen/KKpybMp

There is a very good overview here explaining the parent and child elements:

For your website:
I did some changes - is that what you are looking for?

<body>

  <!-- You could leave the full-page out and style body instead -->
  <div id="full-page">

    <!-- Here is the start of "company" div 
         if you want to have control over individual
         blocks, you need to wrap each of them.
         try wrapping the title separately from the image
         and place them into a header -->
    <div id="header">

      <!-- no need for emph - you can style h1 separately -->
      <h1 id="title">Cross Products</h1>

      <div id="cross-image-section">
        <img id="cross-image"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Cross_product_vector.svg/1200px-Cross_product_vector.svg.png"
          atl="cross product image">

      </div>

      <!-- this is the end of your "header" div -->
    </div>

</body>

Here is the CSS section I added. You don’t need most of your styles.

/* Try to organise your css along the html file
   so you have it easier in reviewing it!

   also learn about comments, especially in the beginning
   so you can better understand what you are doing */

#header {
  /* style your header here */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#title {
  /* style your title here */
}

#cross-image {
  /* style your image here; */
  max-width: 300px;
  min-width: 200px;
}

Flex gird wasn’t exactly what I was looking for, but the article helped immensely. I have things setup nicely now, and I really like how it’s turning out so far. Thank you for the help.

1 Like