Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Positioning of elements HTML/CSS

Tags:

html

css

This is my first ever webpage:

https://karmah24.github.io/Coursera/mod2_sol/

In each of the sections the titles pizza, burger, beverages should be on the top right of the section. I've assigned each column: relative position, and the headers: absolute position. But this takes them out of normal document flow and when I view the page with different widths, the lorem epsum content moves up for different sizes.

How can I correct this? And why does the content in the paragraph tag move up for all the sizes since the header is taken out of the document flow?

Also how can I center the entire figure(image + caption)?

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: azure;
}
* {
    box-sizing: border-box;
}
h1 {
    text-align: center;
}
.row {
    width: 100%;
}
.title1, .title2, .title3 {
    padding: 1%;
    margin-left: 1%;
    margin-bottom: 1%;
    border-left: 4px solid black;
    border-bottom: 4px solid black;
    position: absolute;
    top: 0%;
    right: 0%;
}
.title1 {
    background-color: rgb(223, 209, 25);
}
.title2 {
    background-color: rgb(132, 214, 24);
}
.title3 {
    background-color: aqua;
}

@media (min-width: 992px) {
    .col_lg_4 {
        position: relative;
        float: left;
        width: 31.33%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    } 
}
@media (min-width: 768px) and (max-width: 994px) {
    .col_md_6 {
        position: relative;
        float: left;
        width: 48%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    }
    .col_md_12 {
        position: relative;
        float: left;
        width: 98%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    } 
}
@media (max-width: 767px) {
    .col_sm_12 {
        position: relative;
        float: left;
        width: 98%;
        padding: 1%;
        margin: 1%;
        border: 4px solid black;
        background-color: #909090;
    } 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MENU</title>
    <link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <div class="row">
        <section class="col_lg_4 col_md_6 col_sm_12">
            <header class="title1">PIZZAS</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
                <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
            </p>
            <figure>
                <img src="pizza.jpg" alt="pizza" width="50%" height="50%">
                <figcaption>Try our latest Supreme Pizza</figcaption>
            </figure>
        </section>
        <section class="col_lg_4 col_md_6 col_sm_12">
            <header class="title2">BURGERS</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
                <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
            </p>
            <figure>
                <img src="burger.jpg" alt="burger" width="50%" height="50%">
                <figcaption>Try our latest Supreme Burger</figcaption>
            </figure>
        </section>
        <section class="col_lg_4 col_md_12 col_sm_12">
            <header class="title3">BEVERAGES</header>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
                <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
            </p>
            <figure>
                <img src="beverages.jpg" alt="beverages" width="50%" height="50%">
                <figcaption>Try our Latest Chillers</figcaption>
            </figure>
        </section>
    </div>
</body>
</html>
like image 219
Karmah24 Avatar asked Jan 30 '26 22:01

Karmah24

2 Answers

  1. You can use float: right instead of position: absolute; so the text inside of the paragraph will float around your header.

  2. Setup margin and padding to your paragraph. The browser default is different from browser to browser.

  3. Don't use width="50%" height="50%" in img, they are outdated. Set it in CSS.

  4. Use text-align: center; in section figure to set the content to center. 

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: azure;
}

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

.row {
  width: 100%;
}

.title1,
.title2,
.title3 {
  padding: 1%;
  margin-left: 1%;
  margin-bottom: 1%;
  border-left: 4px solid black;
  border-bottom: 4px solid black;
  float: right;
}

.title1 {
  background-color: rgb(223, 209, 25);
}

.title2 {
  background-color: rgb(132, 214, 24);
}

.title3 {
  background-color: aqua;
}

section p {
  padding: 1%;
  margin: 0;
}

section figure {
  padding: 1%;
  margin: 0;
  text-align: center;
}

section img {
  width: 50%;
  height: auto;
}

@media (min-width: 992px) {
  .col_lg_4 {
    position: relative;
    float: left;
    width: 31.33%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
}

@media (min-width: 768px) and (max-width: 994px) {
  .col_md_6 {
    position: relative;
    float: left;
    width: 48%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
  .col_md_12 {
    position: relative;
    float: left;
    width: 98%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
}

@media (max-width: 767px) {
  .col_sm_12 {
    position: relative;
    float: left;
    width: 98%;
    padding: 0%;
    margin: 1%;
    border: 4px solid black;
    background-color: #909090;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MENU</title>
  <link rel="stylesheet" href="../mod2_sol/css/sytles.css">
</head>

<body>
  <h1>Our Menu</h1>
  <div class="row">
    <section class="col_lg_4 col_md_6 col_sm_12">
      <header class="title1">PIZZAS</header>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
        <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
      </p>
      <figure>
        <img src="pizza.jpg" alt="pizza">
        <figcaption>Try our latest Supreme Pizza</figcaption>
      </figure>
    </section>
    <section class="col_lg_4 col_md_6 col_sm_12">
      <header class="title2">BURGERS</header>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
        <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
      </p>
      <figure>
        <img src="burger.jpg" alt="burger">
        <figcaption>Try our latest Supreme Burger</figcaption>
      </figure>
    </section>
    <section class="col_lg_4 col_md_12 col_sm_12">
      <header class="title3">BEVERAGES</header>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <br> Error cupiditate ipsa sint iusto a voluptas quas quis,
        <br> ex nisi fugit placeat eius possimus impedit sed distinctio minus recusandae. Fugiat, modi.
      </p>
      <figure>
        <img src="beverages.jpg" alt="beverages">
        <figcaption>Try our Latest Chillers</figcaption>
      </figure>
    </section>
  </div>
</body>

</html>
like image 72
focus.style Avatar answered Feb 02 '26 12:02

focus.style

So first of all position: absolute removes the element out of the document flow, that means the space that the element take will be removed, so that's why other elements will move a little up.

So a way of setting the titles on the top right side and still take the space.

I will set the following for the parent element (section):

display: flex;
flex-direction: column;

And for the titles remove the position and top / left properties and add the following:

margin-left: auto;

When you set the margin-*direction*: auto it will move the element to the oposite direction.

Css flex module is a great way of creating layouts. Try learn it and it will make thing easier. source

Sign in to Comment

Related questions

How to get rid of the horizontal bar in my website

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!