Is it possible to incorporate percentage-based widths within a fixed layout design on a webpage?

I've been delving into the concepts of fixed, fluid, and responsive web page design. One of the resources I stumbled upon is this article about fixed vs. fluid layouts. In the article, it mentions that "A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths." This statement about fixed layouts having the potential for percentage widths has left me a bit confused. Isn't using percentage widths characteristic of a fluid layout? Isn't it what defines a layout as fluid? I'd appreciate it if someone could clarify this for me.

cssresponsive-designfluid-layoutfixed-width

Answer №1

In accordance with the article, it is mentioned that "the elements contained within have widths that are either percentages or fixed values"

A percentage of a fixed width essentially becomes fixed, as it will consistently maintain the specified fixed size.

For instance:

The container element is fixed at a width of 1000px. Two internal elements have widths of 70% and 30%. The first element will always be 700px, while the second element will always be 300px.

<body style="width: 1000px">

    <div style="width: 70%">Element #1, consistently 700px in width</div>
    <div style="width: 30%">Element #2, constantly 300px in width</div>

</body>

As stated in the article: "The key is to ensure that the container (wrapper) element remains stationary". If the fixed size of 1000px for the container element is removed, the fixed layout will be compromised.

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

CSS Problem: The first-child, last-child, and only-child pseudo-classes are not functioning as expected when applied to lists

I am facing an issue with the following pseudo classes: first-child: The first a element within each div should have a red background. last-child: The last a element within each div should have a blue background. only-child: Only the a element of the last ...

htmlcss

Is there a way to utilize Bootstrap 5 to ensure that a tab in a navbar occupies the entire vertical space?

After implementing a bootstrap navbar with a hover effect, I encountered an issue where clicking on a tab would change the color to white but leave a black margin behind. Check out how it currently looks: how it is And here's how I'd like it to ...

htmlcssnavbarmarginbootstrap-5

Having trouble retrieving image files from CSS within a Spring MVC Application

I am facing an issue with my Spring MVC application where I cannot get an image to display in a CSS file accessed from a JSP file. The CSS is working fine, but the image just won't show up. It seems like there might be an issue with how I am addressin ...

cssspringimagejspaddressing

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

After successfully implementing click and hover functionality on an element, I was able to position the popup relative to the mouse pointer based on a previous solution. However, I am now facing an issue where I want the popup modal to be fixed in a specif ...

javascripthtmlcssangularmouseevent

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT". Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight s ...

javascriptjqueryhtmlcss

Tips for dynamically appending a string to a predefined variable in React

When I was working on creating a text input space using the input type area and utilizing the onChange utility, everything was running smoothly. Now, my task is to incorporate an emoji bar and insert a specific emoji into the input space upon clicking it. ...

javascripthtmlcssreactjsuser-interface

The Bootstrap carousel controls now add the carousel ID to the address bar instead of just moving to the next slide

I can't figure out why my carousel isn't working. The id of the carousel is showing up in the webpage's address, which usually happens when the 'bootstrap.js' file is missing, but I have included it. Can anyone help me troubleshoo ...

javascripthtmlcss

The viewport width in NextJS does not extend across the entire screen on mobile devices

I'm currently tackling a challenge with my NextJS Website project. It's the first time this issue has arisen for me. Typically, I set the body width to 100% or 100vw and everything works smoothly. However, upon switching to a mobile device, I not ...

javascripthtmlcsstypescriptnext.js

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

javascriptjqueryhtmlcss

Apply an image as the background for the body using Bootstrap 5 styling

I'm wondering how I can set the background of the whole webpage (the body) to an image. I'd like to add a subtle fade effect to avoid it being too overpowering. <style> body { background-image:url("{% static 'portfolio ...

htmlcssdjangobootstrap-5

What are the best techniques for positioning text next to images in HTML and CSS?

I have attempted to position the text in close proximity to the images as shown in the picture below (to allow for spacing in the middle). As depicted in the image, the "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are near Man's hand and w ...

htmlcss

What is causing my background image to move upward when I include this JavaScript code for FlashGallery?

There's an issue on my website where adding a flash gallery script is causing the background image to shift unexpectedly. You can view the affected page here: The culprit seems to be the "swfobject.js" script. I've identified this by toggling t ...

javascripthtmlcssflash

Tips for enlarging the font size of a number as the number increases

Utilizing the react-countup library to animate counting up to a specific value. When a user clicks a button, the generated value is 9.57, and through react-counter, it visually increments from 1.00 to 9.57 over time. Here's the code snippet: const { ...

cssreactjstypescript

A guide to implementing lazy loading using BXSlider

I have implemented an image gallery using Bxslider, but I am facing an issue with the loading time as there are more than 15 images in each slide. To address this problem, I want to load images one by one when a particular slide appears. I came across an e ...

jqueryhtmlcssbxsliderlazy-loading

Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the lo ...

htmlcssangularbootstrap-4

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Swapping link positions with jQuery

Is it possible to rearrange links using jQuery? Under the navigation menu, there will be content div for each tab. The selected link should always be positioned next to the first "sixrevision" link. The code snippet is shown below: <ul id="crumbs" ...

jquerycssxhtml

Adjust the width of the element to match the size of the image within

My webpage features an image along with some accompanying metadata that I want to be centered on the page. I want the div holding the metadata to be the same width as the image. Here's an example: Unfortunately, I am unable to determine the image&apo ...

javascripthtmlcssimage

Rings that react to both width as well as height

Below is a popular CSS markup for creating responsive circles. http://jsfiddle.net/WTWrB/355/ <div class="circle"></div> .circle { width: 25%; height:0; padding-bottom: 25%; -moz-border-radius: 50%; -webkit-border-radius: ...

htmlcss

The jQuery script is functioning flawlessly in one specific direction

Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended. The ...

javascriptjqueryhtmlcss