Setting a precise length for CSS borders in nested elements

Question

Setting a precise length for CSS borders in nested elements

I have a series of nested div-elements organized like this

<div class="main">
    <div class="sub1">
        <div class="sub2">
            Hello Worlds!!
        </div>
    </div>
</div>

They come with the following styles

.main {
    width:200px;
    border-bottom : solid 1px #0000FF;
 }

.sub1 {
    width:300px;
    border-bottom : solid 3px #00FF00;
}

.sub2 {
    border-bottom : solid 3px #FF0000;
}

Wondering if there is a way to make the border length of the "sub2" class 200px, matching that of the main class?

Here is the example: http://jsfiddle.net/1Lygjmvj/

html css

Answer 1

Answer №1

To achieve this, the most effective approach is to simply assign a width of 200px to the .sub2 element. Since you are already aware of the width of your .main element, there is no need to complicate things.

Your CSS styles should be straightforward like so:

.main {
    width:200px;
    border-bottom : solid 1px #0000FF;
}

.sub1 {
    width:300px;
    border-bottom : solid 3px #00FF00;
}

.sub2 {
    border-bottom : solid 3px #FF0000;
}

However, if it's absolutely necessary to adjust the width based on the parent element due to its dynamic width, JavaScript will come to the rescue. If you are using jQuery, you can utilize this snippet:

$(function () {
    var elements = $(".sub2");
    for (var i = 0; i < elements.length; i++) {
        $(elements[i]).width( $(elements[i]).parent().parent().width() );
    }
});

This script will dynamically set the width of all elements with the .sub2 class to match the width of their parent element upon page load.

Answer 2

To achieve this, the most effective approach is to simply assign a width of 200px to the .sub2 element. Since you are already aware of the width of your .main element, there is no need to complicate things.

Your CSS styles should be straightforward like so:

.main {
    width:200px;
    border-bottom : solid 1px #0000FF;
}

.sub1 {
    width:300px;
    border-bottom : solid 3px #00FF00;
}

.sub2 {
    border-bottom : solid 3px #FF0000;
}

However, if it's absolutely necessary to adjust the width based on the parent element due to its dynamic width, JavaScript will come to the rescue. If you are using jQuery, you can utilize this snippet:

$(function () {
    var elements = $(".sub2");
    for (var i = 0; i < elements.length; i++) {
        $(elements[i]).width( $(elements[i]).parent().parent().width() );
    }
});

This script will dynamically set the width of all elements with the .sub2 class to match the width of their parent element upon page load.

Answer 3

Answer №2

Experiment with the following:

#primary {
   max-width:150px !important;
   border-bottom : solid 1px #FF00FF;
}

#section1 {
    width:250px;
    border-bottom : solid 2px #FFFF00;
}
#section2 {
    width:180px;
    border-bottom : solid 2px #00FFFF;
}

Answer 4

Experiment with the following:

#primary {
   max-width:150px !important;
   border-bottom : solid 1px #FF00FF;
}

#section1 {
    width:250px;
    border-bottom : solid 2px #FFFF00;
}
#section2 {
    width:180px;
    border-bottom : solid 2px #00FFFF;
}

Answer 5

Answer №3

To enhance the structure, you can insert an empty element below sub2 and transfer sub1's styles to it:

#section {
  width:150px;
  border-bottom : solid 12px purple;
}

#subsection2 {
  border-bottom : solid 10px orange;
}

#subsection3 {
  width:250px;
  border-bottom : solid 8px pink;
}

<div id="section">
  <div id="subsection1">
    <div id="subsection2">
      Greetings Earthlings!!
    </div>
    <div id="subsection3"></div>
  </div>
</div>

Answer 6

To enhance the structure, you can insert an empty element below sub2 and transfer sub1's styles to it:

#section {
  width:150px;
  border-bottom : solid 12px purple;
}

#subsection2 {
  border-bottom : solid 10px orange;
}

#subsection3 {
  width:250px;
  border-bottom : solid 8px pink;
}

<div id="section">
  <div id="subsection1">
    <div id="subsection2">
      Greetings Earthlings!!
    </div>
    <div id="subsection3"></div>
  </div>
</div>

Setting a precise length for CSS borders in nested elements

Answer №1

Answer №2

Answer №3

Similar questions

Items positioned to the left will not overlap

Overlapping columns with bootstrap images

A guide on how to align Hamburger CSS in the center, center text, and include a

Connection and labels are malfunctioning on handheld devices

How can the color of glyphicons be adjusted within an AngularJS ng-class that is constantly changing?

What methods can I employ to utilize CSS on a table row that contains a specific class in an HTML

image appears hidden by object displaying a YouTube video due to z-index property

CSS code to modify background color upon mouse hover

Resetting the countdown timer is triggered when moving to a new page

Having trouble getting Bootstrap CSS to work with ASP.net?

Changing the color of placeholder text in MUI 5 TextField

My website is constantly showing HTML code instead of rendering properly

Getting JSON with duplicate keys in JavaScript can be achieved by parsing the data using a custom function

What is the best way to position my inline-flex element at the bottom of the page?

Disappearance of Chrome scroll bar without overflow-y condition

Issue with Tinymce Editor: Content does not refresh when clicking another button within the form

Can data be pulled from parse.com using Objective-C and then displayed on a website?

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

Ways to align various paragraphs within a single Bootstrap row

Creating interactive labels in a histogram that update based on the user's input