the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with:

<html lang='es'>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css">
        <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
        <script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
        <script src="bootstrap337/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            * {
            padding:0.5%;
            }
        </style>
    </head>
    <body>
        <div class='col-md-12' style='background-color:#DDD'>
        <h1 class='text-center'>Welcome to the website</h1><hr/>
        </div>
        <hr/>
        <div class='col-md-3' style='background-color:#DDD'>
        <p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis. Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada urna tempor. In eget massa ligula..</p>
        </div>
        <div class='col-md-6' style='background-color:#EEE'>
            <div class='col-md-6' style='background-color:#AAA'>
                <p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
            </div>
        <p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt. Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
        </div>
        <div class='col-md-3' style='background-color:#DDD'>
        <p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo, id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
        </div>
    </body>
</html>

The issue I'm facing is that I want the text outside the inner div to have proper right padding, as shown in the provided image.

Have any suggestions on how to fix the text right padding?

Link to Image displaying the issue

htmlcss

Answer №1

Ensure that the element has a margin set to the right/bottom. 

.in-text-block {
  margin: 0 1em 1em 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang='es'>

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
  <script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
  <script src="bootstrap337/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
            padding:0.5%;
            }
  </style>
</head>

<body>
  <div class='col-md-12' style='background-color:#DDD'>
    <h1 class='text-center'>Welcome to the website</h1>
    <hr/>
  </div>
  <hr/>
  <div class='col-md-3' style='background-color:#DDD'>
    <p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis.
      Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada
      urna tempor. In eget massa ligula..</p>
  </div>
  <div class='col-md-6' style='background-color:#EEE'>
    <div class='col-md-6 in-text-block' style='background-color:#AAA;'>
      <p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
    </div>
    <p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.
      Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies
      fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
  </div>
  <div class='col-md-3' style='background-color:#DDD'>
    <p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo,
      id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
  </div>
</body>

</html>

Answer №2

Your code seems to have numerous issues that need addressing.

When utilizing Bootstrap, it is essential to enclose all content within a "container".

Within the container, create a "row", and then organize your content into columns inside the rows.

For instance:

<div class="container">
      <div class="row">
        <div class="col-xs-12">
         Some text
        </div>
      </div>
    </div>

To maintain proper structure, ensure that you nest columns inside rows and vice versa (or inside containers).

This practice enhances the functionality of your webpage as Bootstrap's paddings and margins complement each other seamlessly.

If you wish to add padding to a specific div, avoid overriding bootstrap classes or applying padding globally using *. Instead, create a new class for the desired div and assign padding solely to that class.

For example:

`<style>
 .extra-padding {
   padding: 20px;
  }
 </style>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
     <div class="row">
      <div class="col-xs-3">
      </div>
      <div class="col-xs-9 extra-padding">
      </div>
     </div>
    </div>
  </div>
</div>`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator. <Tabs defaultActiveKey="signup_renter" i ...

cssreactjsbootstrap-4tabsreact-bootstrap

The dropdown menu in Bootstrap 4 has non-functional links

Attempting to create a mega menu using Bootstrap. Started with dropdown menu code and made some modifications, but encountering issues where the links in the dropdown don't work properly unless opened in a new tab. When clicking on a link, it closes t ...

htmlcssdrop-down-menubootstrap-4

Zoomsounds: Injecting fresh content into div using data-source attribute

Currently, I am utilizing a javascript audio player called ZoomSounds. It generates circular play button divs and injects content into them using the following code: <div id="ap3" class="audioplayer-tobe skin-minimal" style="po ...

javascriptjqueryhtml

Broken CSS dropdown menu issue

Recently, I encountered an issue with a hoverable drop-down menu that has been functioning smoothly for years. After adding a new sub link, the code broke. Here is the code for the menu: #divMenu, ul, li, li li { margin: 0; padding: 0; } #divMenu { ...

htmlcssdropdown

Issue with the Navigation in CSS and jQuery

I'm struggling to understand a problem with the desktop navigation on this website, specifically in Safari on certain pages. The issue seems to only occur on Safari for Windows, Mac Desktop, and Mac Laptop. Interestingly, the navigation works perfect ...

jqueryhtmlcsssafarinavigation

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

Names picked at random and presented in the innerHTML

I am currently working on a project that involves displaying random names from an array in a text area named "textbox". Currently, I am using math.random() to pick a name randomly, but it only generates a new random name when the page is reloaded. How ca ...

javascriptphpjqueryhtml

What is the process for adding CSS to a Zend project?

I am encountering an issue with appending images or CSS files in my Zend project. I have placed my CSS file in the following directory: project/public/css/style.css Unfortunately, when attempting to include this CSS file on my page, it does not work as e ...

cssimagezend-framework

Tips for syncing HTML Canvas to track the mouse's X and Y position accurately across various screen resolutions

I'm facing an issue with my canvas game where the onclick buttons are redirecting to another menu. However, when I open the Canvas on a monitor with a different resolution, all the X & Y coordinates change and nothing works as expected. Is there a wa ...

javascripthtmlcanvas

Dynamic image swapping using JSON key in Angular

Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...

javascripthtmlangularjsjsonimage

How should text inputs be positioned?

I'm not very experienced with forms, so I'm a bit confused about what's happening here. I'm attempting to position a text input inline with a button, but it doesn't seem to be working. You can view the code I'm using here: htt ...

htmlcssforms

Presentation - hyperlink only functioning for final slide

I have a question about Lean Slider, which you can check out at My goal is to link each slide to a different URL. However, I'm facing an issue where only the code in the last slide seems to be executed and applied to all other slides. For example, if ...

javascriptjqueryhtmlslideshow

Issues with the styling of the side navigation bar

How can I center the paragraph content within the .main-content div located to the right of the side navigation? When I apply margin: 0 auto, nothing happens. I believe my CSS is incorrect, but I'm unsure how to correct it. Additionally, I would like ...

htmlcss

Is there a way for me to instruct jQuery to revert an element back to its initial value, prior to any dynamic alterations?

My question is regarding changing the content of a div using the `html()` method in JavaScript. I am currently working on implementing a "cancel" button and would like to revert the content back to its original value without having to completely reset it w ...

javascriptjqueryhtml

Looping through PHP to set the background color of a map

A basic code I have writes out a 'map' or grid. My goal is to define specific areas - for example, if the value for $i or $j equals 1, it should mark the edge of my 'map' by setting the cell's class to 'edge', which curre ...

phphtmldictionaryhtml-table

What is the best way to create some distance between a div element and the bottom of the body?

Hello, I am attempting to center a div within my body. The div has a minimum height of 400px, but its size can expand based on the content it holds. When I add more content to the div, it grows accordingly, but it ends up touching the bottom of the div. I ...

htmlcss

Enhance functionality in JavaScript by accessing the return value from a function

I'm trying to achieve the same outcome using a different method. The first approach is functioning correctly, but the second one is not: <script> function hello(){ var number = document.getElementById("omg").innerHTML; if(numbe ...

javascripthtmldom-events

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

javascripthtmlcssreactjsjsx

How can I convert the left links in my navigation bar to a CSS drop-down menu to make it more responsive on small screens?

Here is the structure of my HTML (at the top): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></s ...

javascriptjqueryhtmlcssmobile

A compatibility issue between jQuery and Internet Explorer 7

, you can find the following code: $("body").delegate('area[id=area_kontakt]','mouseover mouseleave', function(e){ if (e.type == 'mouseover') { $("#kontakt_tip").css('display','block'); } else { $( ...

jqueryhtmlcsscross-browserinternet-explorer-7