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

Selection of child elements using CSS selectors

Distinguishing each unique JavaScript property within an array of objects

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Creating a text file while in a suspended state within the event handler on Windows 8 using HTML5

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

Do XAML-based apps on Windows 8 provide a noticeable speed advantage over those built with HTML and CSS?

Tips for resizing an image instead of a line in HTML5 canvas

The modal box should adjust its height to perfectly accommodate the content within

Ways to transfer data from TypeScript to CSS within Angular 6

Echoing data from an input form is not possible with an associative array

Sending chosen choice to controller method

How to access HTML content in Python web scraping with a delay?

Tips for returning an element to its starting position following animation

Tips for Minimizing DIV Space with the Flex Property

On the second attempt, Firefox is able to drag the div element smoothly by itself

Show identification as an alternative term in the chart

Is there a way to narrow down the font choices using HTMLPurifier?

Populating a Listview in jqueryMobile with dynamic elements

Show the entire background photo

You can use AJAX, JQuery, or JavaScript in PHP to upload a total of 7 files by utilizing 7 individual file input