The sidebar remains fixed in height and does not expand vertically

Need Help: My sidebar won't expand in height when I update content. Is there a way to make it adjust using just HTML and CSS?

html code:

<div id="main">
    <section>
    More text goes here...
    </section>
    <div id="sidebar">
    Additional text here...
    </div>
</div>
<footer>
Copyright © domain.com 2014
</footer>

css code:

#main{
    background: #ffffff;
    width: 60%;
    margin: auto;
    padding: 20px;
    position:relative;
}

section{
    width: 75%;
    margin: 40px 0;
    padding: 0;
    line-height: 1.5em;
    min-height: 100px;
}

#sidebar{
    width:150px;
    position: absolute;
    margin: 60px 0 0 10px;
    padding: 0 20px 0 20px;
    right:0;
    bottom:0;
    top:0;
    line-height: 1.5em;
}

footer{
    width: 60%;
    background-color: #700505;
    text-align: center;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: auto;
    margin-bottom: 20px;
    color: #ffffff;
}

I realize that there might be unnecessary properties included...

UPDATE: Added the footer, hoping this resolves the issue. You will need to add numerous lines to trigger an overlap with the footer during testing.

htmlcsssidebar

Answer №1

Give this a shot...

CSS:

#container{
background: #f9f9f9;
width: 50%;
margin: auto;
padding: 15px;
position:relative;
}

article{
width: 48%;
display:inline-block;
vertical-align:top;
margin: 30px 0;
padding: 0;
line-height: 1.5em;
min-height: 80px;
}

#sidepanel{
width:120px;
display:inline-block;
margin: 40px 0 0 8px;
padding: 0 15px 0 15px;
 vertical-align:top;
right:0;
bottom:0;
top:0;
line-height: 1.5em;
}

footer{
width: 50%;
background-color: #324b6d;
text-align: center;
padding: 15px;
padding-top: 7px;
padding-bottom: 7px;
margin: auto;
margin-bottom: 10px;
color: #ffffff;
}

http://example.com/abc123/

If this doesn't meet your needs or you require further assistance, feel free to reply - I'm here to assist.

Answer №2

Your issue lies within the following code snippet:

postition: absolute;

By using absolute positioning, you are removing the sidebar from the regular layout flow, causing it to not interact with other elements. I recommend switching this out for:

float: right;

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

Transitioning jQuery .load and the usage of sorttable.js for sorting data

