What is the best way to position the bottom block?

I'm trying to create a template that looks like the image below:

https://i.sstatic.net/m6q0s.png

I managed to position the top square correctly, but I'm having trouble aligning the bottom one - I can't seem to move it to the bottom left corner.

Here is the code I'm using:

 <style>
    .red_top {
        background-color:red; 
        position:absolute; 
        width:65px; 
        height:65px; 
        z-index:-1;
        }
    .red_bottom {
        align:right; 
        verical-align:bottom; 
        background-color:red; 
        position:relative; 
        width:65px; 
        height:65px; 
        z-index:-1; 
        top:-35px;
    }
    .main_cont 
        {
            border:1px solid blue; 
            margin-top:25px; 
            margin-left:25px; 
            min-height:100px; 
            z-index:1; 
            background-color:#FFF;
        }
    </style>
    <body style="margin: 60px 50px;">
    <div style="width:100%; border:1px solid #000;">
        <div class="red_top">&nbsp;</div>
        <div class="main_cont">Content Here</div>
        <div class="red_bottom">&nbsp;</div>
    </div>

https://codepen.io/anon/pen/OxavGL

Any suggestions on how to properly position the red_bottom div?

htmlcss

Answer №1

    .blue_top {
        background-color: blue;
        position: fixed;
        width: 70px;
        height: 70px;
        z-index: -1;
    }
    .blue_bottom {
        background-color: blue;
        position: fixed;
        width: 70px;
        height: 70px;
        z-index: -1;
        bottom: 0;
        right: 0;
    }
    .main_content {
        border: 1px solid green;
        margin: 30px;
        min-height: 110px;
        z-index: 1;
        background-color: #F0F0F0;
    }
    <div style="width: 100%; border: 1px solid #bbb; position: relative;">
        <div class="blue_top">&nbsp;</div>
        <div class="main_content">Your Content Here</div>
        <div class="blue_bottom">&nbsp;</div>
    </div>

Answer №2

body {
  margin: 60px 50px;
}

.Wrap {
  position: relative;
  width: 100%;
}

.main_cont {
  position: relative;
  background-color: #FFF;
  border: 1px solid blue;
  margin-top: 25px;
  margin-left: 25px;
  min-height: 100px;
}

.main_cont::before,
.main_cont::after {
  content: "";
  position: absolute;
  background-color: red;
  width: 65px;
  height: 65px;
  z-index: -1;
}

.main_cont::before {
  top: -33px;
  left: -33px;
}

.main_cont::after {
  bottom: -33px;
  right: -33px;
}
<div class="Wrap">
  <div class="main_cont">Content Here</div>
</div>

Answer №3

Give this a shot:

  body {
      margin: 5%;
    }

    .Wrap {
      position: relative;
      width: 100%;
    }

    .main_cont {
      position: relative;
      background-color: #FFF;
      border: 1px solid blue;
      min-height: 100px;
  text-align: center;
    }

    .main_cont::before,
    .main_cont::after {
      content: "";
      position: absolute;
      background-color: red;
      width: 50px;
      height: 50px;
      z-index: -1;
    }

    .main_cont::before {
      top: -25%;
      left: -3%;
    }

    .main_cont::after {
      bottom: -25%;
      right: -3%;
    }
 <div class="Wrap">
      <div class="main_cont">Enter Content Here</div>
    </div>

Answer №4

CSS:

.main_cont::before {
    content: '';
    background-color: green;
    position: absolute;
    width: 70px;
    height: 70px;
    z-index: -2;
    top: 10px;
    left: 10px;
}

.main_cont::after {
    content: '';
    background-color: green;
    position: absolute;
    width: 70px;
    height: 70px;
    z-index: -2;
    bottom: 10px;
    right: 10px;
}
.main_cont {
    border: 2px solid red;
    margin: 30px;
    min-height: 120px;
    z-index: 2;
    background-color: #FAFAFA;
}

HTML:

<div style="width: 100%; border: 2px solid #333; position: relative;">
    <div class="main_cont">Different Content Here</div>
</div>

Answer №5

Check out this awesome code snippet: 

.mainDiv {
  position: relative;
  width: 500px;
  height: 700px;
  border: 1px solid black;
  background-color: white;
}

.red_top {
  background-color:red; 
  position:absolute; 
  left: -31px;
  top: -31px;
  width:65px; 
  height:65px; 
  z-index:-1;
}

