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
5
votes
5 answers

Fluid Images: How to set width and height?

I'm trying to build a fluid layout, for which I am styling big images with: .fluid_img { height: auto; width: auto; max-width: 100%; } This works fine, the problem is that I can no longer use the width and height attributes in the html img…
HappyDeveloper
  • 12,480
  • 22
  • 82
  • 117
5
votes
2 answers

3 column layout with fixed left and right column. Right column flows into center column on smaller screens

HTML Setup
CSS: #fixed-wrapper{ min-width: 1264px; } #header{ width: 100%; …
Hyper
  • 312
  • 4
  • 13
5
votes
3 answers

CSS: Centered, fluid left, fixed right, source ordered layout with min/max width

The titles says it. I want a 2-column CSS layout that: is centered - the main content is centered on the page has a fixed (pixel) right column width has a fluid left column - uses up all available space minus the right column width is source…
Rick
  • 1,863
  • 2
  • 19
  • 46
5
votes
2 answers

Bootstrap 3 Fluid Container with centered content

I'm sure this might be a simple one but I haven't figured it out yet. How do you create a full screen fluid container and have the content, including the navigation, be centered on the page, as in a non-fluid container? I'm just trying to get the…
George
  • 77
  • 3
  • 8
5
votes
2 answers

Scale image maintaining aspect ratio, then center vertically and horizontally inside fluid height and width DIV

OK, this is a bit of a mouthful and very super specific. I will try my best to explain! The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages.…
photocode
  • 722
  • 2
  • 11
  • 19
5
votes
8 answers

Items grid with inner padding only

What techniques are there for creating a products grid that has padding between each item, but only within the grid? For example, what I am trying to achieve is the below: Sample markup: