Describing it can be a bit tricky, so I created this sketch to help illustrate:
https://i.sstatic.net/K8KOM.png
I have two divs - an outer div and an inner div. My goal is to add a line between the two divs. Is there a way to achieve this and what would be the best approach?
Is this what you were looking for?
#wrapper {
width: 400px;
height: 300px;
border: 1px solid red;
}
#content {
height: 125px;
border: 1px solid blue;
position: relative;
}
#line {
position: absolute;
width:1px;
height: 50px;
bottom: -25px; /*half the height*/
left: 50%;
border-left: 1px solid green;
}<div id="wrapper">
<div id="content">
<div id="line"></div>
</div>
</div>The outer container is quite standard.
The inner content div has a relative position, while the line div has an absolute position.
By positioning the line div as a child with the specified positions above, its position is relative to the parent. So when using left: 50%, it means it's at 50% of the parent element.
#wrapper {
width: 400px;
height: 300px;
border: 1px solid red;
}
#content {
height: 125px;
border: 1px solid blue;
position: relative;
}
#content:after {
content: '';
position: absolute;
width:1px;
height: 50px;
bottom: -25px; /*half the height*/
left: 50%;
border-left: 1px solid green;
}<div id="wrapper">
<div id="content">
</div>
</div>I'm just starting out with HTML/CSS and as I follow a few tutorials, I've encountered an issue when attempting to implement an accordion example from https://getbootstrap.com/docs/4.0/components/collapse/. It seems like the problem stems from the ...
I have a question that I believe may be common and already answered, but I can't seem to find the solution. codepen Currently, I am working on creating a simple 2 column layout. While the columns are displaying correctly, the footer ends up in the s ...
Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...
As I organize my content into an FAQ format, I want users to be able to click on a link and expand the section to reveal a list of items that can also be expanded individually. My goal is to have certain list items expand automatically when the FAQ section ...
This is my PHP code In the HTML form below, I aim to retrieve data from the name, email, phone number fields, and file attachment. When attempting to get the attached file (without any other information entered) in a live server environment, I'm exp ...
My current setup involves an Angular application (v4.0.1) with webpack deployed on Heroku. I have a loading spinner in place to show while the app is loading, and it works well locally. However, when deployed on Heroku, the loading spinner (specifically th ...
I am having difficulty in choosing an option from a dropdown menu while using Selenium with Python. Displaying below is the HTML code snippet: <select class="hm-input hm-dropdown" type="text" id="HME-10-widget_calendar_1" ...
After spending countless hours, even a couple of days, trying to solve this issue, I still can't find a solution. I've exhausted all options and haven't come across a similar case. My goal is to smoothly scroll to another component on my on ...
I've encountered an issue with my code where the database is not updating and a new record is not being created. I suspect that there may be a problem with how I am handling the POST data retrieval in my script. Can anyone provide guidance on where to ...
I'm struggling with overlaying a gif image on top of a jpeg in an HTML email, but for some reason it's not functioning as expected. Below is the code I've been examining: <table id="headerAnimation"> <!--[if !mso]><! ...
Is there an easy and straightforward method to customize radio buttons using only CSS, allowing me to click on an image instead of a traditional bullet point? For example, like thumbs up/thumbs down. I have two radio buttons that need to track which one i ...
Is there a way to add shadows within an element using CSS? I attempted the following method but it did not work: #element { shadow: 10px black; } ...
The colors and background remain unchanged. In previous projects, everything ended up falling apart Refreshing the page with F5 or CTRL + F5 does not make a difference. When using Open Live Server in VS Code, it initially shows the changes being applied b ...
As a beginner, I'm struggling to save the checkbox answers on the page after submission. The code below is quite lengthy (checkboxes start at 314). I have a feeling that I might be missing a piece of code, but I just can't seem to pinpoint what i ...
Hey there! I'm dealing with a situation where the computers at my school are locked down and I can't install software. Does anyone know if there's a way to compile my Stylus code without having to install Node first? Or perhaps, is there a p ...
I am finding the terminology used in material ui confusing and would appreciate if someone could clarify it for me. For example, let's consider this information from https://material-ui.com/guides/api/: Spread Undocumented properties supplied ar ...
I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...
Recently I started working with Vuejs and encountered an unexpected issue in my application. The purpose of my app is to search for channels using the YouTube API and then display those channels in a list. However, when I try to render the list of subscri ...
I attempted to incorporate 2 Bootstrap 4 carousels onto a single page, but encountered issues with the functionality. I utilized this code on my page, however, the last element in the carousel does not cycle correctly. There is a delay of 3 transactions be ...
Utilizing an HTML entity to display three dots (...) is my current method of indicating that there is more text available. While CSS (text-overflow: ellipsis;) offers alternatives, I am restricted in using CSS styles. The problem lies in the fact that the ...