What can I do to prevent a panel from being pushed beneath two other panels when the window size is reduced?

These are my three panels:

 ___    _________    ___
|   |  |         |  |   |
|   |  |         |  |   |
|   |  |         |  |   |
|   |  |         |  |   |
|___|  |_________|  |___|

When I resize the window slightly, the layout changes:

 ___                ___
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|___|              |___|
 _________ 
|         |
|         |
|         |
|         |
|_________|

Here is the code snippet:

<style>
   .SidePanel {
       background-color:#9999CC;
       width:100px;
       height:597px;
   }
</style>

<div style="text-align:center;">
         <div style="float:left">
             <asp:Panel ID="Panel4" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
         </div>

         <div style="float:right">
                    <asp:Panel ID="Panel5" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/> 
         </div>

         <div style="display:inline;">
             <asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px" Width="900">
                 ...content...
             </asp:Panel> 

            </div>
</div>

How do I prevent this layout change?

Revised code based on feedback:

<style>
  .SidePanel {
      background-color:#9999CC;
      height:597px;
  }
</style>

<div style="text-align:center; min-width:1024px; width:100%;">
            <div style="float:left; width:10%">
                <asp:Panel ID="Panel4" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
            </div>

            <div style="float:right; width:10%">
                <asp:Panel ID="Panel5" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/> 
            </div>

            <div style="width:70%">
                <asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px" style="width:100%;">
asp.netcss

Answer №1

Check out the code snippet below:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Three Panels in a Row</title>
<style>
#wrapper
{
min-width:900px;
overflow:auto;
}
.panelSmall
{
float:left;
width:120px;
background-color:#990000;
}
.panelBig
{
float:left;
width:660px;
background-color:#6699CC
}
</style>
</head>

<body>
<div id="wrapper">
<div class="panelSmall">&nbsp;</div>
<div class="panelBig">&nbsp;</div>
<div class="panelSmall">&nbsp;</div>
</div>
</body>
</html>

Fingers crossed this does the trick!

Answer №2

Have you considered enclosing it in a wrapper with a specified minimum width? It might be worth exploring alternative solutions for this issue. Would you mind sharing the full layout? Perhaps a link to a live webpage or a diagram of the layout?

Answer №3

It appears that the middle panel has been compressed. To confirm, insert a wrapping div with a specific width (e.g. 1000) and assign explicit widths to all other elements as well. Keep in mind there is a 2px border - so subtract a total of 4 from each dimension.

Additionally, consider changing the 'inline' attribute of the middle div to 'float=left'.

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

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

jqueryhtmlcssseleniumdrag-and-drop

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

htmlcssangulartypescriptangular-reactive-forms

What are some ways to connect my CSS styles without encountering a MIME error?

Working on a Nodejs - Express - Vanillajs project, I encountered an issue when testing my routes. The index page failed to load CSS, displaying the following error message: Refused to apply style from 'http://localhost:3000/public/css/bootstrap.min. ...

javascripthtmlcssnode.jsexpress

Error: Type Error - 'style' is not defined in the Progress Bar Project

Having recently started learning Javascript, I have been engaging with various tutorials and projects in order to gain familiarity with the language. One particular tutorial that caught my attention is a Progress-Bar tutorial by "dcode" available at this l ...

javascripthtmlcssprogress-bartypeerror

Tips for loading and updating data simultaneously in VUEJS from a single input

Currently, the data is displayed in a span tag with an input for updating it Is it possible to fetch data from an API, load it into an input field, update the input with new information, and send it back? What are the best approaches for achieving this? ...

javascripthtmlcssvue.jsvuejs2

execute a postback to refresh UpdatePanels

My webpage has a jQuery modal that pops up when a button is clicked. After performing some logic in the WebMethod called by this button, I need to refresh multiple update panels on the page to show the changes made. Although I am not very familiar with Up ...

jqueryasp.netajaxupdatepanel

Stop the iframe video when the modal is closed

I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos. The issue arises when, as mentioned in the comments on the tutorial page, there ...

javascripthtmlcss

Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript. While I have made significant progress towards my goal, I am facing challenges with the animation itself. The desired behavior is for the slides to animate o ...

htmlcss

How can I place text on top of an image with a filter using Bootstrap?

I am facing a challenge of overlaying text on an image with a tinted background color and opacity. While working with Bootstrap 4, I suspect that some classes might be conflicting with each other. This is my current setup: Index.cshtml: <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Content not aligned in the center of the page on Internet Explorer

Recently, I've taken on the responsibility of managing the content for this website after it was passed down from the previous developer. Each page's content is contained within a div element with the class "ct", which has auto margins applied t ...

htmlcssinternet-explorerweb

Issue with Chrome when using angled CSS gradient backgrounds

I'm encountering a problem with a CSS gradient background on a div that is set to 100% width and height. This issue only seems to be happening in Chrome. I have some content placed over the div, and when I hover over links within that div, the gradien ...

google-chromecss

Troubles with Flex wrap in CSS3 on iOS 10.3.2 browsers (Chrome and Safari)

Before sending me to other similar questions, keep in mind that I have already gone through them, attempted the solutions, and they are not resolving my issue. The problem I am encountering involves the flexbox layout. I am using the flexbox layout for ce ...

htmlioscssflexbox

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

Issue with React-Native FlatList's scrolling functionality

Struggling with implementing a scrolling FlatList in React Native. Despite trying various solutions found on Stack Overflow, such as adjusting flex properties and wrapping elements in views, the list still refuses to scroll. Snippet of code (issue is with ...

javascriptcssreactjsreact-nativereact-native-flatlist

Ensure to preselect the radio button based on the Day's value

I have set up my Radio buttons with corresponding content to be displayed when clicked. I want to automatically pre-select the tab button based on the current day. For example, if today is Sunday, the page should load showing the contents for Sunday. If i ...

javascriptjquerycsshtml

Having Trouble Extracting a Dynamic HTML Table from an Aspx Website

Trying to extract data from the Arizona Medical Board. Anesthesiology is selected in the specialty dropdown, but noticing that the table with relevant links is dynamically loaded on the site. Observing a POST request being triggered when clicking the &apos ...

pythonasp.netseleniumweb-scrapingbeautifulsoup

How can I determine the Windows service pack version directly from my web browser?

Is there a method to determine the installed service pack from the browser? It doesn't seem to be available in System.Web.HttpBrowserCapabilities in asp.net. I am looking for a solution to alert users about the necessity of updating to XP Service Pack ...

javascriptasp.net

The presence of the target tag remains unchanged when a media query is used

Hello, I have a question regarding a specific issue in my code. I am trying to use a media query to make a tag disappear when the width of the window is less than 1200px, but it's not working as expected. I believe it might be related to inheritance. ...

cssreactjs

Two objects precisely located in the same spot yet not visible simultaneously

There are two elements here. One is a transparent button, and the other is an image positioned behind it. The background property didn't work for me, so I attempted different variations without success: .top-container > button { background-ima ...

htmlcsscss-positionbackground-image

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...

javascripthtmlcsstwitter-bootstrap