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

Firefox ignores percent height on image

I'm developing a Web site for a professor and I'm having an issue with my CSS in Firefox. The Web site was designed to be fluid width/height so it would fill the screen on any resolution, so because of that I'm using a lot of percentages for heights…
user253711
7
votes
2 answers

Using Anchors with Equal Height Columns Hides Content

The Setup I'm making a website with a simple 2 column layout. The columns will be of varying height (one taller than the other) and dynamic height (each page's content is different). The two columns' background color should extend down to the lowest…
DACrosby
  • 11,116
  • 3
  • 39
  • 51
7
votes
2 answers

Making Twitter Bootstrap Columns the Same Height

I have an ASP.NET MVC view with the following Twitter Bootstrap layour:
[Header content]
Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
7
votes
9 answers

How to set up twitter's embedded timeline width in percentage (responsive/fluid design)

I'm looking to set up twitter's embedded timeline, it's quite easy when you're having a fixed design, but that's not my case and I'm actually building a fluid and responsive design for a new website. My question is, how can I set up twitter's…
Miles M.
  • 4,089
  • 12
  • 62
  • 108
7
votes
2 answers

Responsive images in a fluid-width table (max-width)

Consider the following piece of code: HTML:
CSS: div { max-width: 200px } img { max-width: 100% }​ The image will never be wider than 200px, regardless of its native size. So far so…
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
6
votes
2 answers

box-shadow and 100% Fluid Width Issue

I've been polishing up a page I built over the past day or two and have run into an issue after using box-shadow - I was hoping someone might shed some light on an easy way to fix this. The Setup: I have a div that has a few properties, including…
Will D. White
  • 1,024
  • 5
  • 12
  • 22
6
votes
4 answers

Multiple centered floating divs in a liquid layout

I have an idea for a layout I would like to use, but I can't get it to work correctly. I am hoping someone on here might be able to help as I have spent hours searching. The layout is like so. One wrapper div houses 6 child divs. Those child divs…
Craig Ward
  • 2,425
  • 5
  • 33
  • 51
6
votes
5 answers

responsive viewport font not consistent on mobile / ios devices

After doing some research, I opted for using vw units to scale my responsive typography. %meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "viewport"}/ css: html{ font-size: 1vw; } // h4 tag above form h4{ …
NoobSter
  • 1,150
  • 1
  • 16
  • 39
6
votes
2 answers

Two divs aligned vertically next to an image

I want to have an avatar image with two divs on its right that are vertically aligned to it. https://jsbin.com/qafiroquve/1/edit?html,css,output I've read so many posts about this, but none of them seems to help me. What is the best approach to…
Vlad
  • 997
  • 1
  • 5
  • 18
6
votes
1 answer

Jquery calc percentage width minus pixels not returning elastic column

I'm trying to bypass the css calc issue by using jquery (since calc won't work on Explorer) but when I set the width minus pixels the columns are not elastic anymore and everything overlaps on jsfiddle (fine when I test it from textedit) Please note…
Alga
  • 181
  • 1
  • 5
  • 15
6
votes
2 answers

How to make a fluid sticky footer

I'm looking for a solution to have a sticky footer which height may be dependent on the width of the browser. Sticky footers in fluid designs are not all that trivial. I've found hints, discussions and solutions to implement sticky footers.…
Paul van Haren
  • 71
  • 1
  • 2
6
votes
3 answers

How to make buttons stretch equally to fill container

Let's say I have a container
with some buttons in:
Button 1
Button 2
Button 3
Button 4
George
  • 36,413
  • 9
  • 66
  • 103
6
votes
5 answers

How to give all divs same amount of space on each side

Hello I've got a question about a layout. I have a website where I fill divs with information. These Divs need to be next to each other with the same amount of space between them and between the sides of the container div. I'm making it for mobile…
hgwd92
  • 69
  • 3
  • 11
5
votes
3 answers

CSS columns bug — 5 column count only showing 4 (with images)

I am trying to implement Chris Coyier's example of using CSS columns to create a seamless responsive grid of images. I put Chris's files onto my server and everything looked fine. The only thing I changed was the actual images. Now, as you see on my…
davecave
  • 4,698
  • 6
  • 26
  • 32
5
votes
5 answers

Fluid layout and css sprites

I used a css sprite to display backgrounds on a fixed width design. Im changing to fluid layout, but because of the background positions the background image goes wonky when the browser resizes. Is it possible to use a css sprite with a fluid grid…
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
1 2 3
…
58 59