Is there a way to align a div and header on the same line? Currently, the red div is displaying below the text.
Thank you for your help!
.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
}
.block {
height:15px;
background-color: #ff5050;
}
You don't have to set a fixed width for any element when using Flexbox. Additionally, by using align-items: center, you can achieve vertical alignment.
.underlined {
border-bottom: 1px dotted #000;
text-decoration: none;
}
.block {
height: 15px;
flex: 1;
background-color: #ff5050;
}
h3 {
display: flex;
align-items: center;
}<h3><u class="underlined">ABOUT ME</u><div class="block"></div></h3>Implement the inline property and specify the width for both div elements as shown below:
.highlighted {
border-bottom: 1px dotted #000;
text-decoration:none;
display: inline-block;
width:20%;
}
.box {
height:15px;
background-color: #ff5050;
display: inline-block;
width:80%;
}
To achieve the desired layout, make sure to specify the width and float properties for the div element.
Since a div is initially a block-level element that spans the full width of its parent container, setting the appropriate width and float values can help control its positioning on the page.
Take a look at this fiddle:
https://jsfiddle.net/68v28o3g/
.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
float:left;
width:auto;
}
.block {
height:15px;
background-color: #ff5050;
width:80%;
margin-left:20%;
}
<h3>
<div style="float:left; width:100%">
<u class="underlined">ABOUT ME</u>
<div class="block">
</div>
</div>
</h3>
Please be aware that these methods are now outdated, for better results consider using BootStrap (if feasible)
If you need to have the red line overwrite the text data, you can use the following code HTML
<div class="block">
<h3><u class="underlined">ABOUT ME</u>
</div></h3>
No changes in CSS required
If you want the red line to be next to the text, then utilize the following CSS and HTML
HTML
<h3><u class="underlined">ABOUT ME</u><div class="block">
</div></h3>
CSS
.underlined {
border-bottom: 1px dotted #000;
text-decoration:none;
}
.block {
height:15px;
flex : 1;
background-color: #ff5050;
}
h3{
display : flex;
align-items: center;
}
I am attempting to develop a CSS selector that can target the specific entries within the page-top-menu: Header menu - Menu 1 DE #page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d ...
I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...
Dear audience, I am looking to incorporate an image on a Python Dash webpage that is created by JavaScript code. For more details, you can refer to the documentation here: . To include this script in a static HTML page, one would typically add the followi ...
ul { list-style-type: none } .navbar-nav:hover .secondDropdown{ display:block; } .navbar-nav .secondDropdown{ display:none; } .navbarDropdown2{ display:none; } .dropdown-toggle:hover .navbarDropdown2 { display: block; } .dropdown-item:ho ...
Suppose I have a page with a link <a href='edit_info.php?id=1001'>1001</a>. In the edit_info.php page, I want to use this id to query a database, like so: SELECT * FROM table WHERE id = $_GET['id'] Now, I need to populate ...
I recently encountered an issue where I set up an image to scale to full width, but it was always cut off at the bottom when it extended too high. Here is my current setup: div, img, body { margin: 0; padding: 0; } #image { width: 100%; he ...
Having some trouble. For example: $(document).ready(function () { $("#btnSend").click(function () { var noti_p = { url: "Pusher_Controller.ashx", data: "&appname=" + $("#selt1").val() + "&title=" + $("#title"). ...
I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...
My current setup involves utilizing a calendar system with an API accessible via SOAP requests on an IIS server. Initially, my approach was to create an HTML page and use JavaScript to display the SOAP request response. However, the response did not retur ...
Take a look at my code snippet below. I am working on creating multiple clickable divs that reveal different content when clicked. However, the issue I am facing is that currently, both content blocks can be displayed simultaneously. My goal is to have onl ...
I have come across a strange issue that I am struggling to solve. I have an image within a div with the float: left; attribute, but this styling only seems to work when the div has more than one line of text. When the div contains just one line, it ends ...
Instead of hardcoding values in my HTML file, I have a variable called 'myVariable' in my Python file that is a list. I want to use this variable to generate the options in my select menu. <select class="form-select" aria-label=" ...
After realizing it was easier than expected, I simply consolidated all columns into one row and the responsiveness now works perfectly. Thank you to everyone who helped. I am utilizing Bootstrap 4 grid system to structure 3 rows with columns. For lg brea ...
Greetings, I have been working on creating a small form for my school, and everything was running smoothly until I implemented the function "reorganizeVector()." However, now when I try to test my form (only on this webpage) in a browser, it takes 2-3 minu ...
I've encountered a frustrating issue with tooltips on my website - they just won't stop blinking when I hover over the skill bubbles. I tried fixing the tooltips at a certain location, but whenever there's a bubble in that spot and I hover o ...
My HTML file includes an embedded web widget from tradingview.com with the following code: <!-- TradingView Widget BEGIN --> <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style ...
Lately, I have been encountering some issues with AngularJS. I have defined multiple scopes like this: app.controller('mainController', function($scope) { $scope.siteURL = "my website url"; }); When using the {{siteURL}} variable in ...
Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...
Hello there, I am currently in the process of developing my first JQuery Mobile website. One of the key features I have implemented is a panel for navigation. Each individual page includes the panel, along with an icon in the header that serves as the butt ...
I am trying to access my .scss file that imports all the other .scss files (they are all imported in styles.scss). Even though I have added the path to my angular cli file, the file is still not accessible and no styling is being applied to my html elemen ...