My jQuery code snippet is as follows: $("#loadBtn").click(function(){ $('#div1').delay(200).slideUp('slow') .load ('page2.php #div2').hide().delay(300).slideDown('slow'); return false; ...

javascriptjqueryhtmlajaxsorttable.js

Potential Performance Issue with Material UI's withStyles Function

I've been given the task of optimizing the loading speed of a page in our react redux web app. When the page load action is triggered, there seems to be a slight freeze lasting about half a second. After checking the profiler, everything seems fine ...

cssreactjsperformancematerial-uicss-in-js

Is it possible to create an HTML textarea that supports HTML formatting?

Is it possible to have HTML tag support in an HTML textarea within a form, similar to what is seen on Stack Overflow when asking a question? I would like to be able to capture the user's input in a textarea using PHP and print exactly what the user ty ...

phphtmltextarea

Sending the value from a for loop through AJAX and populating it into a form field

Currently, I have implemented a piece of JavaScript code that captures user input, sends a request to an endpoint using AJAX, and appends a specific field from the returned results as an option within a datalist. This functionality is working perfectly fin ...

javascripthtmljsonajax

Verify whether all the elements within a specific div are distinct by utilizing jQuery

I need to create a select box that, when an option is chosen, generates a certain number of textboxes within a div. Currently, there are three fields: display_name[], user_name[], and user_password[] The code for this functionality is as follows: <se ...

javascriptjqueryhtml

Images within the signature are not appearing as intended

Trying to find a way to display a company logo in an email signature without it being blocked by default on different email clients. Initially, I attempted uploading the image to the company website, but encountered the following error: So, I decided to t ...

htmlimageemailhtml-email

Display hyperlinks upon hovering over text

In the sign-up form, there are options for two different types of users: teachers and students. When the sign-up option is selected, a drop-down menu with choices for teacher and student will appear. However, I would like it to function more like other w ...

javascriptphpcss

Press the AngularJS button using just JavaScript and the element

I've been developing a browser extension that automatically clicks buttons on web pages, but I've run into an issue with sites using AngularJS. The code functions properly on most websites except for those built with AngularJS. Below is the snip ...

javascriptjqueryhtmlangularjsclick

Swap out the content in a text input box with the text chosen from a suggested autocomplete option

I am working on a text input box with auto-complete options displayed below it. I want to enable users to navigate through the options using keyboard arrows and "select" one, causing it to change color. How can I update the text in the input box with the s ...

javascripthtmljquerycss

Strategies for aligning a link on top of another div with absolute positioning

Looking for some assistance with my HTML and CSS code. Specifically, I need the position of the #header id to be set as absolute: <div class="main"> <a href="www.website.com"> <div id="header" class="other"> </div> #heade ...

htmlcsspositioncss-positionabsolute

When scraping daily HTML tables with Selenium, I am only able to retrieve the last page

Exploring web scraping to gather data for my latest project has been quite the adventure. This is my first attempt at extracting information from websites, specifically prices that are listed on a website. The challenge I am facing is that I require this d ...

pythonhtmlseleniumbeautifulsoup

Problem involving non-breaking spaces

After changing the font-family of my website from Gotham Pro to Gotham, I encountered an issue with the styling of numbers that were formatted using my currency formatter function. Strangely, when the &nbsp character is removed, everything appears to b ...

javascripthtmlcssreactjs

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

I am facing an issue with JQuery and JQuery UI. I thought upgrading to the latest stable version would solve it, but unfortunately, that was not the case. I am currently using Chrome. When I initiate the dialog by clicking on a specific element, everythin ...

javascriptjqueryhtmljquery-ui

The persistent Bulma dropdown glitch that refuses to close

In the project I'm working on, I have implemented a Bulma dropdown. While the dropdown functions correctly, I am facing an issue when adding multiple dropdowns in different columns with backend integration. When one dropdown is open and another is cli ...

javascriptjquerycssdropdownbulma

Ensure that two div elements expand to occupy the available vertical space

I am looking to create a layout similar to the following: |---| |------------| | | | b | | a | |____________| | | |------------| |___| |______c_____| Here is the code I have so far: <table> <tr> <td class="leftSid ...

csshtml-table

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

htmlcssformsmaterialize

Tips for toggling the appearance of like and add to cart icons

I am attempting to create a simple functionality for liking and adding items to a cart by clicking on the icons, which should immediately change the icon's color when clicked. However, I am facing an issue where the parent div's link is also bein ...

javascriptjqueryhtmlcssfbsdklikebutton

I need to update the class definition of a navigation menu item that contains an "a" tag with the class "section-link". How can I dynamically add the class "popover-link-a" to this definition using JavaScript?

If the grid in the body contains no data, then I want to display a pop-up message on the menu li element. This pop-up is triggered by adding the class popover-link-a. The current setup looks like this: <li id="tecrube" runat="server" ...

javascripthtmljqueryasp.net

Steps for Disabling col-sm and col-xs in Bootstrap 3

Hey there! I'm currently working on a template using Bootstrap 3. Initially, I planned to make it responsive for all devices, but I have since changed my mind and decided that the template is already complete. I've utilized col-md in each row, h ...

jqueryhtmlcsstwitter-bootstrap

Merge two separate arrays to create a new associative array

I'm faced with the challenge of merging two arrays of data obtained from an HTML form. The first array (payment_descriptions) is structured as follows: ["1st Desc","2nd Desc","3rd Desc"] While the second array (payment_ ...

phphtmlarraysjsonlaravel