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
8
votes
3 answers

Enforce a "min-margin" for a fluid layout

I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower. I'm not even sure what code to copy in here, so the link is: projects.thomasrandolph.info What I need is…
rockerest
  • 10,412
  • 3
  • 37
  • 67
8
votes
4 answers

Scale image with CSS but limit to orignial size

For a responsive design, i would like to scale down some images: img { width:100%; height:auto; } This works as expected, but if the width of the screen exceeds the original size of the image, it blows up the image. Is there a way to limit…
Willem de Jong
  • 905
  • 2
  • 15
  • 31
8
votes
4 answers

Fluid CSS: floating column with max-width and overflow

I'm using a fluid layout in the new theme that I'm working on for my blog. I often blog about code and include 
 blocks within the posts. The float: left column for the content area has a max-width so that the column stops at a certain maximum…
Ates Goral
  • 137,716
  • 26
  • 137
  • 190
8
votes
3 answers

ONLY Firefox behaves weird with inline-block element

I was playing with responsive css grids recently so I tried to make one of my own for new project. I decided to keep it fairly simple so I used display:inline-block property for my cells. This would either require margin:-0.25em "hack" or removal of…
Jinx
  • 857
  • 2
  • 14
  • 28
8
votes
2 answers

Fixed size left column and fluid right column both with 100% height

I'm looking to construct a two-column layout with a fixed left column and a fluid right, both with 100% height, like this example: I've tried so many variations I can't remember what I've tried now, and just can't get it to look right. I've also…
TheCarver
  • 19,391
  • 25
  • 99
  • 149
8
votes
2 answers

Is it possible to use Bootstrap's fluid grid layout system in conjunction with jQuery UI's sortable functionality?

I have a fluid Bootstrap layout with three span4's inside of a row-fluid div. This looks and works the way I would expect it to. Calling .sortable(); on the row element works, but during drag, the layout becomes strangely unpredictable. Here's a…
DavidH
  • 1,420
  • 1
  • 14
  • 25
8
votes
3 answers

Why is my CSS media query being ignored or overridden?

This is driving me insane! I've looked at a few questions on Stackoverflow and see that an ID element has priority over a class element (which is good to know but I have a feeling this isn't my problem). It's my NAVIGATION menu that I'm struggling…
MSchumacher
  • 167
  • 1
  • 5
  • 13
7
votes
9 answers

Make div and child div extend at least the full height of browser window

I need to have images that extend along the left and right sides of my main body div (actually for a sort of drop-shadow effect under the div). This would be simple if it wasn't for the fact that I want this div to be expandable, and I need it to…
Sabrina Leggett
  • 9,079
  • 7
  • 47
  • 50
7
votes
1 answer

CSS layout with left column fixed and right column fluid?

Is there a solid cross browser solution for fixed and fluid CSS columns? I need one column to be fixed on the left hand side, and another column to be fluid on the right hand side. Below is a snippet of my code - .promoImg and .promoContent float…
Dancer
  • 17,035
  • 38
  • 129
  • 206
7
votes
2 answers

Problem with percentage based widths in Opera

I'm trying to make a fluid grid layout and I've run into a problem with inconsistent width rendering in Opera. In Opera the width of elements are consistently smaller than the other browsers. I'm trying the fluid 960 grid system but if it wont be…
Paul Sheldrake
  • 7,505
  • 10
  • 38
  • 50
7
votes
2 answers

Why does order of float div and non-float div matter only in some cases?

I have a similar problem as CSS Auto Margin pushing down other elements: A right floating sidebar gets pushed down below the main non-floating content div. The answer proposed works: just reverse the order of the markup and write out the float div…
huyz
  • 2,297
  • 3
  • 25
  • 34
7
votes
1 answer

When I have a full width, fluid container my text in google chrome becomes distorted (too big), but none of the other browsers. Why?

.container-fluid{ background-color: $white; padding: 0; &.featured{ max-width: 1300px; } } So, I set this to container fluid, and set max width on the main content (.featured), I have a top nav which remains full page…
NewGuy504
  • 143
  • 1
  • 9
7
votes
1 answer

Maintain aspect ratio of a div according to height

I have to maintain the aspect ratio of a div with respect to the height on window resize. I can maintain the aspect ratio(x:y) with regard to the width(X%) using padding-bottom; or padding-top;. So from the analogy, I tried using…
red-devil
  • 1,064
  • 1
  • 20
  • 34
7
votes
5 answers

CSS resize of image in fluid lightbox container

Short version: Make the image fit nicely the visible area for small windows, starting from this fiddle Update: There doesn't seem to be a solution for this issue. I thought there might be one because Chrome actually makes it possible (see my answer)…
Marc-André Lafortune
  • 78,216
  • 16
  • 166
  • 166
7
votes
1 answer

How to remove mCustomscrollbar?

I am using Jquery mCustomScrollBar plugin for creating custom scroll bars in my project. But I don't want to have any scroll bars in my web pages once they are re-sized below 650 . There is also another problem , when I am re-sizing the window…
Ujjal
  • 133
  • 1
  • 1
  • 7
1 2 3
…
58 59