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

What causes the table to expand with new cells once the database information is shown?

I'm confused as to why an empty cell is being added to the right even if there is data from the database to display. This particular code is meant to showcase a school schedule. Attached is a picture showing how it currently appears. Below is the PH ...

phphtml

The challenge of PHP's HTTP_REFERER

I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...

javascriptphphtmlajaxhttp-referer

The list in the navbar is misaligned and not centered vertically within the flex container

I've been working with flex for a while now, but I'm struggling to vertically align the content of my navbar to the center in the code. <nav className="nav navbar"> <h3> Logo </h3> <ul className= &q ...

htmlcssreactjs

What is the reason behind my button appearing beneath my links in React?

Here is an image showcasing the current header render. The header consists of a HeaderMenu and 3 Links. While the links are functioning properly, the HeaderMenu is causing the links to be positioned below it. The HeaderMenu includes a div that wraps a Butt ...

javascripthtmlcssreactjsmaterial-ui

reduce the size of the image as the browser width decreases

Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...

javascripthtmlcss

Using Javascript to Trigger Events on Selection

I have a unique situation: 1) One of my dropdown's choices features various car names. 2) Another dropdown has two options: When selecting each option in the second dropdown, the following should occur: a) Choose UserInput - This action will hide ...

javascriptjqueryhtmlcss

Click to add a card

Attempting to incorporate a new row with the click of a button dynamically has proven to be challenging for me. As someone who is relatively new to JavaScript, I am struggling to figure it out. In the demonstration provided below, you will notice that noth ...

javascripthtmljquerycss

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

javascriptcss

Can a function be embedded within a React render method that includes a conditional statement to update the state using setState()?

My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...

javascripthtmlreactjsjsx

How can I redirect a remote image URL to a local folder during development?

Currently, I am pulling image URLs from a database that was dumped from the production server. An example of one of these URLs is https://example.com/imageStorage/photo.jpg. These URLs are then used to display images in HTML templates using the following f ...

htmlnode.jsangularexpressreverse-proxy

styled-components: the parent's styles take precedence over the child's styles

image export const LogOutButton = styled.button` display: inline-block; .... `; export default styled(ThemedApp)` .... button { .... display: flex; .... } `; Upon inspection, it is evident that the Logout button (with class gBuhXv) ...

cssreactjsstyled-components

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

Here is the issue I'm facing (notice how the yellow tiles are overflowing): (view image here) because my reputation points are not enough. The screenshot above illustrates how the small yellow rectangles are extending beyond the boundaries of the gr ...

htmlcsslayout

choose a distinct value for every record in the table

My goal is to only change the admin status for the selected row, as shown in the images and code snippets below. When selecting 'in-progress' for the first row, I want it to update only that row's status without affecting the others. <td ...

htmlangulartypescript

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript

The Chrome browser's default stylesheet is overriding the styles of my website

I'm experiencing an issue with the CSS styling on one of my website pages. Here is the CSS code for formatting links: a:link, a:visited, a:active { color: white; text-decoration: none; font-weight: bold; } However, despite these styles, ...

htmlruby-on-railscssgoogle-chromeweb

Transferring data from a form to a function in JavaScript

Hey there! I've been working on a form that sends a value to a new window, but for some reason, the value val2 is showing up as null in the new window instead of being passed. Here's my code: function sendValue(value) { ViewImg = window.ope ...

javascripthtmlforms

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

javascriptjqueryhtml

The text is not displaying as expected due to a timeout issue

Trying to create a pop-up that functions as follows: After 3 seconds, the close button should appear, but during those 3 seconds, there will be a countdown. However, I'm encountering an issue where no text is being displayed. var n = 3; function p ...

javascriptjqueryhtmldom

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

I'm currently working on developing a web application using Framework7. Framework7 offers routing APIs for navigating between HTML pages. It seems that the pages are loaded dynamically through AJAX requests. I am curious if it is possible to preload ...

javascriptjqueryhtmlcsshtml-framework-7

Counting words with JavaScript without using an input tag is a useful skill

Is there a way to count the words in a text using only p and span tags, without using input tags? How can this be achieved? <span class="word" id="word">Words Number</span> <p class="any" id="any"> ...

javascripthtml