CODEWITHSUNDEEP
htmlcss
WhiplashGamz
WhiplashGamz

Reputation: 79

Description box not rendering correctly

So i'm trying to make a description box with this layout:

Description item layout

it's supposed to be like a preview for an article like shown above. so far this is my code

* {
  border: 2px solid black;
  padding: none;
  margin: none;
  overflow: show;
}

.descripion {
  position: relative;
  width: 100%;
  height: 150px;
  /* max-height:; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 10px;
}


/* fixed */

.descripion .image-cover {
  position: absolute;
  width: auto;
  height: 100%;
  left: 0%;
}

.descripion .image-cover img {
  position: absolute;
  width: auto;
  height: 100%;
  left: 0%;
}

.descripion .title {
  position: absolute;
  left: 90%;
  top: 0%;
  width: 100%;
}


/* fixed */
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>

</head>

<body>
  <div class="descripion">
    <img class="image-cover" src="https://visionjams.epizy.com/favicon.ico" alt="Visionjams logo" />
        <h1 class="title">
            Visionjams is coming soon
        </h1>
        <p class="summary">some text </p>
        
  </div>
</body>

</html>

I want to keep it responsive but I can't seem to properly position everything, the divs seem to ignore the parent div and screw up the positioning. is there anything i'm doing wrong?

Upvotes: 0

Views: 65

Answers (3)

tacoshy
tacoshy

Reputation: 13012

Here is a flexbox-approach which works cleaner and completely responsive:

.description-box {
  display: flex;
  height: 150px;
  padding: 10px;
  background-color: lightgrey;
  box-sizing: border-box;
  border-radius: 10px;
}

.description-box > div {
  flex-grow: 1;
}

.description-box > img {
  height: 130px
  width: 130px;
  margin-right: 10px;
  border-radius: 5px;
}

.description-box h1,
.description-box p  {
  margin: 0;
}

.description-box p {
  padding: 5px;
  background-color: grey;
  border-radius: 5px;
  height: calc(100% - (2em + 15px));
}
<div class="description-box">
  <img src="https://via.placeholder.com/300x300.jpg">
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
</div>

It works by delcaring the container as flexbox with: display: flex;. As such the image and the following element will put at the same line. You use flex-grow: 1; to fill the remaining space.

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15223

Your css contained an error:

.descripion .image-cover img {}

Here you specify the same element as parent-child. But this does not affect the construction (usual note).

Here's a simple solution using your code and flex rule.

* {
    border: 2px solid black;
    padding: none;
    margin: none;
    overflow: show;
}

.descripion {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 150px;
    margin: 10px;
}

.descripion .image-cover {
    width: auto;
    height: 100%;
}

.descripion .title,
.descripion .summary {
    flex: 1;
    margin: 0;
}
<div class="descripion">
    <img class="image-cover" src="https://visionjams.epizy.com/favicon.ico" alt="Visionjams logo" />
    <h1 class="title">
        Visionjams is coming soon
    </h1>
    <p class="summary">some text</p>
</div>

Upvotes: 1

scrummy
scrummy

Reputation: 795

Here you go

.wrapper {
        padding: 20px;
        border-radius: 10px;
        border: 1px solid red;
        display: inline-block;
        width: 250px;
    }

    .leftimg {
        border: 1px solid green;
        float: left;
        margin-right: 10px;
    }

    .leftimg img {
        width: 75px;
    }

    .righttitle {
        border: 1px solid yellow;
        padding: 10px;
        float: right;
    }
    .rightMain {
        float: right;
        border: 1px solid black;
        padding: 10px;
    }
<div class="wrapper">
        <div class="leftimg">
            <img src="https://i.sstatic.net/MCPc7.png?s=328&g=1">
        </div>
        <div class="righttitle">
            Type text here
        </div><br>
        <div class="rightMain">
            Lorem ipsum
        </div>
  </div>

Upvotes: 4

Related Questions