When I increase the height of my side bar to 100%, it extends beyond the borders of the container div in CSS

I am facing an issue where my sidebar overflows the container div's border when I set its height to 100%. Is there a way to adjust its height to be 100% minus a specific number of pixels?

Below is the source code:

<div id="main">
    <br /><br />
    <div class="content">
        <div id="sidecontent">
            <h1 id="title">Title</h1>
            *****
        </div>
        <div id="sidebar">
            <div class="sidebox">
                ****
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>


#main {
    position: relative;
    background:transparent url('/public/images/main_bg.png') top left repeat-y;
    padding:37px 37px 37px 37px;
    margin-left: auto ;
    margin-right: auto ;
    width:940px;
    min-height: 363px;
}
#main div.top, #main div.bottom {
    height:70px;
    width:1015px;
    position: absolute;
    left:0px;
}

#main div.content {
    padding:0 15px 0 15px;
}

#sidecontent {
    width: 675px;
}

#sidebar {
    background: #fff url('/public/images/bg_side.png') top right repeat-y;
    position: absolute;
    height: 100%;
    right:34px;
    top:42px;
    width: 200px;
    padding: 10px 10px 0px 40px;
    z-index:50;
}

.created_at {
    color:gray;
}       

.sidebox {
    margin-bottom: 5px;
}

#main div.top {
    top:-70px;
    background: transparent url(/public/images/main_top.png) bottom no-repeat;
}

#main div.bottom {
    bottom:-70px;
    background: transparent url(/public/images/main_bottom.png) top no-repeat;
}
htmlcss

Answer №1

Check out this informative resource for tips on creating equal height columns using CSS methods.

Answer №2

To create some space around it, consider adding a margin or using padding for the surrounding div if it's nested within one.

For example, to add margin within the container div:

margin-bottom: 5px;

Alternatively, you can use padding within a div surrounding the container div:

padding-bottom: 5px;

Another option is to insert a div right after it in the html and apply margin-top to push it up slightly.

If you need further clarification on what you're trying to achieve, please provide more details.

You could try implementing the following code:

<head>
<style type="text/css">
#main {
        position: relative;
    background:transparent url('/public/images/main_bg.png') top left repeat-y;
    padding:37px 37px 37px 37px;
    margin-left: auto ;
    margin-right: auto ;
    width:940px;
    min-height: 363px;
        }
        #main div.top, #main div.bottom {
        height:70px;
        width:1015px;
        position: absolute;
        left:0px;
        }

        #main div.content {
        padding:0 15px 0 15px;
        }

        #sidecontent {
        width: 675px;
        }

        #sidebar {
                background: #fff url('/public/images/bg_side.png') top right repeat-y;
        position: absolute;
        height: 100%;
                right:34px;
                top:42px;
        width: 200px;
        padding: 10px 10px 0px 40px;
                z-index:50;
        }

        .created_at {
        color:gray;
        }       

        .sidebox {
        margin-bottom: 5px;
        }

    #main div.top {
        top:-70px;
        background: transparent url(/public/images/main_top.png) bottom no-repeat;
        }

    #main div.bottom {
        background: transparent url(/public/images/main_bottom.png) top no-repeat;
        }
</style>

</head>

<body>
<div id="main">
    <br /><br />
    <div class="content">
        <div id="sidecontent">
            <h1 id="title">Title</h1>
            *****
        </div>
        <div id="sidebar">
            <div class="sidebox">
                Here is some content in the sidebox class div....
            </div>
        </div>
    </div>
    <div class="bottom"></div>
</div>
</body>

The instruction has been updated by eliminating the 'bottom:' part from the #main div.bottom css rule.

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

Transfer your WAMP HTML/CSS/JS to Node effortlessly and seamlessly

If there is an HTML file along with its associated CSS, JS, and image files in Wamp, what is a fast method to serve this using Node.js? Let's say the file is index.html. ...

htmlnode.js

Dynamically taking input in Vue JS while using v-for loop

Hey there! I'm trying to get input in this specific manner: itemPrices: [{regionId: "A", price: "200"},{regionId: "B", price: "100"}] Whenever the user clicks on the add button, new input fields should be added ...

javascripthtmlvue.jsvuejs3v-for

Questions about syntax: What is the correct course of action?

If there is a child inside a div with an id, such as id="mother", how should the css be written correctly? Example: 1) #mother ul li {...} or 2) .mother ul li {...} Is there a difference? The second example I came across when MOTHER had a class name, ...

