What steps should be taken to prevent divs from overlapping a centrally positioned, unchanging div when the browser is resized

Looking to create a layout with two columns, featuring a fixed sidebar on the left and centering the main content area. The goal is for the centered content to remain in place when resized and not move further left than where it touches the nav bar (left: 150px).

Seeking assistance, please!

Below is the CSS:

@charset "UTF-8";
/* My CSS Styles */

body,td,th {
    font-size: 16px;
    font-family: Verdana, Geneva, sans-serif;
    color: #000;
}

body {
    background-color: #FFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 0px;
}

#nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 10000px;
    background-color: #D61D21;
    text-align: right;
}

#nav a:link {
    color: #FFF;
    text-decoration: none;
}

#nav a:visited {
    color: #FFF;
    text-decoration: none;
}

#nav a:hover {
    color: #FFF;
    text-decoration: underline;
}

#main {
    width: 810px;
    height: 810px;
    margin: 0px auto;
}

And here is the HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="nav">
        <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="My Web Designs"></a>
        <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p>
        <p><a href="logos.php">LOGOS</a> &nbsp;</p>
        <p><a href="print.php">PRINT</a> &nbsp;</p>
        <p><a href="web.php">WEB DESIGN</a> &nbsp;</p>
        <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p>
        <p><a href="contact.php">CONTACT</a> &nbsp;</p>
    </div>

    <div id="main">
        ENTER YOUR CONTENT HERE
    </div>

</body>
</html>

Your help is much appreciated! Thank you.

Answer №1

Follow these instructions:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Designs by Nick Passaro</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="nav">
        <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a>
        <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p>
        <p><a href="logos.php">LOGOS</a> &nbsp;</p>
        <p><a href="print.php">PRINT</a> &nbsp;</p>
        <p><a href="web.php">WEB DESIGN</a> &nbsp;</p>
        <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p>
        <p><a href="contact.php">CONTACT</a> &nbsp;</p>
    </div>

    <div id="wrapper">
        <div id="main">
           INSERT CONTENT HERE
        </div>
   </div>
</body>
</html>

CSS:

#wrapper{
    margin-left: 150px;
}

To align your content with the navigation bar, wrap your main content in a div with a left margin of 150px. This ensures that any elements within the main div stay within the wrapper.

Answer №2

Recently, I stumbled upon a clever technique where you set your #content to position: relative; and then set all child elements within it to position: absolute; This makes all child elements absolutely positioned within your content area, allowing the content to adapt to any screen resolution effortlessly. This simple trick has saved me so much time and eliminated the struggles I used to face while designing dynamic websites.

I hope this tip proves helpful for you as well.

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

Please click the provided link to display the data in the div. Unfortunately, the link disappearance feature is currently not

What I'm Looking For I want the data to be displayed when a user clicks on a link. The link should disappear after it's clicked. Code Attempt <a href="javascript:void(0);" class="viewdetail more" style="color:#8989D3!important;">vi ...

I haven't quite reached success yet, but I am working on getting my slideshow to display on my local server

My homepage is fully loading, but the slideshow feature is not functioning correctly. I have a file called slide.js in my /lib directory that I am trying to integrate into my homepage. The images are referenced properly and working, but they are not displa ...

How can I ensure that the Hamburger menu fully covers the entire viewport when it is open?

My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...

Tips for creating text that adjusts to the size of a div element

I'm currently working on developing my e-commerce website. Each product is showcased in its own separate div, but I've encountered a challenge. The issue arises when the product description exceeds the limits of the div, causing it to overflow ou ...

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...

Margin not being applied to last element in parent - any ideas why?

Why does the margin of the last element, whether it is a <p> or <h1>, not have any impact? It should be pushing the background of the parent container downwards. .container { background: grey; } h1 { margin-bottom: 3em } p { margin- ...

guide on updating JQuery string with JavaScript to incorporate new parameters

Similar Question: How to replace only one parameter or fast with Jquery on Jquery String The website has a query string as follows: http://www.nonloso.html/?nome1=pollo&cognome1=chicken&nome2=a&cognome2=b&nome3=c&cognome3=d This ...

Executing an .exe file directly through a web browser (using any method)

Currently, I am managing various devices within a local network through a page. However, there are certain advanced settings that can only be accessed by using an .exe file located on the computer where the configuration page is run. I would like to stream ...

Selenium RC: Utilizing the CSS :contains pseudo-class for Element Selection

I have a task to verify that the data in a table row matches my expectations for two different tables. Let's look at an example using HTML: <table> <tr> <th>Table 1</th> </tr> <tr> <t ...

Ways to modify the hue of an li element in the context menu upon hovering

I'm currently working on a project that involves VueJS and Bootstrap. To enhance user experience, I've incorporated a context menu using the npm package called vue-context Vue Context Menu When a user hovers over an item on the context menu, the ...

How can I retrieve the value of a div nested within another div?

Alright, let's talk about a situation where we have a draggable HTML div element: <div id="server" draggable="true" ondragstart="return dragStart(event)">Server</div> and also a target div: <div id="target1" ondragenter="return dragE ...

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

Improving User Experience with HTML Form Currency Field: Automatically Formatting Currency to 2 Decimal Places and Setting Maximum Length

Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...

The button is not being vertically centered when using the boostrap pull-right class

---------------------------------------------------------------- | Title | | Button | --> (using .pull-right) the button is not aligned vertically ------------------------------------------------------------- ...

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

Managing excess space in a flexbox: Tips for handling events

Is there a way to manage events triggered by clicking on the violet-colored space around elements? I tried adding a general onclick event to the container, but it seems to be interfering with the individual item behaviors that already have their own intern ...

Is there a way to choose the preceding element in Selenium depending on a specific condition?

In my HTML code below: <div class="row"> <div><span class="checkbox"></span></div> <a title="something"></div> </div> <div class="row"> <div><span ...

Why is there a discrepancy between the value displayed in a console.log on keydown and the value assigned to an object?

As I type into a text box and log the keydown event in Chrome, I notice that it has various properties (specifically, I'm interested in accessing KeyboardEvent.code). Console Log Output { altKey: false bubbles: true cancelBubble: false cancelable: t ...