.red_bottom {
  background-color:red; 
  position:absolute; 
  bottom: -31px;
  right: -31px;
  width:65px; 
  height:65px; 
  z-index:-1;

.main_cont {
  border:1px solid blue; 
  margin-top:25px; 
  margin-left:25px; 
  min-height:100px; 
  z-index:1; 
  background-color:#FFF;
}
<body style="margin: 60px 50px;">
<div class="mainDiv">
<div class="red_top"></div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"></div>
</div>

Answer №6

Here is a solution that allows you to create red boxes without the need for additional <div> elements. This method utilizes the :before and :after pseudo-elements.

div.container {
  border:1px solid #000;
  position:relative;
  width:100%; 
}
div.main {
  background:#fff;
  border:1px solid blue; 
  margin:33px;
  min-height:100px;  
  position:relative;
  width:auto;
}
.red-box:before, .red-box:after {
  background:red;
  content:"";
  height:65px;
  position:absolute;
  width:65px;
  z-index:-1;
}
.red-box:before { 
  left:0;
  top:0;
  transform:translate(-50%, -50%);
}
.red-box:after {
  bottom:0;
  right:0;
  transform:translate(50%, 50%);
}
<div class="container">
  <div class="main red-box">Content Here</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

Error in Reactive Form: Null Property Reading Issue

Issue: Encountered a Cannot read property errors of null error in the form group. I have implemented a reactive form with validation, but I keep running into this specific error. Here is the complete form control setup: <div class="container mt- ...

htmlangularangular-reactive-forms

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

How can I achieve a scrolling behavior similar to the one demonstrated here? When scrolling through the sidebar, I want it to continue scrolling until it reaches the end. After that, any further scrolling on the sidebar should scroll the main panel inste ...

javascripthtmlcssscroll

Tips and tricks for ensuring images maintain their aspect ratio and height when resizing for responsiveness

I am facing an issue with my two-column layout. One column contains an image and the other column has text and buttons with a fixed height. To ensure the image is responsive, I have set the width to 100% and height to auto. However, upon resizing, the aspe ...

htmlcssresponsive-design

Is it possible to create a replicating text box in AngularJS that multiplies when entering input

I am experimenting with creating a sequence of text boxes that dynamically generate new empty text boxes as the user enters information into each one. Each text box is required to have an ng-model value associated with it, and they should all be generated ...

javascripthtmlangularjs

Utilizing the power of JavaScript/JQuery to showcase a compilation of all input values within an HTML form

I'm struggling to showcase all the input values from my HTML form on the final page before hitting the "submit" button. Unfortunately, I am facing a challenge as the values are not appearing on the page as expected. Despite several attempts, the valu ...

javascriptjqueryhtmlflask-wtforms

Python: parsing comments in a cascading style sheet document

I am currently working on extracting the first comment block from a CSS file. Specifically, I am looking for comments that follow this pattern: /* author : name uri : link etc */ and I want to exclude any other comments present in the file, such as: /* ...

pythoncssregexcommentstext-processing

Do you think there is a more efficient way to solve this issue?

const [active, setActive] = React.useState(["active", "", "", "", ""]);``your unique text`` const hrefs = React.useMemo( () => ["/", "/about", "/skills", "/projects", "/contact"], [] ); React.useEffect(() => { setInterval(() => { ...

javascripthtmlreactjsmaterial-ui

Having issues with Inline-Block functionality?

I am facing alignment issues with an image and a container placed next to each other. The rest of my website uses inline-block without any problems. If someone could provide guidance on how to resolve this, it would be greatly appreciated. Below is the s ...

htmlcss

"Troubleshooting: Issues with jQuery Counter Functionality

Hey there, I'm new to JavaScript and jQuery! I've got this form set up with Bootstrap's disabled class: Note: the 'disabled' class in bootstrap properly disables and enables the button based on conditions. <form action="" met ...

javascriptjqueryhtmltwitter-bootstrap

Exploring design techniques in React Native

I am currently part of a team working on a react native project with multiple contributors. My goal is to find an effective way to segregate the styling tasks from coding, allowing UI developers to work independently without relying on code developers. In ...

cssuser-interfacereact-nativestyles

I'm facing an issue where TailwindCSS fails to stretch my VueJS application to full screen width

My components are all contained within a div with classes flex-row, w-screen, and content-center. However, when I switch to reactive/mobile mode on the browser, it only takes up about 2/3 of the screen and doesn't fill up the remaining space. Below i ...

javascripthtmlcssvue.jstailwind-css

What is the best way to dynamically adjust the height of an iframe based on its changing content

My webpage contains an iframe that loads content dynamically, and I want to center it on the page based on its height. The issue I'm facing is that while my code works well for increasing content heights, it fails to recognize when the content size de ...

javascriptjqueryhtmlcsscss-position

Achieving Full Row Height in Twitter Bootstrap using CSS Grid

Before jumping to conclusions and marking this question as a duplicate, I want to clarify that I have already explored all suggestions provided on Stack Overflow, including the use of display: table. Unfortunately, none of them seem to work smoothly with B ...

htmlcsstwitter-bootstrap

Activate a switch in a single table after its information has been transferred to a different table

I have a dilemma involving two tables - one displaying a list of items and the other serving as an empty favorites table. Users can select items from the first table and click 'Add' to move them to the favorites table. Once added, the 'Add& ...

javascripthtmldomecmascript-6html-table

Having trouble adjusting the appearance of the dropdown menu in Angular Material's Select component

I've been attempting to adjust the style of the overlay panel within an Angular Material's MdSelect component in order to change the default max-width property of 280px. I have tried various methods, such as using '!important' to overr ...

cssangulartypescriptsassangular-material2

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

javascriptphpcssajaxtinymce

Accessing the hidden input value of an HTML page in Android with DefaultHttpClient

I previously inquired about a similar issue, but did not provide enough information. So here is the question again, but this time with more detail. On a webpage with html, there exists: <input name="__RequestVerificationToken" type="hidden" value="the_ ...

androidhtmlregexsessionhidden

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

htmlcss

JavaScript - AngularJS HTML parser

I am working with an array that contains content along with HTML tags, and here is the code snippet: for (car in cars.parking[0]){ content.push('<br />'); for (token in cars.parking[0].now) { content.pus ...

javascripthtmlangularjs

Why isn't the JavaScript if statement working properly when checking the length?

Below is an if statement that I have devised: var TotalMoney=0; var Orbs=0; if (TotalMoney.length==2) { Orbs+=1; } The intention behind this code snippet is to increase the value of "Orbs" by 1 when the digit length of "TotalMoney" equals 2. However, it& ...

javascripthtmlcssif-statementconditional-statements