htmlcsssyntax

Can you provide the name of the slideshow plugin used on the Wipro website?

Can anyone tell me the name of the image slide show featured on: http://www.wipro.com/index.htm? Also, does anyone know where I can find the script for free? I am looking to incorporate it into a page that is coded in php, html, css, and javascript. Than ...

javascriptjqueryhtmlcss

What is the best way to extend a floated element to completely occupy the vertical space within the viewport?

Creating a help system using Bootstrap. The goal is to have the left navigation fill the vertical space, regardless of the size of the menu or content. In addition, the footer should remain at the bottom of the page when there is minimal content but shoul ...

htmlcsstwitter-bootstrapcss-float

Converting yard values to meter values using AngularJS: A comprehensive guide

My task is to convert meter values to yard using two dropdowns. The first dropdown contains various values, while the second dropdown has "meter" and "yard" options. If "meter" is selected in the second dropdown, the values in the first dropdown remain unc ...

htmlangularjsvalueconverter

What is the best way to create a box in the shape of an octagon

Trying to achieve the unique box design shown below using CSS. I researched various resources, such as https://css-tricks.com/examples/ShapesOfCSS/, but encountered an issue with the purple border cutting edges. Attempted using an octagon shape without su ...

htmlcsscss-shapes

JavaScript for Color Swapping on Click Event

While working on coding a website, I attempted to change colors and pictures onclick using JavaScript to edit the CSS. However, the code is only partially functional. Only the "txtArea" field changes color. After checking validators and consoles, everyth ...

javascripthtmlcssvalidationdebugging

Sending information from a dynamic table to a database using PHP

I've created an HTML webpage with a table that fetches data from my database. Each row in the table has a button that, when clicked, dynamically adds the data into another table on the webpage using JavaScript. The dynamic table includes a submit butt ...

javascriptphphtmlmysql

Modify a singular aspect of shorthand background attribute

Imagine using the shorthand background property to define multiple properties. For example: .img { background: url('/Content/images/a.png') no-repeat scroll 100% 3px; } If you need to override just the background-position of the image, sh ...

cssoverriding

The alignment of the DIV elements is not as I had hoped

I currently have three different divs on my webpage. Two of them are background divs stacked on top of each other, while the third one contains content and is positioned within the lower background div. My issue arises when I try to make the content div co ...

htmlcss

Unable to Retrieve Modified Content with $().text();

In the process of developing an app, I am encountering a challenge where I need to transfer user input to another element after processing it. However, I am facing an issue with accessing the updated value of the <textarea> using .text(), as it only ...

javascriptjqueryhtmldom

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

Adjust the size of an element by utilizing a different element

I'm facing a challenge with this code. I need to dynamically set the width of the "wrap-description" divs to be equal to the width of the corresponding "picture-damage" images plus an additional 20 pixels. Since there will be multiple elements for bot ...

cssangularjsangularjs-ng-repeatdirectiveng-style

Modify styling of complete list upon clicking in React

For my latest project, I developed a basic todo application using React. One of the key features is that when a user clicks on a checkbox, the corresponding todo item's CSS changes to show a strike-through effect. Additionally, a button appears on hov ...

cssreactjs

Material-UI React Native components: Injecting Styles without Props

import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...

cssreactjstypescriptreact-nativematerial-ui

What's the best way to ensure a paragraph element larger than its container is centered using bootstrap?

Need help with centering a paragraph element (email) that is larger than its container: https://i.sstatic.net/f3E55.png Here's the code I have so far: <div class="col-lg-2 col-lg-offset-1 text-center"> <a href="mailto:{{ site.email }}" ...

htmlcssbootstrap-4

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: https://i.sstatic.net/1Hwd2.jpg I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displayi ...

javascriptcssd3.jssvg

Is it possible to obtain the className of a leaflet divIcon within the <style scoped> portion of a vue component?

If you're looking for a Vue 2 sample project, check out this link When working on the declaration of divIcon in LeafletTest.vue, here is an example: const cloudIcon = L.divIcon({ html: thecloud, className: 'my-custom-icons& ...

javascriptcssvue.jsvuejs2leaflet

Adjusting images of various sizes within a single row to fit accordingly

I am faced with a challenge of aligning a set of images on a webpage, each with varying heights, widths, and aspect ratios. My goal is to arrange them in a way that they fit seamlessly across the screen while ensuring their heights are uniform. Adjusting ...

javascripthtmlcss