I'm trying to place a second div under one with position absolute, but the two divs have different widths. The top div is centered and positioned absolutely, while the bottom div should span 100% of the width. Any suggestions on how to achieve this?
I'm trying to place a second div under one with position absolute, but the two divs have different widths. The top div is centered and positioned absolutely, while the bottom div should span 100% of the width. Any suggestions on how to achieve this?
div that includes both itemsfloat:rightexample:
div#customButtons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.custom {
float:right;
margin:1px;
}
Enclose the two DIVs within a new container and set its position to absolute instead of the initial one.
While not officially tested, this solution should work:
In HTML:
<div class="container">
<div class="box1">
Some content
</div>
<div class="box2">
More content
</div>
</div>
And for the CSS:
.container
{
position: absolute;
width: 500px;
height: 400px;/*customize as needed*/
}
.box1,
.box2
{
position: relative; /*or static*/
}
I hope this solution is what you were looking for :)
Verified HTML Code
<div class="container">
<div class="top-section>
</div>
<div class="bottom-section>
</div>
</div>
CSS Styles
.container{width:980px;margin:0 auto;position:absolute;}
.top-section{float:left;width:630px;}
.bottom-section{float:right;width:320px;}
Here is a suggestion for you to try out, and then you can transfer the styling to your CSS file:
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>
Here is the HTML code for my form: <form action="#" class="searh-holder"> <input name="se" id="se" type="text" class="search" placeholder="Search.." value="" /> <button class="search-submit" id="submit_btn"><i class="fa fa-sea ...
I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...
In my HTML (within a Twig template), there is the following code snippet: <li id="{{folder.id}}" data-jstree='{"icon":"glyphicon glyphicon-tags", "type":"folder"}' ><a href="#">{{folder.name}}</a> I'm attempting to extrac ...
I am working on creating an "edit_post" page for my website to allow users to edit their previously posted content. Although I receive a notification saying "Updated data successfully," the changes are not being reflected in the MySQL database. <?php ...
I remember hearing about a feature that was introduced in some recent versions of Firefox allowing developers to check if a tab is active or not using JavaScript. However, I am having trouble finding more information about it online. Can you share the li ...
I am looking to create a slider that includes a form or text. However, I have noticed that when scaling up by 50-75% or when there is a lot of content, the content extends beyond the slider. Image Check out my code on jsfiddle: jsfiddle.net/sL70r2an/ ...
This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...
It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...
I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...
Is there a method to emulate the appearance of a fixed-width font using a variable width font in HTML? For instance, if I were to display the phrase "The quick grey fox jumped over the lazy dog" in "Courier New," a fixed-width font, it would appear wider ...
I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...
I am experimenting with a basic HTML login form, but I can't seem to get it to function properly. This is all new to me as I am just starting out with PHP programming. Any assistance would be greatly appreciated! <?php $correctPassword = 'ho ...
For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can ...
I am trying to display the result of a query to a remote ODBC SQL database in an HTML table using PHP. I have successfully established the connection with the database, but when I attempt to execute a query and display it in a table, nothing appears. I am ...
Recently, I was assigned to revamp a website for the company I work for. However, upon closer inspection, I realized that the website is quite messy and relies heavily on templates, resulting in certain elements being auto-generated as active links. The i ...
I'm interested in finding out if there is a way to automatically generate an XPath by simply selecting an element, eliminating the need for manual updates when changes occur in HTML files on websites. I welcome any suggestions or alternatives that can ...
Is it possible to retrieve all images that do not have the first class attribute as "content.slide0"? In my example, I am utilizing the Jsoup library to display selectable elements in a WebView. Elements element = doc.select("HERE_SOLUTION"); <head ...
As I embark on my first website building journey, I am faced with a dilemma regarding internal links. While everything runs smoothly locally, none of the internal links seem to work once the site is live. Take for instance this internal link: <a href =& ...
I am currently developing a menu using a dom-repeat template as shown below: <template is="dom-repeat" items="{{appletsMenu}}"> <a data-route="{{item.dataRoute}}" href="{{item.href}}"> <iron-icon icon=" ...
Why won't the background image display? It only displays as an img src. How can I call the background-image correctly? <body> <div id="page" style="background- image:url(https://storage.blob.core.windows.net/name/image.png)"> ...