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
13
votes
1 answer

Responsive Masonry jQuery layout example

Can anyone suggest how this site uses the jQuery Masonry plugin for its responsive, fluid layout? http://tympanus.net/codrops/collective/collective-2/ Specifically; The number of columns changes from 3 to 2 to 1 on browser resize which is what you…
robflate
  • 177
  • 1
  • 1
  • 9
13
votes
1 answer

Fluid input elements

I got this form...
Who are you?
rkhff
  • 1,696
  • 2
  • 16
  • 16
13
votes
3 answers

How to make children auto fit parent's width only with CSS?

I have a server-side component that generates a fluid layout "toolbar" using DIV without fixed width, generating many A inside it. Then I need customize that layout to make all A tags auto fit to the parent width. But the number of children is…
Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
12
votes
8 answers

How to set auto-margin boxes in flexible-width design using CSS?

I have DIV with flexible width set e.g. min-width:800px and max-width:1400px. In this DIV, there are many boxes with fix width 200px and display:inline-block. So depending on parent DIV width, these boxes fill the entire space. My problem is the…
Frodik
  • 14,986
  • 23
  • 90
  • 141
12
votes
4 answers

Bootstrap 3 fluid container not 100% width

The issue I am thinking about implementing Bootstrap 3 into my project and I am testing out some of its functionalities and properties before switching to this front-end framework. The weird thing I noticed is that a fluid Bootstrap container…
user3879583
12
votes
2 answers

Full-width vimeo wrapper background

I am trying to create a full-width iframe vimeo background covered by a pattern located in my body div. The video is covered by an overlay so it becomes unclickable. Ive tried giving the video 100% width and height yet no luck on covering the…
notcho nachos
  • 187
  • 1
  • 2
  • 13
11
votes
1 answer

Why doesn't IE respect table width with fluid image child

Consider the following code: HTML:
CSS: table { width: 10% } img { max-width: 100% } The image should obviously be a 10th the width of the window, which is…
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
11
votes
3 answers

What's the Proper way to achieve 3-Column layout with fluid center

I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart's Holy Grail article, and, although this works fine in most browsers, I am having some problems in Internet Explorer…
Ralph
  • 397
  • 1
  • 4
  • 16
11
votes
4 answers

How evenly space divs (each of a different width) within a parent div?

I have seen this solution for evenly spacing DIVs: (Fluid width with equally spaced DIVs) but it requires that the DIVs are all of the same width. This will not work in my case. I have 5 DIVs that are all of different widths and would like to space…
Don Rhummy
  • 24,730
  • 42
  • 175
  • 330
10
votes
7 answers

Pixel Border and Percentage width in Proportion

I think I might already know the answer to this one but I need a sanity check! Say I have #gridtest{ width:590px; } I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width…
user1010892
  • 1,179
  • 3
  • 14
  • 25
10
votes
3 answers

Sizing width of an element as a percentage of its height or vice versa in a fluid design?

Im making a responsive design, which has to keep the proportions of its elements (height to width) no matter what the screen size is, so i don't know the size in pixels for any of the elements and i can work only in %. I can set either the width or…
Bjorkata
  • 123
  • 1
  • 7
9
votes
4 answers

Footer at the bottom in fluid layout

I have a fluid layout but as a consequence, when there is no enough content in the page, my footer keeps moving up as in this example. A popular solution to keep the footer at the bottom of the page is using position: fixed or position: absolute,…
r_31415
  • 8,752
  • 17
  • 74
  • 121
9
votes
2 answers

Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

I'm trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible: http://jsfiddle.net/bJKQ6/2/ .column { float: left; width: 25%; } The main container has a…
gyo
  • 1,663
  • 1
  • 19
  • 28
9
votes
4 answers

Responsive facebook comment box

I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear…
Álvaro N. Franz
  • 1,188
  • 3
  • 17
  • 39
9
votes
4 answers

Responsive tables, the smart way

I've got a table that contains data. Tabular data. And it looks like this. See this fiddle. Now what I'd like is, when it's displayed on a narrower screen, for the table to look like this, so that you don't get a horizontal scroll bar and it keeps…
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
1 2
3
…
58 59