Positioning a div at the bottom of a webpage without using absolute positioning in HTML

Check out the fiddle.

I've included some CSS to position the tab on the right side.

My goal was to have those tabs in the lower right corner of the container.

If I use absolute positioning for the div, it messes up the tab content width. I tried adjusting with margin-right, but it's not flexible enough when the tab headers are wider than the defined margin-right.

Is there another way to move the tabs to the lower right corner of the tab-container?

Any assistance would be greatly appreciated.

Thanks in advance.

javascriptjqueryhtmlcss

Answer №1

If you want to take advantage of modern CSS, consider using flexbox.

Check out this demo: http://jsfiddle.net/5Vkx9/2/

.tab-content
{
    flex: 8 1 auto;
}

.nav
{
    flex: 1 0 auto;
    order: 2;
    align-self: flex-end;
}

Take a look at the supported browsers for flexbox here: http://caniuse.com/flexbox. Please note that IE10 has limited support and may require special attention:

For more information on flexbox, check out this helpful article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

I'm not completely certain of your desired outcome, but could this be what you're looking for? Implementing position: absolute; and a bottom padding on the content panel.

Example: http://jsfiddle.net/9Fxc4/7/

Answer №3

I discovered a clever method to incorporate margin-top using JavaScript. It involves calculating the height of .tab-container minus the height of .nav-tabs.

CHECK IT OUT: http://jsfiddle.net/abc123/45/

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

Retrieve the content of a file and convert it into JSON or GeoJSON format

Can someone help me with my issue? I am struggling to extract content from geojson files and assign it to a valid variable. Here is what I've tested: //this works var obj_valid = {"type": "FeatureCollection","crs": { "type": "name", "properties": { ...

javascriptjqueryjsongeojson

How can I simulate pressing the ENTER key in Selenium without selecting any element?

Having trouble using the firefox selenium plugin and sending the enter key after pasting text? The ENTER key press should not interact with any other element on the page, just a simple 'dumb' ENTER key press. error [error] Element name=code not ...

javascripthtmlseleniumweb-scrapingelement

PHP pattern matching equivalent to selecting elements based on their position in CSS

Struggling with the logic to identify objects in an array by their position. Seeking a PHP equivalent of nth-child(5n + 1) condition, which targets positions like 0, 5, 10, and so on within a loop. One approach could be to divide by 5 and check for whole ...

phpcssregex

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

cssangularthemesscss-mixins

Failure to trigger Summernote's OnImageUpload function

After transitioning to the latest version of Summernote, which is Version 7, I encountered a problem with the image upload functionality. Despite specifying the line onImageUpload: function(files) {sendFile(files[0]);}, it seems that this code is not being ...

javascriptphpjquerysummernote

How to activate a window that's been minimized in Chrome

I am experiencing an issue with a button that is supposed to open a new window as a popup below the parent page. It works correctly in IE and Firefox, but in Chrome, the popup appears on top of the parent window. Can someone please provide a solution? Fo ...

javascriptgoogle-chromepopup

"Overlooked by z-index, absolutely positioned overlay causes confusion

I have been working on a template where I am trying to create a glow effect in the center of three divs with different color backgrounds. I added an absolutely positioned container with 10% opacity, but it ended up overlaying everything and ignoring z-inde ...

htmlpositionoverlayz-index

What is the best way to achieve maximum height?

Currently, I am attempting to obtain the total height of the page in order to apply it to the styles, specifically for the darkMask class. The reason for needing this height is that when a certain action is triggered within the header, a dark overlay is a ...

javascriptreactjsnext.jsserver-side-rendering

Tips for preventing multiple counter buttons from conflicting with one another

Currently, I am in the process of creating an online restaurant platform that allows customers to place food orders. To streamline this process, I am developing individual cards for each food item available on the menu. In addition, I am implementing butto ...

javascripthtmldom

The session feature in Express is malfunctioning

Incorporating express-session into my app, I attempted the following proof of concept (POC):. server.js app.use(session({ secret: 'pal!lap789', // create new redis store. store: new redisStore({ host: 'localhost ...

javascriptnode.jsexpresssession

Possible revised text: "Exploring methods for verifying elements within a div using Selenium

I have a situation where I need to verify elements within a div by using the following xpaths. The xpath for each item is as follows: Item 1:- //*[@id='huc-last-upsell-rows']/div[1]/div[2]/div[1]/div/div/a/img Item 2:- //*[@id='huc-last-u ...

javascripthtmlselenium

Converting a string array to an array object in JavaScript: A step-by-step guide

My task involves extracting an array from a string and manipulating its objects. var arrayString = "[{'name': 'Ruwaida Abdo'}, {'name': 'Najlaa Saadi'}]"; This scenario arises when working with a JSON file where ce ...

javascriptnode.js

Stripping initial tags from an xml string using PHP

My URL is: http://lx2.loc.gov:210/lcdb?operation=searchRetrieve&recordSchema=marcxml&version=1.1&maximumRecords=10&query=bath.isbn%3D9781594634123%0A++++ This URL returns an xml string, and I am looking to remove the opening tags of this ...

phphtmlxmlwebextract

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

javascriptphpjqueryhtmlcss

The element in TS 7023 is implicitly assigned an 'any' type due to the fact that an expression of type 'any' is not valid for indexing in type '{}'

I have implemented a select-box that includes options, labels, optgroups, and values. Is my approach correct or is there something wrong with the way I have defined my types? interface Option { label: string value: string selected?:boolean mainGrou ...

javascriptreactjsarraystypescript

Preventing circular dependencies while upholding the structure of modules in Express

I am developing an express app in ES6 and organizing my files by functionality. In this structure, each module has an index.js file that is responsible for exporting relevant methods, classes, etc. Other modules simply require the index.js from another mod ...

javascriptnode.jsecmascript-6circular-dependency

Is there a way to send an array of objects to my Express / SQL Server in react?

I am currently facing a challenge with passing an array of objects to my back end (SQL Server). Below is the specific array of objects: console.info(results) Here is the array of objects named results: [0] [ [0] { [0] answer: 'bmbm,nn', [ ...

javascriptsqlsql-serverreactjsexpress

The disappearance of the overlay background due to modal reload in NextJS dynamic routing

I am working on a simple NextJS app where clicking on a page opens a modal with updated URL but without triggering a new navigation. The content inside the modal is displayed, while the actual page location is reflected in the URL and refresh takes the use ...

javascriptreactjsnext.js

Incorrect form element style is only visible when contained within an unstyled HTML Details tag

A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...

csshtmlbulma

Insert a page break after content for desktop browsers

Is it possible to control the display of sections on different screen sizes? I have a page that looks good on 15" laptops, but larger resolutions cause the next section to appear on the first screen. Is there a way to show the next section only on th ...

javascriptcsspage-break