Adjust the section and aside elements to automatically expand when used within the main tag

Is there a way to ensure that the inner-section and sidebar have a minimum height, while also expanding vertically along with the main tag?

Here is an example of the HTML code:

<body>
    <header></header>
    <main>
        <section>
            <section class="innersection">
                some content
            </section>
            <aside class="sidebar">
                snas
            </aside>
        </section>
    </main>
    <footer></footer>
</body>

And here is the CSS code:

main{
    width: 100%;
    min-height: 800px;
}

.innersection{
    float:left;
    width:94%;
    display:inline;
}
.sidebar{
    float:right;
    width:5%;
    display:inline;
}

Attempts have been made to implement this code, but it appears that the height of the main tag is not increasing as expected when including the inner-section and sidebar. For a visual reference, an image of the page has been provided.

Answer №1

It seems like you're looking to ensure that both .innersection and .sidebar have the same height, matching the height of their parent.

If that's the case, you can achieve this by setting main > section as a table and making both children table cells.

main{
    width: 100%;
    min-height: 800px;
}
main > section {
    width: 100%;
    display: table;
}
.innersection{
    width:94%;
    height: 800px;
    display:table-cell;
}
.sidebar{
    width:5%;
    display: table-cell;
}

JSFiddle

Answer №2

Give this a shot:

Try setting your main position to absolute

main{
    width: 100%;
    min-height: 200px;
    border:1px solid black;
    position:absolute;
}

.innersection{
float:left;
width:94%;
display:inline;
border:1px solid black;
}
.sidebar{
float:right;
width:5%;
display:inline;
border:1px solid black;
}

Check it out on JSFiddle

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

Removing a session when the client has left

I wanted to simplify what I'm trying to achieve. Imagine two people have PHP sessions on a webpage. One person leaves the page while the other remains. After 60 seconds, the session of the person who left should be terminated automatically (like a ti ...

Having trouble with the href attribute not properly redirecting to a different page

I am trying to create a hyperlink for an option that will take users to another page. All the other options on the page lead to different sections within the same page. When I add CONTACT, it doesn't work. All the files are in the same ...

CSS: selecting the adjacent siblings of a certain class, starting from the first and

I am working on achieving the following goal: https://i.sstatic.net/xHoIG.png Elements containing values should have a gray 'ribbon'. Elements with values are given a class selected, while elements without any value do not have this class. Thi ...

Visibility of the br tag is not detected

I need to keep one specific div visible on the page while hiding all other content. However, I am facing an issue where the <br> tag inside that div is not showing up. <div id='min320'>min 320px<br>screen width required</div ...

Trigger a JavaScript event when attempting to input the maximum number of characters

I am currently facing a challenge with implementing a tooltip on a text area that has a maximum character limit of 500. The tooltip should only appear when the user reaches the maximum character count and attempts to input more characters. My previous appr ...

Adjusting color schemes for Twitter Bootstrap Tooltips according to their placement

I have been attempting to customize the colors of tooltips (specifically from Twitter Bootstrap), but I am encountering some difficulties. While changing the default color was straightforward, altering the colors for .tooltip and its related definitions ha ...

Move the dropdown selection above all DIV elements

Check out this link: Make sure to select an option from the dropdown menu. Also, some of the options are hidden behind other elements. I noticed that if I target .join-form and remove overflow: hidden, the layout of the page becomes distorted. Can anyon ...

Navigate to the Bootstrap Panel body when the relevant link is clicked

I am facing an issue with a long list of panels that are tedious to scroll through. To make navigation easier, I am attempting to create a shortcut link at the top of the page. Below is the code for the shortcut: <a data-toggle="collapse" data-parent ...

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

Adaptable design tailored for smartphones

When it comes to developing mobile websites for various platforms such as iPhone 3 and 4, Android, Blackberry Torch, etc., I usually find myself needing to slice images based on the specific platform. The challenge arises from constantly having to slice im ...

Automatically copy any chosen selection on the page to the clipboard

Is there a way to copy any selection from a webpage to the clipboard, regardless of where it is located on the page (div, text input, password input, span, etc.)? I have created a function that can retrieve the selected text, but I am struggling with sett ...

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

I am currently working on creating a searchBar and customizing its CSS, but unfortunately, most of the styling properties seem to not be taking effect. So far, only changing colors seems to work as expected. .mainBar{ background-color: blue; width: ...

Move the navigation bullets of the Nivo Slider to the bottom instead of below the slider

Currently working on a website and have incorporated Nivo Slider to develop a jQuery slider. Encountering an issue with the bullets that indicate which slide the user is currently viewing. I'd like these bullets to be displayed on the images within t ...

How about designing a button with a dual-layered border for a unique touch

Looking for a specific button: My attempted CSS code that's not working: button { font-family: 'Ubuntu', sans-serif; font-size: 1em; font-weight: bold; color: white; border: 3px double #f26700; background: #f26700; ...

A subtle background image with an overlay of a transparent RGBA gradient

Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradien ...

Tips on ensuring the first column of an HTML table remains fixed in responsive design

I am trying to create a responsive HTML table where the first column remains fixed. I have a select box on my PHP page and I am using AJAX to display data from a database in the HTML table. However, when selecting a value in the select box in a responsiv ...

Is there a way to enable scrolling on the page upon loading, without moving the embedded PDF object itself?

After embedding a PDF object on my webpage, I noticed that when loading the page and scrolling using the mouse wheel, it actually scrolls up and down inside the PDF instead of moving through the entire page. To fix this issue, I have to first click in a bl ...

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

Struggling to perfectly align a Wufoo form within an iframe using CSS

I have integrated a web form from Wufoo into my webpage using an iframe. Custom CSS can be used to style the form and I am trying to center it within the iframe. Below is the HTML code of the form displayed in the iframe: <div id="container" class="lt ...

Using jquery to update a link when a different link is clicked

Recently, I've started using JQuery and encountered a challenge. When I click on the first link, an Ajax request is sent to the server and data is received successfully. However, in the callback function, I'm struggling to change the display text ...