CODEWITHSUNDEEP
htmlcssreactjs
TheNoobDeveloper0299
TheNoobDeveloper0299

Reputation: 767

Text in a div crosses its boundaries and text padding not working

I am trying to create a part of my website,

Here is the code:

import React from 'react';
import './stylesheets/BeyondHelloWorld.css';

import BHW from './assets/bhw.png';

function BeyondHelloWorld() {
    return (
        <div className="mainDiv">
            <div className="card">
                <div className="cardContainer">
                    <div style={{height: "100%", display: "block"}}>
                        <img src={BHW} className="bhwImage"/>
                    </div>
                    <div class="bhwText">
                        <span className="bhwTitle">BeyondHelloWorld</span>
                        <span className="fadedTitle">Beyond</span>
                        <span className="bhwDescription">BeyondHelloWorld is a learning community for budding programmers. It is aimed at equipping amateurs with easy knowledge of the tech world through engaging content like New Tech information, tips & tricks & BTS of a developers life!</span>
                        <span className="bhwDescription">A lot of community problems can be solved using technology. BeyondHelloWorld aims to influence non-programmers into the world of programming.</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default BeyondHelloWorld

If you see the span bhwDescription, it is inside bhwText div which is inside cardContainer. Now I have a picture on the left with classname bhwImage

When the text exceeds the height of this image, the text starts from the left of the cardContainer, but I want it to start from the starting edge of the bhwText.

Example: Example of how it should look like

But with my code, What it looks like: What it looks like.

What am I doing wrong? Also, if you notice, the fadedTitle and bhwTitle are not exactly aligned. I want them all to start where the picture starts. But something is going off. Even if I keep the padding/margin same, even then they have different starts.

Here is the css:

.mainDiv {
  width: 100%;
  padding: 50px;
  background-color: #1e3512;
}

.card {
  background-color: #1e3512;
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.48);
  padding: 0;
  overflow: hidden;
}

.cardContainer {
  margin: 0;
  padding: 0 20px 0 0;
  width: 100%;
}

.bhwImage {
  height: 18vh;
  object-fit: contain;
  margin: 40px;
  border: 5px solid #fff;
  float: left;
}

.bhwText {
  margin-top: 20px;
  color: #ffffff;
}

.bhwTitle {
  font-size: 3.5rem;
  font-weight: 600;
  display: block;
  margin-bottom: 20px;
}

.fadedTitle {
  position: absolute;
  top: 25px;
  font-size: 150px;
  line-height: 75px;
  opacity: 0.1;
  font-weight: 900;
}

.bhwDescription {
  display: block;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 500;
  word-wrap: break-word;
}

Upvotes: 3

Views: 774

Answers (2)

Matthew Dangle
Matthew Dangle

Reputation: 416

The reason why the content runs underneath the image is because its style is float: left;, and your .bhwText class has a width of 100% because it's a block element. div elements are generally display: block; by default. This means .bhwText width is 100% of the parent container by default. The text will fill up space where available in it's container; including below the image.

To fix this issue, add left padding to the .bhwText class. Something like this example here.

.bhwText {
    margin-top: 20px;
    color: #ffffff;
    padding: 0 0 0 200px;
}

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9769

Add display:flex to your .cardContainer class

.cardContainer {
    margin: 0;
    padding: 0 20px 0 0;
    width: 100%;
    display: flex;
}

and remove width:100% from .mainDiv class

.mainDiv {
    /* width: 100%; */      remove this
    padding: 50px;
    background-color: #1e3512;
    display: flex;
}

Live Demo

Upvotes: 2

Related Questions