Maintaining the position without altering the width of the site

Question

Maintaining the position without altering the width of the site

Having trouble with the layout of my website on different screen sizes. The issue can be seen at . At a resolution of 1024*768, everything looks good without any overlap in the "sponsors" or "announcements" section. However, when the window is resized, there is severe overlap between elements. I have searched for solutions but couldn't find anything helpful. I want to keep the page at a fixed width so that the "sponsors" and "announcements" sections don't cover the main content. How can I position these elements correctly? Appreciate any help!

The CSS for these elements are:

#sponsors{
z-index:300;
position:absolute;
left:0px;
top:140px;
}
#alerts{
position:fixed;
right:0px;
top:80px;
width:180px;
}

html css

Answer 1

Answer №1

The opposite scenario of the case-study issue you're facing is equally valid: having a screen that is too large can also result in a less-than-ideal display:

It appears that what you truly need is a layout with four columns:

             header
-------------------------------
Sponsors | Body | Nav | 2nd Nav`

Take a look at this css layout generator

Implementing this approach can help you avoid significant challenges, and it aligns with industry best practices.

For such a layout, the generated code from the tool looks like this: You might find it beneficial to examine it and apply similar principles to your own design!

.header{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #f4f4f4
}
.wrapper{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cccccc
}
.left1{
   position: relative;
   float: left;
   left: 4px;
   width: 115px;
   background-color: #ccccff
}
.left2{
   position: relative;
   float: left;
   left: 12px;
   width: 601px;
   background-color: #ccccff
}
.left3{
   position: relative;
   float: left;
   left: 20px;
   width: 115px;
   background-color: #ccccff
}
.right{
   position: relative;
   float: right;
   right: 4px;
   width: 161px;
   background-color: #ccccff
}
.footer{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cfcfcf
}
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}

Answer 2

The opposite scenario of the case-study issue you're facing is equally valid: having a screen that is too large can also result in a less-than-ideal display:

It appears that what you truly need is a layout with four columns:

             header
-------------------------------
Sponsors | Body | Nav | 2nd Nav`

Take a look at this css layout generator

Implementing this approach can help you avoid significant challenges, and it aligns with industry best practices.

For such a layout, the generated code from the tool looks like this: You might find it beneficial to examine it and apply similar principles to your own design!

.header{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #f4f4f4
}
.wrapper{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cccccc
}
.left1{
   position: relative;
   float: left;
   left: 4px;
   width: 115px;
   background-color: #ccccff
}
.left2{
   position: relative;
   float: left;
   left: 12px;
   width: 601px;
   background-color: #ccccff
}
.left3{
   position: relative;
   float: left;
   left: 20px;
   width: 115px;
   background-color: #ccccff
}
.right{
   position: relative;
   float: right;
   right: 4px;
   width: 161px;
   background-color: #ccccff
}
.footer{
   position: relative;
   float: left;
   left: 448px;
   width: 1024px;
   background-color: #cfcfcf
}
body {
   border-width: 0px;
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}

Answer 3

Answer №2

My preferred approach is to determine the smallest size the site can function effectively at, and then enclose the main content in a wrapper div with a min-width: 60em; property. This ensures that the site will never shrink below that specified size, while also allowing scalability using em units.

Answer 4

My preferred approach is to determine the smallest size the site can function effectively at, and then enclose the main content in a wrapper div with a min-width: 60em; property. This ensures that the site will never shrink below that specified size, while also allowing scalability using em units.

Answer 5

Answer №3

Here's a potential solution:

body {
    max-width:980px;
}
.sidebar {
    width:100px;
    margin:0 10px;
}

This way, the site won't be too wide and the sidebars will still be visible but slim.

Answer 6

Here's a potential solution:

body {
    max-width:980px;
}
.sidebar {
    width:100px;
    margin:0 10px;
}

This way, the site won't be too wide and the sidebars will still be visible but slim.

Answer 7

Answer №4

One alternative option is to set the site's width to match the smaller inner section within a centered div, and then use negative values to position the left and right panels.

#sponsors{
    z-index:300;
    position:absolute;
    left:-180px;
    top:140px;
}
#alerts{
    position:fixed;
    right:-180px;
    top:80px;
    width:180px;
}

However, this approach may sacrifice the alignment with the right-hand side of the browser, causing your menu to float instead.

Answer 8

One alternative option is to set the site's width to match the smaller inner section within a centered div, and then use negative values to position the left and right panels.

#sponsors{
    z-index:300;
    position:absolute;
    left:-180px;
    top:140px;
}
#alerts{
    position:fixed;
    right:-180px;
    top:80px;
    width:180px;
}

However, this approach may sacrifice the alignment with the right-hand side of the browser, causing your menu to float instead.

Answer 9

Answer №5

To ensure your sidebars are always visible to the user, even on smaller browser windows, you can implement the use of `min-width` on the body element. This will set the minimum width necessary for both your content and sidebars to be displayed properly. In cases where browsers do not support `min-width`, such as IE6, you can also apply a `z-index` to the sidebars. The body element should have a `position:relative`, allowing the sidebars to be positioned within its bounds, regardless of any horizontal scrollbars present.

CSS:

* { margin:0; padding:0 }
body { text-align:center; min-width:800px; position:relative }
#content { width:600px; background:black; margin:0 auto; text-align:left }
#sponsors, #announcements { position:absolute; width:100px; background:gray; top:0; z-index:-1 }
#sponsors { left:0 }
#announcements { right:0 }

HTML:

<body>
    <div id="sponsors"></div>
    <div id="content"></div>
    <div id="announcements"></div>
</body>

Answer 10

To ensure your sidebars are always visible to the user, even on smaller browser windows, you can implement the use of `min-width` on the body element. This will set the minimum width necessary for both your content and sidebars to be displayed properly. In cases where browsers do not support `min-width`, such as IE6, you can also apply a `z-index` to the sidebars. The body element should have a `position:relative`, allowing the sidebars to be positioned within its bounds, regardless of any horizontal scrollbars present.

CSS:

* { margin:0; padding:0 }
body { text-align:center; min-width:800px; position:relative }
#content { width:600px; background:black; margin:0 auto; text-align:left }
#sponsors, #announcements { position:absolute; width:100px; background:gray; top:0; z-index:-1 }
#sponsors { left:0 }
#announcements { right:0 }

HTML:

<body>
    <div id="sponsors"></div>
    <div id="content"></div>
    <div id="announcements"></div>
</body>

Maintaining the position without altering the width of the site

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Slanted background div that adjusts to the screen size

Encountering a 500 Internal Server Error while attempting to insert data into a MYSQL database using

Loop through every list item within each unordered list using JQuery

Is it possible to disable the save option on a PDF popup window?

Creating Table Rows on-the-fly

There is a vast expanse separating the header of the page and the navigation bar

Revamp the current webpage to display attribute values in textual format

Using Django Form with Bootstrap: Incorporating CSS classes and <div> elements

transferring data from one HTML file to another using a loop with technologies such as HTML,

Importing pixi-sound in the right way for PIXI JS

Adjust the color of the font within a div element when hovering over it

resetting the page's scroll position using a hamburger icon

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

How can I use Moment.js to show a custom message based on the current day of the week?

Having trouble with CSS transitions not showing up correctly in Chrome. Any suggestions on how to resolve this issue?

Transferring MySQL information to web pages using hyperlinks within a table

Tips for utilizing the setInterval function in javascript to update the background color of the body

Tips for showing nested JSON data in a PrimeNG table within Angular version 7

Struggling with translating your jQuery function into JavaScript code?

Animating content to slide into view in the same direction using CSS transitions