My goal is to align a div next to another div whose contents have a width: 100%. Here is the current markup:
<div id="left_sidebar" style="float: left; height: 100%; width: 150px;"></div>
<div id="outer_wrapper" style="position: relative; float: left;"></div>
Most elements within #outer_wrapper are set to 100% width. However, this setup doesn't seem to be working as expected.
I have created a FIDDLE to demonstrate the issue.
What do you think of this solution:
#left {
width: 150px;
height: 1000px;
background-color: green;
float: left;
}
#right {
width: 100%;
height: 1000px;
background-color: red;
float: left;
}<div id="right">
content here
<div id="left"></div>
more content here
</div>A different approach:
Try removing the width and float properties from the .right div and instead give it a left margin of 150px :
#left {
width: 150px;
height: 1000px;
background-color: green;
float: left;
}
#right {
height: 1000px;
background-color: red;
margin-left:150px;
}<div id="left"></div>
<div id="right"></div>$(document).ready( function() {
var leftHeight = $(window).height() - $('#top').height();
$('#bottom').height(leftHeight);
});
What do you think of this design?
<div style="padding-left:150px; position:relative;width:100%;">
<div id="outer_wrapper" style="position: relative; width:100%">this takes up 100% width</div>
<div id="left_sidebar" style="position:absolute;left:0px;top:0px;width:150px;">this is a 150 pixel wide sidebar</div>
</div>
The concept here is to give the outer-most div a left padding of 150px, creating space for the first child div to be displayed 150 pixels away from the edge. Then, introduce another div that will serve as the left container by using absolute positioning and ensuring it appears as if it is the initial element.
I am curious to know how you can create a button that appears on an empty HTML canvas and, when clicked, adds +1 to a variable. I am working on this JavaScript code within an HTML text file which will later be saved as an HTML file. Please ensure that th ...
Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...
As a newcomer in the world of React.js, I am feeling a bit anxious about posting my question on Stack Overflow. I hope everyone can overlook my lack of experience and forgive me for any mistakes. I have been struggling to find the right solution to my prob ...
There's a curious issue when viewing my website through Facebook or LinkedIn - the background color suddenly changes to a vibrant green, but only in those particular webviews. However, when I view it through other apps like Twitter or Instagram, the ...
I'm having trouble figuring out how to hide multiple divs based on an index that I receive. The code snippet below hides only the first div with the id "medicalCard", but there could be more than one div with this id. document.getElementById("medical ...
Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...
Recently, I upgraded the jQuery version in my project from 1.7.2 to 2.1.1 and included jquery migrate for fallback support. During testing, I encountered an issue with the value of a select element in jQuery versions 2.1.1 and 1.7.2: For version 1.7.2, t ...
I am experiencing some difficulties triggering an on-change event in the department drop-down field and I'm not certain if I've written it correctly. The error message indicates: Uncaught TypeError: Cannot read property 'style' of null. ...
How can I display only the center part of an image with dimensions height=300px and width=520px using CSS or jQuery? I tried searching on Google, but didn't find a solution. Is it possible to show only a 200x130 section from the center of an image us ...
My website has various sections on the homepage and I want to add an anchor link to the navigation. This will allow users to scroll down to a specific section, like "About Us," when clicking on the appropriate nav link. I also need the anchor link to work ...
My application has a 'dashboard' feature that utilizes material-ui. Within this dashboard, other apps are called and rendered. While this setup functioned smoothly during development, I encountered issues once switching to a production build. The ...
I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...
I am currently developing my first web application. I require a basic form for users to input a few values. Although I have successfully implemented it, I would prefer the data entry fields to be arranged in a row instead of a column. The snippets below s ...
Is there a way to make the icon change back when clicked again without making major changes to the existing code? Looking for suggestions on how to achieve this functionality. function myFunction() { var element = document.getElementById("demo"); el ...
I am working on a project where I have a button that triggers a modal: <button type="button" class="btn btn-primary add-subscription" data-toggle="modal" data-workspace_id="{{ workspace.id }}" data-target="# ...
I have a list and I want it so that when a user clicks on the sport1 list item, results from the database table sport1 will be displayed. Similarly, if they click on the education1 list item, results from the education1 table should be shown. The issue i ...
Below is the code provided <!DOCTYPE html> <html> <body> <p id="demo">Demo Element</p> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $('#demo' ...
My website utilizes AngularJS templates, specifically a Single Page Application (SPA). Within one of the templates, I am utilizing a tab control from the AngularUI library named Ui-Tabset. During the rendering process, this control generates a ul element ...
My goal is to create a recursive directory display in HTML using JSON data obtained from a Node.js server and utilizing it as the rendering context for a dustjs-linkedin template. The structure of the data looks like this: { "isDirectory": true, "path ...
I am striving to create a table layout similar to the one shown in the image using bootstrap 5. https://i.sstatic.net/lEnYX.png My attempt so far looks like this <table class="table table-bordered"> <thead> <tr> ...