How to position text on the center right of a section?

HTML-CSS
1

image
image1904×674 56.6 KB

heres the code:

2

I want to do it without the big boxes

3

Hi @peace232000,

It seems that you have made some change. I would advice you to not use the float approach to position your elements. Do you know something about Flexbox or Grid?

4

Not really? I only know little about flex.

5

The Responsive Web Design certification from FFC treats the Flexbox (if you want to refresh your knowledge about it). It could be interesting to use this in your project and then position easily your elements.

You can also try something right now. Put in comments the two float properties you defined in your .right and .left classes. Then, add the property/value in your .about class: display: flex;

You will see, by default, the same result that you had, except that yours two p tags will be reversed. If you want to change it, you can add the property/value order: 2; to your .right class.

.about {
  display: flex;
  margin: 0%;
  height: 500px;
  background-color: pink;
  border: #000;
}

.right {
  /*float: right; */
  order: 2;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

.left {
  /* float: left; */
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

This works because by default flex aligns the elements of the block in row. You can try to discover some properties related to Flexbox such as justify-content, flex-direction, align-items, and you will see that it is much easier to work with Flexbox than other types of positioning approaches.

What I explained is just one way to do :slight_smile:

6

You can do it by flexbox.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.