Challenges with Div Height and Border

Hello there!

I've run into a height and border issue with a div. Here's the CSS I'm currently working with:

    .content
        {
            background-image: url(../../images/logo-04.png);
            background-position: left bottom;
            background-repeat: no-repeat;
            background-size: 30%;
            border-bottom: 0.1em solid #000000;
            border-bottom-left-radius: 1em;
            border-bottom-right-radius: 1em;
            border-top: 0.1em solid #000000;
            display: inline-block;
            width: 100%;
        }

    .content-left
        {
            float: left;
            font-size: 100%;
            text-align: justify;
            width: 74%;
        }

    .content-right
        {
            border-left: 1px solid #000000;
            float: right;
            font-size: 80%;
            height: 100%;
            text-align: right;
            width: 25%;
        }

And here is part of the HTML code that corresponds to the styles above:

<div class="container2">
    <!-- Content -->
    <div class="content">
        <div class="content-left">
        </div>
        <div class="content-right">
            <div class="sidelinks">
                <ul>
                    <li><a class="link3" href=""></a></li>
                    <li><a class="link3" href=""></a></li>
                </ul>
            </div>
            <div class="social">

<---End--!>

All the divs in my code are properly closed, so I omitted them for brevity.

I'm struggling to make the left border extend the full length of the content-right div without using pixels (e.g., height: 500px). When I use percentage (height: 100%), the border only covers the contents inside the content-right div.

Does anyone have suggestions on how I can achieve the desired effect?

Answer №1

The issue here is that you haven't specified a height for the .content element, so despite using height:100%, it will only be 100% of its parent element, content.. I recommend setting the height of the content to 100% and checking if the border adjusts accordingly

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

Does anyone know why this code isn't functioning properly on Firefox?

This code performs as intended in Chrome, but unfortunately does not function properly in Firefox. ul { list-style:none; } li { display:inline-block; border:1px solid black; } a { display:block; margin:10px; } a:hover { positio ...

How to execute a java class method within a JSP page

Is there a way to trigger a specific Java method when I click a button on a JSP page? I attempted using a scriptlet in the onclick event of the button to create an instance of the class and call the desired method, but unfortunately, it didn't yield t ...

changing size when hovered over with the mouse is not consistent between entering and exiting

Hi there, I'm currently utilizing the transform: scale(); property on a website and could use some assistance with a particular issue I haven't been able to find an answer for online. Here is the code snippet I'm working with: HTML: <d ...

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly

Exploring the world of Bootstrap 5 tabs led me to copy and paste code from the official documentation (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior), but unfortunately, it's not functioning as expected: clicking on a tab does ...

Open Chrome in fullscreen mode directly from your Android home screen without the statusbar displayed

One of my clients is looking to have a specific website launched from an icon on an Android tablet. Since he is leasing the tablets, we have full control over the hardware. The goal is for these tablets to exclusively display his site (which is a slideshow ...

How can I use JavaScript to trigger a button click event inside an iframe element

Is there a way to retrieve the inner HTML contents of a clicked element in an iframe loaded content using JavaScript? This code uses jQuery: var elements = document.getElementsByTagName('iframe'); [].forEach.call(elements, function(elem ...

Tips for creating multiple row tabs in Material UI Tabs

Currently, I have close to 30 tabs housed within Material UI Tabs. In order for the user to view all tabs, they must scroll two times. I am seeking a solution to display the tabs in two rows with a scroll, as opposed to one row with scroll. This would al ...

Struggling to align elements in React/JS/M?

My challenge is aligning the elements in the middle of my page. I aim to have 3 elements per row, with n rows depending on the number of "VideoBox" components. It's crucial that these elements fit within the lettering of the P R O F E S S I O N A L ...

What could be preventing the onclick event from functioning properly in JavaScript?

After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...

One-time PHP form submission only

On my website, I offer a variety of PDF download options. To access these downloads, I encourage visitors to sign up using a form. After signing up, they receive a direct link to the chosen PDF in their email. My goal is to streamline the process so that ...

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

Tips for extracting links from a webpage using CSS selectors and Selenium

Is there a way to extract the HTML links per block on a page that renders in JavaScript? Would using CSS or Selenium be more effective than BeautifulSoup? If so, how would I go about utilizing either of those methods to achieve the extraction of the HTML ...

Fixed position not being maintained after clicking the button

Looking for some help with a fixed header issue on my website. The header is supposed to stay at the top while scrolling, which works well. However, when I switch to responsive view, click the menu button, and then go back to desktop view, none of the po ...

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

Is it possible to customize the color of an SVG image within Next.js using next/image?

import Image from 'next/image' ... <Image src="/emotion.svg" alt="emtion" width={50} height={50} /> I am trying to change the color of the SVG using next/image. However, applying the following CSS rule does not seem ...

Insufficient column height when using CSS flex-grow property

I am facing an issue with my 3 flex columns that have varying text lengths, resulting in uneven heights. I have tried using flex-grow: 1; to make them match in height, but it does not seem to be working as intended. Can someone please help me identify what ...

Preserve the HTML file with all its source code intact

Looking to access a specific parameter on this webpage: . For instance, if I need to retrieve the "Topological Polar Surface Area" value. If I manually save the page using Internet Explorer, I can locate the value with these commands: cat file.html | gr ...

Creating a mechanism that fetches web links and automatically substitutes the URL with the corresponding title of the webpage

Just the other day, I noticed that putting a link in my profile resulted in it being replaced by the exact title of the question. This got me thinking, how exactly do they accomplish this? My hunch is that they achieve this by using ajax to send the link ...

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...