Stack Overflow
Stack Overflow

Questions tagged [fluid-layout]

A Fluid Layout, sometimes also referred to as a liquid layout, is a CSS technique in which the majority of the page components have percentage widths, and thus adjust to the user's screen resolution.

A Fluid Layout, sometimes also referred to as a Liquid Layout, is a CSS technique in which the majority of the page components have percentage widths, and thus adjust to the user's screen resolution.

Fluid layouts are one of the biggest players in Responsive Web Design (RWD) and are closely linked to CSS media queries. The goal of fluid designs are to make a website easily usable no matter the device and screen size of the visitor.

879 questions
0
votes
1 answer

CSS Layout - 3 column with stretchy background

I am building a 3 column fluid layout, and have gotten 90% the way there. I am wondering on what is the best way to impliment the background, or side bars - however you want to look at it. I have a good box hack that centers my main content area,…
Shawn J. Molloy
  • 2,457
  • 5
  • 41
  • 59
0
votes
1 answer

A fluid adaptive unordered horizontal list

I'm wondering if there's a solution to this: (possibly not, but you never know!) Assuming we have a ul list like this one:
George Katsanos
  • 13,524
  • 16
  • 62
  • 98
0
votes
2 answers

html page max-width by knowing the size of inside divs

This is my HTML code
menu-vertical
mainContent
​ This is my CSS .container { border: 3px solid #666; overflow: hidden } .menu-vertical { …
Django Anonymous
  • 2,987
  • 16
  • 58
  • 106
-1
votes
1 answer

How can I scale and centre align an inline image within a fluid DIV?

I have a fluid layout and I have a div that matches the height and width of the browser window at all times, even when the browser is resized. So a div that is 100% height and 100% width of the browser window. Within this div I have an image that…
egr103
  • 3,858
  • 15
  • 68
  • 119
-1
votes
1 answer

css grid, collapse a cell, ho to make then one in next row rise up

I have made this simple example of my current grid setup: document.querySelectorAll(".element").forEach(box => box.addEventListener("click", () => box.classList.toggle("compressed")) ) .container{ display:grid; grid-template-columns:…
gt.guybrush
  • 1,320
  • 3
  • 19
  • 48
-1
votes
2 answers

Trouble with em based layout

I am trying to build a layout using css where all dimensions are specified in em. I was under the impression that this would allow the page to display the same way at different font sizes/zoom levels. However, I am noticing that text wraps…
verdesmarald
  • 11,646
  • 2
  • 44
  • 60
-1
votes
1 answer

UX-->UI Responsiveness in Bootstrap

In bootstrap should the container class be of fixed size? We want it to display the whole width of the desktop and laptop.How can this be tackled. What if I have custom component how does it stretch to the width of the screen,Should the width be…
Ajay Kalkoti
  • 127
  • 1
  • 2
  • 12
-1
votes
1 answer

A layout with one fixed width column, one fluid one that stretches to fill empty space, and one fluid that is as wide as it's content

I need to make three columns, one of them needs to be fixed width, one needs to be fluid to fill up empty space, and one needs to be fluid, but to have the combined fixed width of its children (they don't have to be inline, I just wrote the code to…
Ioan-Radu Tanasescu
  • 546
  • 4
  • 17
-1
votes
1 answer

What is best practice for fluid designs - using css sprites or inline images?

I am working on a web site which is supposed to have a fluid layout. I am currently presented with a dilemma: shall I use css sprite or opt for inline images? All images will need to be fluid and reduce/enlarge their size on each respective screen…
Vikita
  • 261
  • 6
  • 16
-1
votes
2 answers

Div following wrapper div floats behind wrapper

I am working on a fluid grid (DreamWeaver CC) site. I have a header-Wrapper div containing stacked elements using z-index. I am now trying to add a div after the header-Wrapper but this div is floating behind the header-Wrapper. This is my first…
Nantucket
  • 9
  • 2
-1
votes
2 answers

bootstrap row move controls that dont fit in the row to the next line

I use the bootstrap grid layout to render columns dynamically . Here is the logic that i use If there are N number of controls columns to be rendered for each row. The col-lg-{} number is decided based on the result (number of controls) /12 . For…
user581157
  • 1,327
  • 4
  • 26
  • 64
-1
votes
2 answers

CSS layout width fixed width and fluid right column

I have a fixed with container, lets say 1120px. Inside this container, i have a left sidebar which is 400px, and i need a right sidebar which is expanding from the container and touching the right side of the screen. Here is an image explaining the…
passatgt
  • 4,234
  • 4
  • 40
  • 54
-1
votes
3 answers

Center is not Center on Responsive Site

I truly apologize if any of these questions (there's a main one, then one other that is less important) are absolute idiot questions, but I must admit they have me stumped, so I do appreciate any help that I can get. First off, here's my site:…
Cupka92
  • 11
  • 1
-1
votes
1 answer

12 or 16 column grid for a full width website like pinterest/vevo.com

So I'm looking for the right answer for my grid system: 1) Should I use 12 or 16 column grid for a full width website like: http://xfinitytv.comcast.net http://pinterest.com http://www.vevo.com 2) Can I use bootstrap3 for 16 width 3) what are the…
paulmars
  • 23
  • 9
-1
votes
3 answers

Fluid 3 column layout with header, sticky footer and full height columns

I've been trying to create a layout with the following features: 3 fluid columns Columns that are full height A header Sticky footer I found a similar question here: CSS layout with header, footer and multiple 100% min-height content columns The…
Ben Pearson
  • 123
  • 5
1 2 3
…
58
59