I've designed a two-column layout. You can view the code on jsfiddle.net. My problem is that I want the center line with a width of 10px to have a height of 100%. I have a container div with the ID #obal (set to height: auto). When I set the height of #cara .inner to 100%, the center line disappears. What do I need to change?
Thank you for any assistance.
It appears that the issue at hand arises when setting #cara . inner height to 100%, as it then takes on the full height of its parent container - in this case, #cara, which is currently set at 0px;
A potential solution could resemble the following:
#container {
margin: 10px;
height: 200px;
}
#container #cara {
position: relative;
float: left;
left: -20px;
height: 100%;
}
#cara .inner {
position: absolute;
height: 100%;
width: 10px;
float: left;
background: #336;
}
div#first {
float: left;
margin: 0px 30px;
width: 120px;
height: 100px;
background: #ff3322;
font-size: 0.95rem;
overflow: hidden;
}
div#first .inner, div#second .inner{
padding: 10px;
}
div#second {
width: 120px;
height: auto;
background: #393;
font-size: 1rem;
overflow: hidden;
float: left;
}<div id="container">
<div id="first">
<div class="inner">The first part of the text may not be the strongest, but the author attempts to describe important points of their visit
</div>
</div>
<div id="cara">
<div class="inner"></div>
</div>
<div id="second">
<div class="inner">The second part mainly discussed significant issues at the start, where all participants were unable to prepare in time and chaos ensued. However, everyone wanted to win, so they never gave up <br> NEVER :-)
</div>
</div>
</div>I trust this information proves helpful.
http://jsfiddle.net/oapu11q4/20/
===================== Styling with CSS ===================
#container {
display: table;
height: auto;
margin: 10px;
}
div#first {
background: none repeat scroll 0 0 #ff3322;
display: table-cell;
font-size: 0.95rem;
height: 100%;
width: 120px;
}
#container #line {
background: none repeat scroll 0 0 #336;
display: table-cell;
}
#line .inner {
width: 10px;
}
div#second {
background: none repeat scroll 0 0 #393;
display: table-cell;
font-size: 1rem;
height: 100%;
width: 120px;
}
div#first .inner, div#second .inner {
padding: 10px;
}
===================== Structured in HTML =============================
<div id="container">
<div id="first">
<div class="inner">The first section of the text may not be the strongest, but the writer tries to describe key points of his visit
</div>
</div>
<div id="line">
<div class="inner"></div>
</div>
<div id="second">
<div class="inner">The second part mainly talked about the major issues at the start when all participants didn't have enough time to prepare and chaos ensued. But everyone wanted to win, so they never gave up <br> NEVER :-)
</div>
</div>
</div>
One possible solution is to establish the height at 100vh
Using #obal as a guide for determining the relative height of #cara:
#obal {
margin: 10px;
position: relative; overflow: hidden;
}
#cara {
float: left;
margin-left: -20px;
}
#cara .inner {
position: absolute;
width: 10px; height: 100%;
background: #336;
}
(...)
According to the specification:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
Implementing overflow: hidden to truncate a line with excessive height:
#obal {
margin: 10px;
overflow: hidden;
}
#cara {
float: left;
position: relative; right: 20px;
}
#cara .inner {
position: absolute; top: 0; left: 0;
width: 10px; height: 10000px;
background: #336;
}
(...)
Utilizing flexbox properties:
#obal {
margin: 10px;
display: flex;
}
#prvni, #druhy {
display: table;
}
Give this a shot:
To make it work, make sure to include height: 100%; in the parent elements like html and body:
html, body {
height: 100%;
}
#wrapper {
margin: 15px;
height: 250px;
height: 100%;
}
#box {
position: relative;
width: 15px;
height: 100%;
float: left;
}
#box .content {
position: absolute;
right: 20px;
height: 100%;
width: 15px;
background: #639;
}
(...)
Even though I am still learning about selenium, it appears that the driver initially caches the HTML, causing any subsequent modifications to go unnoticed (unless the page is refreshed). This is a snippet of what my HTML code looks like: <div class="q ...
Trying to create a drawing program with JavaScript and the HTML canvas. Need help continuously drawing a circle at the mouse location. Code here: <canvas width = '450' height = '450' id = 'drawing'> </canvas> ...
return render_template('homepage.html',imgName=filenameD) PYTHON <img src= {{ name }} alt="something" style="width:500px;height:600px;"> HTML I am attempting to dynamically change the image displayed on my website usi ...
Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...
Just starting out with jQuery and I have a form setup like this: <select name= "menus"> <option value="">--Select--</option> <option value="a">a</option> <option value="b">b</option> <option val ...
I am looking to implement form validation with two separate groups within the main formBuilder.group. I am unsure of how to access the 'errors' value in my HTML [ngClass]. component.ts: createForm(): void { this.myForm = this.formBuilder ...
In the code snippet below, my goal is to apply a specific style to the content of the final occurrence of "B". <div class="A"> <div> I am <span class="B">foo</span>. </div> <div> I like <span class="B"> ...
Struggling with finding helpful plugins for my Selenium webdriver development. Firebug for FF and Selenium IDE are not working for me. Despite trying multiple plugins for both FF & Chrome, I can't find anything to generate xpath or CSS strings. Lookin ...
Currently experiencing difficulties with a div element that is not allowing touch and vertical scroll on mobile devices. Although scrolling works fine with the mouse wheel or arrow keys, it does not respond to touch. Have tested this on various devices and ...
I am having trouble loading PHP code into a div tag to display the results. The code I have listed below does not seem to work for me. If anyone can offer assistance in resolving this issue, I would greatly appreciate it. Here is the code snippet: <h ...
I am perplexed by the error message I am receiving: Stray start tag footer. All I have included here is the tags: <!doctype html> <head> <title>title</title> <meta charset="UTF-8"> <meta name="keywords" cont ...
Having multiple bootstrap 4.4.1 dropdown menus, each within a column which is functioning correctly except for the position calculation. Example of HTML col: <div class="container"> <div class="row"> <div class="col"> <div ...
Hey there, I am working with a model variable called "name" that is linked to a span element like this: <input type="text" ng-model="name"> <span ng-bind="name"></span> My goal is to display the text entered in the input field without r ...
I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...
Just starting out with html programming here. Looking to add top margin using a span class, any tips on how to tackle this issue? ...
I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image. However, I'm facing a challe ...
I am currently using Leaflet in conjunction with VueJs. I have encountered an issue where a double marker is appearing at a specific location when I add a marker: The code responsible for this behavior is as follows: mounted() { this.map = L.ma ...
I am encountering an issue with the sign up button during the user registration process. There is a checkbox for Terms & Conditions, and the button should only become enabled after checking this box. Everything seems to be functioning correctly, but when I ...
Hey there! I've been struggling with an unusual gap between a top image and a table on my website (www.tradecaptaincoaching.com). The table was created using . Despite spending hours on it, I can't seem to get rid of the huge 200 pixel gap that& ...
I am presently working on a project that involves using JQuery Datatables to display my data. Within this project, I am utilizing the datatables render method to format the data before it is displayed. However, I have encountered a challenge where I need t ...