Position a relative div with a slideable menu using absolute CSS styling

I am struggling with my CSS skills and could really use some assistance. I have created a fiddle to showcase my issue:

http://jsfiddle.net/naini/mBMq3/6/

.contentBack{   
    width : 300px;
    border : solid 30px;
    position :absolute;
    top :10;
}

.masterDiv{
    background-color: grey;
    border: solid 1px;
    width: 80%;
    height:400px;
    margin-top: 60px;
    text-align: center;
    padding : 10px;
    position : relative;
}

I want the "contentBack" (with the thick black border) div to be contained within the "masterDiv" (grey background). However, I do not want to set "contentBack" to position:relative because I need the menu to overlap it rather than push it to the right when the menu appears.

Is there another solution for this design challenge?

P.S.: Should I include the entire JSFiddle content in this question?

jquerycss

Answer №1

Does this meet your requirements better? Check out these examples: http://jsfiddle.net/mBMq3/8/ or maybe http://jsfiddle.net/mBMq3/10/. The heights of .masterDiv and .contentBack are not fixed.

.masterDiv{
    background-color: grey;
    border: solid 1px;
    width: 80%;
    margin-top: 60px;
    text-align: center;
    padding : 10px;
    position : relative;
}
.menuDiv{
    position: absolute;
    z-index: 100;
    background-color: white;
    border: solid 1px;
    width: 200px;
    height: 300px;
    float: left;
}
.menuDiv li{
    text-decoration: none;
}
.menuButton{
    margin-top :-40px;
    position: relative;
    z-index: 100;
    width : 100px;
    height : 40px;
    float: left;
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);

    -moz-transform-origin :bottom left;
    -o-transform-origin :bottom left;
    -webkit-transform-origin :bottom left;

}
.contentBack{   
    width : 300px;
    border : solid 30px;
    position :;

}
.contentBackPadding{
    padding-left: 50px;

}

Answer №2

Ensure you include right: 0 or a specific value in your .contentBack

view demo

After that, apply overflow: hidden to your .masterDiv

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

Eliminate jQuery's delayed blinking effect with the use of an event

Utilizing the mouseenter and mouseleave events, I have implemented a functionality to add a button (not actually a button) to an <li>. However, there seems to be a problem with my code. The button appears and disappears on mouseleave and mouseenter, ...

javascriptjqueryhtmlcss

Ways to deactivate all click events excluding specified div elements

To disable clicking on all elements except specific ones such as buttons, anchors, inputs, selects, elements with the class '.nav-class', and checkboxes, the following jQuery code was written. However, the code does not seem to be working as expe ...

javascriptjquery

Determine the exact beginning and ending positions of a word when dividing it using Javascript

