What could be causing my page's wrapper to shrink upon logging in?

After logging out, the background of my page wrapper expands to cover 100% of the page. However, once you log back in, it shrinks and adjusts to the width of the member bar...

TO TEST USER ACCOUNT BELOW:

USERNAME: TEST PASSWORD: TEST123

HTML FOR LOGGED OUT...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Rest of the HTML code for logged out state -->

HTML FOR LOGGED IN...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Rest of the HTML code for logged in state -->

BOTH USE THE SAME CSS FILE...

body{
    /* CSS styles shared by both states */
}

/* Additional CSS styles specific to certain elements based on login state */

I DOUBT YOU WILL NEED THE PHP BUT HERE IT IS FOR LOGGED OUT

<!-- PHP code removed for conciseness -->

PHP FOR LOGGED IN

<!-- PHP code removed for conciseness -->
htmlcss

Answer №1

One issue arises when you fail to properly close #header, causing #wrapper to be mistakenly nested inside as a child rather than a sibling element.

To resolve this, ensure to insert </div> right before <div id="wrapper"> in order to correctly close the <div id="header">

Answer №2

Oriol mentioned the importance of adding a closing DIV for your #header.

Make sure to close the #header section with the following code:

    <div id="member">
        <ul id="loggedin">
            ................
        </ul>
    </div>
</div> /*--------Don't forget to add the closing div tag--------*/
<div id="wrapper">
    <div id="core">
        <div id="leftsend">
            <div id="leftside"></div>
            <div id="rightside">

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

Engaging Floor Layout

Currently, I am in the process of developing an interactive floorplan for an office project. The main objective is to provide a user-friendly interface where individuals can search for a specific employee and have their respective office location highlight ...

javascriptjqueryhtmlsvg

Ensure the video fills the entire width of its parent element and adjusts its height accordingly to maintain a 16:9

I am looking to make both videos fill 100% width of their parent element while keeping their aspect ratio intact. The parent element takes up 50% of the window's width, so the videos need to be responsive. I have come across numerous solutions that ...

javascripthtmlcssvideoyoutube

Trouble with AngularJS Controller Displaying/Hiding Content as Expected

I'm struggling to make content disappear when a button is clicked and then show a new set of content upon that button click. I can't seem to get it to work as intended. The first section simply does not disappear when the button is clicked. The s ...

javascripthtmlangularjscontroller

Troubleshooting navigation problems in AngularJS Bootstrap Navbar

Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...

javascripthtmlcssangularjstwitter-bootstrap

Issues with styling classes using global SCSS in React are causing unexpected behavior

Currently, I am working on a React project that includes the use of SASS for styling purposes. While implementing modular CSS in my components, I have encountered an issue with applying styles from a main.scss file in my Layout.js component. The unique a ...

cssreactjssassselectornext.js

"Concealing specific choices in Autocomplete with reactjs: A step-by-step guide

I am looking for a way to hide the selected option in a Dropdown menu so that it does not appear in the next dropdown. For example, if "Hockey" is selected in the first dropdown, it should not be displayed in the second dropdown; only "Baseball and badmint ...

cssreactjsmaterial-ui

Pass the radio button value and accompanying text to a PHP script

I am struggling with sending both the radio button value and text to php. Currently, I can only send the radio button value. However, I want to also include the text after the radio button without altering the checkbox information. <input name="li ...

phphtml

Can object methods be called using inline event attributes in an HTML tag?

Exploring the depths of core JavaScript has been my latest obsession. It's fascinating how we can easily trigger functions within the global context using events like this. HTML <span class="name" onclick="clicked()">Name</span> JavaSc ...

javascriptjqueryhtml

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss

Several radial progress charts in JavaScript

While attempting to recreate and update this chart, I successfully created a separate chart but encountered difficulties with achieving the second progress. The secondary chart <div id="radial-progress-vha"> <div class="circle-vha ...

javascriptjquerycssprogress-barprogress

Include a custom HTML element on a webpage using Python's Selenium module

I am looking to modify the HTML of a webpage by adding an element. Prior to modification: div p something /p /div Post modification: div form p something /p /form /div Is it feasible to accomplish this task? I would greatly appreciate any guidance. Than ...

pythonhtmlseleniumelement

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Creating a static website utilizing React. Description I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below. visual effect The goal is to design a rectangular background with triangles cut out from it ...

cssreactjsgraph

Utilizing CSS grid layouts to ensure images expand to fit the dimensions of the designated column and

I am currently working with a CSS grid layout that is displaying as follows: .image__gallery-grid { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.5rem; dis ...

htmlcss

Navigating HTML with Node.js and Express.js

I have been working on routing multiple HTML pages in my project. The index.html file loads without any issues, but when I try to load raw.html, an error message pops up: Error: Failed to lookup view "error" in views directory Below is part of my app.j ...

javascripthtmlnode.jsexpress

What is the best way to obtain the inner ID with JQuery?

How can I assign values to inside id using JQuery? Sample code from controller.cs: public GroupModel Get() { IGroupTypeRepository groupTypeRepo = new GroupTypeRepository(); IGroupRepository groupRepo = new GroupRepository(); var model = new ...

javascriptjqueryhtmlasp.net-mvc

Modifying the page header content using JavaScript

There's this snippet of code that alters the image on another page: <div class="imgbx"> <button onclick="window.location.href='index.html?image=images/xr-black.jpg&tit=XR-black'" >Invisible ...

javascripthtml

A guide on utilizing Python with Selenium to navigate to a specific field within a frame

I am seeking assistance in using Selenium with Python to target a specific element that seems to be located inside a frame. Specifically, I am attempting to select the element with 'id' = 'kiadvany_cim' within what appears to be a windo ...

pythonhtmlselenium

There seems to be a hitch in the functioning of the JavaScript codes

I'm having trouble calculating the amount using jQuery. Could someone please review my code and let me know what's wrong? Here are my Javascript and jQuery codes: After making changes: $(document).ready(function() { $('.home_banner&ap ...

javascriptjqueryhtml

Decrease the height of a div element from the top with the use of jQuery

My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...

javascriptjqueryhtmlcss

Ways to create a self-contained video viewer

Is it possible to create a self-contained video player similar to jwplayer or the YouTube video player using just HTML, CSS, and JavaScript? I know that I can build a video player by utilizing the video tag along with some custom javascript and css, but ho ...

javascripthtmlcssyoutubevideo-player