Steps to design a text div that extends beyond the bottom boundaries

Question

Steps to design a text div that extends beyond the bottom boundaries

Can anyone help me troubleshoot this design code using Bootstrap 3.x? Specifically, I am facing an issue with the following div. Any suggestions?

Click here for more information.

img{max-width:100%;}
.mydiv{margin-bottom:20px;}
.mytext{
        position: absolute;
        top: 90%;
        right: 50%;
        -ms-transform: translateX(50%);
        transform: translateX(50%);
        width: 70%;
        background-color:#ff0000;
    }
   .myotherdiv{background-color:#00ff00;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-12 mydiv">
              <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="mypicture" />
              <div class="mytext">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                 
              </div>
         </div>

         <div class="col-xs-12 myotherdiv">
             My other div text. My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.
         </div>

html css twitter-bootstrap-3 absolute

Answer 1

Answer №1

To create a desired distance between two boxes, you can wrap the div with the class "col-xs-12 mydiv" and the div with the class "mytext" together. Apply the CSS property position: relative to the wrapper and adjust the margin-bottom as needed. Here is an example of how you can achieve this:

    .mytext{
    position: absolute;
    top: 90%;
    right: 50%;
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    width: 70%;
    }
    .myotherdiv{
    position:relative;
    }
    .wrapper{
    margin-bottom:50px;
    }

<div class="wrapper">
        <div class="col-xs-12 mydiv">
          <img src="picture.png" class="mypicture" />
          <div class="mytext">
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor                    invidunt ut labore
          </div>
        </div>
     </div>

     <div class="col-xs-12 myotherdiv">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
     </div>

Answer 2

To create a desired distance between two boxes, you can wrap the div with the class "col-xs-12 mydiv" and the div with the class "mytext" together. Apply the CSS property position: relative to the wrapper and adjust the margin-bottom as needed. Here is an example of how you can achieve this:

    .mytext{
    position: absolute;
    top: 90%;
    right: 50%;
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    width: 70%;
    }
    .myotherdiv{
    position:relative;
    }
    .wrapper{
    margin-bottom:50px;
    }

<div class="wrapper">
        <div class="col-xs-12 mydiv">
          <img src="picture.png" class="mypicture" />
          <div class="mytext">
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor                    invidunt ut labore
          </div>
        </div>
     </div>

     <div class="col-xs-12 myotherdiv">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
     </div>

Answer 3

Answer №2

To center a column using the position property, you can utilize the col-md-offset-** class. Here's a snippet demonstrating this:

.center {
    background: skyblue;
    color: white;
    position: relative;
    top: -50px;
}
.main{
    border: 1px solid red
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div>
      <img src="https://img.freepik.com/free-vector/plain-red-blurred-background_1035-3332.jpg?size=338&ext=jpg" style="width:100%;height:50vh">
      <div class="col-sm-4 col-md-offset-4 center text-center">
        <h2>Div1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        
      </div>
    </div>
    <div class="col-sm-12 main text-center">
        <h1>Other DiV</h1>
    </div>
  </div>
</body>

</html>

Answer 4

To center a column using the position property, you can utilize the col-md-offset-** class. Here's a snippet demonstrating this:

.center {
    background: skyblue;
    color: white;
    position: relative;
    top: -50px;
}
.main{
    border: 1px solid red
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div>
      <img src="https://img.freepik.com/free-vector/plain-red-blurred-background_1035-3332.jpg?size=338&ext=jpg" style="width:100%;height:50vh">
      <div class="col-sm-4 col-md-offset-4 center text-center">
        <h2>Div1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        
      </div>
    </div>
    <div class="col-sm-12 main text-center">
        <h1>Other DiV</h1>
    </div>
  </div>
</body>

</html>

Answer 5

Answer №3

To create a layout with fixed sizes, you can utilize the position:relative and position:absolute properties in combination, as demonstrated below:

.wrapper{
  width: 400px;
  height: 250px;
  position: relative;
}
.parent{
  width: 100%;
  height: 200px;
  background: gray;
}
.child{
  width: 50%;
  height: 100px;
  background: blue;
  position: absolute;
  bottom: 0;
  left: 25%;
}
.other{
  position: relative;
  width: 400px;
  height: 75px;
  background: green;
  margin-top: 10px;
}

<div class="wrapper">
  <div class="parent"></div>
  <div class="child"></div>
</div>
<div class="other"></div>
<p>Some additional content...</p>

Answer 6

To create a layout with fixed sizes, you can utilize the position:relative and position:absolute properties in combination, as demonstrated below:

.wrapper{
  width: 400px;
  height: 250px;
  position: relative;
}
.parent{
  width: 100%;
  height: 200px;
  background: gray;
}
.child{
  width: 50%;
  height: 100px;
  background: blue;
  position: absolute;
  bottom: 0;
  left: 25%;
}
.other{
  position: relative;
  width: 400px;
  height: 75px;
  background: green;
  margin-top: 10px;
}

<div class="wrapper">
  <div class="parent"></div>
  <div class="child"></div>
</div>
<div class="other"></div>
<p>Some additional content...</p>

Answer 7

Answer №4

Many thanks for your help! Here's the solution I came up with:

<div class="row justify-content-center align-items-center">

.text-container{
            background-color: #f9f9f9;
            padding: 20px;
            transform: translateY(50%);
            margin-top: -40px;
        }

Answer 8

Many thanks for your help! Here's the solution I came up with:

<div class="row justify-content-center align-items-center">

.text-container{
            background-color: #f9f9f9;
            padding: 20px;
            transform: translateY(50%);
            margin-top: -40px;
        }

Answer 9

Answer №5

If I comprehend your query correctly, adding a margin-top value to myotherdiv should successfully resolve this issue.

img {
  max-width: 100%;
}

.mydiv {
  margin-bottom: 20px;
}

.mytext {
  position: absolute;
  top: 90%;
  right: 50%;
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  width: 70%;
  background-color: #ff0000;
}

.myotherdiv {
  background-color: #00ff00;
  margin-top: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-12 mydiv">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="mypicture" />
  <div class="mytext">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore

  </div>
</div>

<div class="col-xs-12 myotherdiv">
  My other div text. My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.
</div>

Answer 10

If I comprehend your query correctly, adding a margin-top value to myotherdiv should successfully resolve this issue.

img {
  max-width: 100%;
}

.mydiv {
  margin-bottom: 20px;
}

.mytext {
  position: absolute;
  top: 90%;
  right: 50%;
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  width: 70%;
  background-color: #ff0000;
}

.myotherdiv {
  background-color: #00ff00;
  margin-top: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-12 mydiv">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="mypicture" />
  <div class="mytext">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore

  </div>
</div>

<div class="col-xs-12 myotherdiv">
  My other div text. My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.My other div text.
</div>

Steps to design a text div that extends beyond the bottom boundaries

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

What is the process for determining the area of the section?

I desire a smooth fade-in transition for the background image when the addClass function is

Show a row of pictures with overflow capabilities

The PHP-based registration process is malfunctioning

Sliding with JavaScript

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Design a fluid row that allows for horizontal scrolling with text alignment options on the left, center, and right side

Collapse all "Read More" buttons simultaneously using Bootstrap

contrasting ionic and android software development kits

Using Font Awesome Class Aliasing

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

Eliminating Google Adsense from Blog Posts

Iterating over a table and selecting a specific button on the rows that meet a specific condition

Adjacent components

Tips for keeping a div fixed at a specific scroll level

What could be the reason that the height: auto property is not creating a content area big enough to accommodate my content

Pagination functionality in TablePress allows for improved organization and