After creating a special function that breaks down a word based on spaces while keeping punctuation marks intact, I was able to achieve the desired result. function tokenizeUtterance( utterance ) { let spilittedUserText = utterance.toString().match( /[& ...

javascriptjqueryarraysjsonstring

Steps for inserting a button within a table

Currently, I have implemented a function that dynamically adds the appropriate number of cells to the bottom of my table when a button is clicked. This is the JavaScript code for adding a row: <a href="javascript:myFunction();" title="addRow" class= ...

javascriptjqueryhtmltwitter-bootstrap

I am experiencing difficulty with my background image loading as it requires a specific pixel value for height

Having trouble loading an image as a responsive background image in my CSS. Here's the code I'm using: .cover{ height: auto; width: 100%; background-image: url(../img/cover.jpg); background-repeat:no-repeat; background-size:c ...

htmlcssbootstrap-4

I'm looking to customize my Shopify store so that the progress bar is consistently placed directly underneath the "Add To Cart" button for every theme. Is this possible to achieve?

How can I add a progress bar below the "Add To Cart" button consistently across different themes? Each theme has a different id and class for the button. Is there a way to dynamically handle this? Additionally, is it possible to load Bootstrap using a scri ...

phpjqueryshopify

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Adjust the size of a div container depending on the content it holds

If the element div.PageheaderDescription does not contain any img or div#cat-text, I'd like the height to be set to 0px to eliminate any white space. Below is my CSS code: .PageHeaderDescription { height: 320px; position: relative; width ...

javascriptjquerycss

Is there a way to ensure that the border of a textarea matches the border of a text input?

My goal is to make the textarea fields in my form have the same appearance as the text input fields, regardless of the browser being used. I am interested in achieving this without imposing a customized style, but instead by leveraging the standard style w ...

htmlcss

Animation not properly synced with Bootstrap 4 Dropdown hide event

Could you please check out my codepen for clarification: http://codepen.io/anon/pen/oLZOyp Essentially, I have integrated two animations using animate.css into Bootstrap 4 show.bs.dropdown and hide.bs.dropdown events. The animations work on the first show. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using jQuery to adjust the length of a string to fit within a specific width

I am working with a table and need to input strings in each cell, but they are wider than the cell width. I want to shorten the strings without breaking lines, and add '...' at the end to show that the string is long. The table consists of aroun ...

javascriptjquerystring

Utilizing jQuery charts to showcase real-time data visualization

My assignment involves creating a page that showcases values using a jquery chart, with the ability to switch between day-wise view and month-wise view using AJAX x-axis: days/ months y-axis: a,b,c,d I have all the variable values prepared and a dropdow ...

jquerycharts

Only reveal a single div when hovering

I am currently working on a project that involves utilizing the Wikipedia API to allow users to search for and retrieve information from Wikipedia. I have made significant progress, but I have encountered an issue. When hovering over the "each-list" div, t ...

javascriptjqueryhtmlcss

Error in main thread: org.openqa.selenium.WebDriverException - $ is not defined

Acquiring a CSS selector by ID is resulting in an error when I invoke the getCSS method: UpdateActualPath actualPath= new UpdateActualPath(); actualPath.getCSS("https://www.google.co.in/", "a"); This is the code snippet: import java.io.IOException; ...

javajqueryseleniumjquery-selectors

Tips for positioning a highcharts pie chart and legend in the middle of a page

I'm struggling to center my highchart data in a node/react single page application. Currently, it appears off-center like this: https://i.stack.imgur.com/ccR6N.png The chart is floating to the left and I would like to have everything centered within ...

javascripthtmlcsshighcharts

Include row identification and row information using a multidimensional array structure

When working with the jQuery DataTables plugin, you have the option to utilize arrays of objects or arrays of arrays. It appears from this source that using the object format comes with reserved keys that are managed by the plugin. In my case, I prefer us ...

javascriptjqueryhtmldatatablesdatatables-1.10

What is the best way to exit a for loop in jQuery?

let intervalTime = 800; for(let index = 1; index < 20; index++) { $("#slide"+index).delay(intervalTime).fadeIn(); intervalTime = intervalTime + 800; } Every time I click on a button, the value of "i" should reset to "0". I h ...

javascriptjquery

Turn off specific bound functions temporarily using jQuery

In the scenario where a field is focused or blurred, a jQuery Ajax request is triggered. I want to prevent the Ajax request from firing if there's already an ongoing request. The code snippet below illustrates my current approach: $('#do ...

javascriptjqueryajax

hyperlinks along the edges surrounding a centrally positioned image

I'm facing an issue with an image that is also a link. I used the following code: <a href="link.html"><img src="img.png" id="cloud"></img></a> After, I centered and resized it with the help of this CSS: #cloud { display: blo ...

htmlcss

Angular directives make it possible to easily toggle a single item with just

I have a group of "toggleable" items. When a "toggleable" element is clicked, it expands using the ng-show directive. The item remains open if clicked inside, but contracts when clicked elsewhere. To achieve this functionality, I created a directive that ...

javascriptjqueryangularjsangularjs-directive