What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site length even if you resize or maximize?

Any help would be greatly appreciated. Thank you.

Here is what I have done so far:

<div id="table">
    
<div class="tabs" id="content1">   
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Home</label>
       <div class="content">
       <p></p>  
           <div id="caption">
                <p>Title Goes Here</p>
            </div>

            <div id="nextcontent">
                <p>Words go Here</p>
            </div>

       </div>


   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">About Us</label>

       <div class="content">
           <p>Stuff for Tab Two</p>

           <img src="http://placekitten.com/200/100">
       </div>
   </div>

    <!-- Additional tabs content -->

   <div class="tab">
       <input type="radio" id="tab-6" name="tab-group-1">
       <label for="tab-6">Sign Up</label>

       <div class="content">
           <p>Content for Tab Six</p>

           <img src="http://placedog.com/200/100">
       </div>
   </div>
</div>

<div id="footer">
       &copy; All rights reserved 2013
</div>

Javascript Code:

*
{      margin: 0px;   }

#table
{
        font-size:100%;
        min-height: 80%;
        /* height: autopx; */
        min-width: 100%;
}

.tabs {
  position: relative;  
  min-height: 80%; 
  min-width: 80%;

  margin: 100px 50px 0px 50px;  

}

.tab  
{
  float: left; 


}
.tab label {
  background:#202d00; 
  padding: 10px 40px; 
  color:#FFF;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
  top: -29px;
  -webkit-transition: background-color .17s linear;
  font-weight:bold;


}
.tab [type=radio]
{
  display: none;  
}

.content {
  position: absolute;
  top: -1px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 0px; 
  border: 1px solid #ccc;
  -webkit-transition: opacity .6s linear;
  opacity: 0;
  color:#396; 
  font-weight:bold;
  font-size:36px;
  background-color:#f8fed2; 

}

[type=radio]:checked ~ label {
  background: #c5de10; 
  border-bottom: 0px solid white;
  z-index: 2;
  color: #202d00;
}

[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}

#footer
{
        height: 20px;
        width:100%;
        text-align:center;
}

#content1
{
        width:80%; 
        height:80%;
        margin-left:auto;
    margin-right:auto;
        border: thin outset;
        background-color: #f8fed2;
}

#nextcontent
{
        color: black;
        font-size:16px;
        margin-left:20px;
        margin-right:20px;
        margin0bottom:2px;
        margin-top:10px;
}

#caption
{
        margin-left:10px;
        margin-right:10px;
        margin0bottom:0px;
        margin-top:10px;       
}

You can also try it out on JSFiddle.

javascriptcss

Answer №2

To ensure the content is displayed within a specific width, consider setting the width of the surrounding div or the body element. Here's an example:

body {
    width: 800px;
}

Alternatively, you can establish a minimum width by using the min-width property like this:

body {
    min-width: 800px;
}

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

Persistent Gap at the Top of the Page

I'm facing a simple issue that I can't seem to solve. At the top of my page, there's a white space about the width of a finger, and when inspecting it, nothing seems to be highlighted. @import url('https://fonts.googleapis.com/css?fa ...

htmlcssbootstrap-5

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

htmlcsssvg

Oops! It seems like there was a mistake. The ReferenceError is saying that Vue is

I've been working on creating a new app, but I keep running into an issue. Unidentified Reference Error: Vue is not recognized. <template> <v-app> <div id="example-1"> <v-btn v-on:click="counter += 1">Add 1</v-bt ...

javascriptvue.jsvuejs2vuetify.js

Generating a new Blob through assembling MediaRecorder blob sections leads to a blank Blob

I’ve encountered a peculiar issue with the new Blob constructor. My code returns an array of Blobs from the MediaRecorder: However, when trying to work with this blob in my code, calling new Blob(audioChunks) results in an empty array being outputted. S ...

javascriptvue.js

"Why does the useEffect in Next.js fire each time I navigate to a new route

Currently, I have implemented a useEffect function within the Layout component. This function is responsible for fetching my userData and storing it in the redux-store. However, I have noticed that this function gets triggered every time there is a route c ...

javascriptnext.js

The issue of responsive spacing (such as mb-lg-2 mb-sm-3, etc) not functioning as expected has been identified in Bootstrap

Previously in Bootstrap 4, these classes were effective. However, I am finding that they are not functioning properly in Bootstrap 5. Any insights as to why this might be happening? Note: d-block d-lg-flex , text-center text-lg-start text-md-end seem to s ...

csstwitter-bootstrapbootstrap-5

An easy guide to dynamically assigning a property using jQuery

I am currently utilizing the toastr plugin and I would like to dynamically set the options using a JSON object that is retrieved from an AJAX call. I am encountering some difficulties in setting the options property and value programmatically. Below is a s ...

javascriptjquerytoastr

Utilizing ng-repeat to display a collection of Angular Highcharts charts

As I work on developing a KPI app using Angular JS, my goal is to establish a collection of charts. Each item in the list will display distinct values and feature a different chart type based on my Model. I am relying on the highcharts-ng directive for th ...

javascriptangularjshighcharts

Error: the search variable is not defined

function sorting(type) { $("#parentDiv").empty(); $.getJSON("example_data.json", ({ Find })); function Locate(a, b) { return (a[Find.type] < b[Find.type]) ? -1 : (a[Find.type] > b[Find.type]) ? 1 : 0; }; } The example_data.j ...

javascriptjqueryjsonsorting

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson

Utilizing AngularJS: Conditionally rendering ngIf within an array of objects containing unique properties

Facing a challenge with the ngIf directive that I have been struggling to resolve despite trying various solutions. In my scenario, I have an array of objects, each containing different properties. The structure is as follows: object = [ { ...

javascriptangularjsangular-ng-if

The network tab is failing to display the CSS styles being applied to the selectors

Being new to markup languages, I encountered an issue when trying to apply my first CSS file to my index.html. Here is how I included the link tag in the HTML file for the CSS file: index.html code Upon checking the network tab in developer tools, I notic ...

htmlcsscss-selectors

What is the best way to transfer JSON data to a different controller in AngularJS?

Hello, I'm still learning AngularJS and facing an issue with the following code snippet. app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: "partials/home.html", controller: "mainControlle ...

javascriptjsonangularjs

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Submitting JSON data using JavaScript

My goal is to send a username and password to my backend server. However, I am encountering an issue where the data does not successfully reach the backend when using the following code: function register() { var text = '{"username":"admin1","pass ...

javascriptjsonpostrequest

Why is `setTimeout(resolve)` necessary in my JavaScript promise for loading data?

Instead of simply copying example code from tutorials, I am challenging myself to grasp ES6 Promises by implementing them in a meaningful way within a real project. Below is the frontend Vue.js/axios code I created that effectively utilizes Promises to po ...

javascriptvue.jses6-promise

Styling text using CSS depending on the displayed text

Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...

javascripthtmlcss

swap the positions of two distinct texts

I need to dynamically change the positions of two texts based on the text direction (LTR or RTL) using CSS specifically for an email template. Here is the code snippet I am working with: '<span style="font-weight:bold; text-align: center;">US ...

css

Facing issues with converting SVG to PDF in Rails 5.0

Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view. The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser bu ...

jquerycssruby-on-railspdfsvg