The primary division grows continuously in size

Currently setting up a basic layout for my homepage.
Here's how I envision it:

Having trouble defining the size of the main div. I want it to dynamically expand in both height and width, filling the remaining space not taken by menu and footer.

HTML:

<body>
    <div class="container">
        <div class="nav">
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
            </ul>
        </div>
        <div class="main">
           Text...
        </div>
        <div class="footer">
            Footer
        </div>
    </div>
</body>

CSS:

.nav, .content{
    display: inline-block;
    vertical-align: top;
}
.nav{
    width: 200px;
    background-color: #ccc;
}
.main{
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #aabbcc;
}
.footer{
    background-color: #ff9999
}

Example can be viewed here: http://jsfiddle.net/48q5f4u9/3/

htmlcsslayout

Answer №1

To begin, start by resetting:

* {margin:0;padding:0}

Next, apply 100% to the body, html tags and the main container .container:

html,body, .container {
    height:100%;
}

Now, utilize the calc() function to set the dimensions, for example:

.main{
    height: calc(100% - 50px);
    width: calc(100% - 200px);
    overflow: hidden;
    background-color: #aabbcc;
}

Check out the DemoFiddle here

Answer №2

.sidebar{
    width: 200px;
    float: left;
    background-color: #ccc;
}

Visit Fiddle

This code snippet demonstrates a simple way to create dynamic content by setting the sidebar to float. However, to enhance the design further, consider positioning the footer at the bottom of the page for a more appealing layout.

I hope this suggestion proves helpful. Let me know if you have any questions or need further assistance!

Answer №3

To achieve a sticky footer, use absolute positioning and the border-box model for both the main content and navigation elements. Manipulate padding to accommodate their fixed sizes:

* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
}
.main, .nav { 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    min-height: 100%;
    margin-bottom: -50px;
    overflow: hidden;
}
.nav {
    position: absolute;
    left: 0;
    padding-bottom: 50px;
    top: 0;
    width:200px;
    height: 100%;
    background: #1abc9c;
    z-index: 1;
}
.main {
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 50px 200px;
    background: #3498db;
    height: 100%;
    position: absolute;
    left: 0;
}
.container:after {
      content: "";
      display: block;
}
.footer, .container:after {
      height: 50px; 
}
.footer {
    position: relative;
    background-color: #e74c3c;
    z-index: 2;
    width: 100%;
}
<div class="container">
    <div class="nav">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </div>
    <div class="main">
        Text...
    </div>
</div>
<div class="footer">
    Footer
</div>

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

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning

What could be causing site container not to respond to height:auto?

I have encountered an issue while developing a website using absolute height values. I am puzzled as to why the height:auto property is not working for me. Can anyone provide some insight on this? HTML Structure <div id="site-content"> <div id=" ...

htmlcssheight

"Exploring the world of CSS3: Arrow shapes and animated effects

Looking at the image provided, my task is to create and animate it. I was considering using CSS3 border-radius instead of an actual image. Below are the HTML and CSS code that I have so far. The animation I envision involves the arrow gradually appearing ...

jqueryhtmlcssjquery-animate

What is the method for conducting rspec tests on HTML attributes?

Using Ruby, I have generated the following HTML: <%= link_to "change", "http://gravatar.com/emails" %> which creates this link: <a href="http://gravatar.com/emails">change</a> However, I want to make sure that the link opens in a new ...

htmlruby-on-rails-3rspec

The color attribute enhances the appearance with a colored border specifically designed for Chrome users

Starting off, I appreciate the border that Chrome applies to my inputs. However, I am facing an issue with the textarea element. The problem is that the textarea uses the color attribute not only for coloring the text but also as the border color. Here is ...

cssgoogle-chrome

occupying half of the screen

Having trouble displaying two videos in an ionic grid. My goal is to have both videos take up the entire screen, with each occupying 50% height and 100% width. However, when I try to achieve this, the ion-row only takes up 50% of the screen and the video i ...

htmlcssionic-frameworkhtml5-video

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

javascriptjqueryhtmlcssaccessibility

Trigger a keypress event following the activation of a button

I've been trying to simulate the press of the backspace key on the keyboard after clicking a button, but all my attempts have been unsuccessful. Here is the code I'm using: function rtf(){ document.getElementById("u0u").focus(); $('#u0u ...

javascriptjqueryhtml

The CSS transition for a DIV on an iOS Safari browser is experiencing a lag

In an attempt to optimize CSS transitions in the IOS Safari browser, I decided to use the transform: translate() property instead of changing the left property like other suggestions. Unfortunately, this approach did not yield the expected results as the ...

htmlcsscss-transforms

`Center Google My Map Location - Embedded in the Middle of the Page`

Recently, I transitioned to using an embedded My Map for a business with 2 locations. However, I encountered some challenges in customizing the map's height, width, and centering on the page. Is there a way to resolve this issue? New HTML code which ...

htmlgoogle-mapsjoomla

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

javascriptjqueryhtmlajaxforms

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss

Personalizing Material-UI Components using Styled-Components

My attempt to modify the props of a material-ui Grid component using styled-components was not successful. I initially tried: const NavGrid = styled(Grid)` direction: 'row'; ` Unfortunately, this approach did not yield the desired result. T ...

javascriptcssreactjsmaterial-uistyled-components

Fill various dropdowns with a list or array of values discreetly without displaying the populated values on the visible interface

I have an array with values 1,2,3,4. Using an add function, I am able to create multiple dropdowns. By default, the first dropdown always has a value of one when initially set up. When we press add and populate the second dropdown with values 2,3,4, tho ...

javascripthtmlarraysangularjsdata-structures

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 ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to extract the image tag from HTML code and use it as the image source in Glide for images

I recently came across a method to extract image links from HTML img tags using the Html Java library. It requires using the fromHtml method. After pulling some HTML code from an RSS feed, I wanted to display the images it contained. The code snippet belo ...

javaandroidhtml

I am facing an issue where new tags are not being created when I pre-fill values in the tags input field on Bootstrap

When working on the Product Edit Page, I successfully displayed the old data that was selected previously. However, I am facing an issue with adding new tags. The new tags do not appear when I press enter or space after typing in the input field. It is pos ...

javascripthtmljquerycssbootstrap-4

Click here to view the latest Poll Results!

I have implemented AJAX to display poll results on the same page without requiring a refresh. An issue I am facing is that the poll section occupies about three times more space than the results. This causes an inconvenience for users who vote, as they ma ...

phphtmlajax

Implementing two background images and dynamically adjusting their transparency

With the challenge of loading two fixed body background-images, both set to cover, I encountered a dilemma. The text on the page was extending below and scrolling, along with top and bottom navigation icons. As expected, the second background covered the f ...

javascripthtmlcss