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.

875 questions
428
votes
15 answers

How to make an element width: 100% minus padding?

I have an html input. The input has padding: 5px 10px; I want it to be 100% of the parent div's width(which is fluid). However using width: 100%; causes the input to be 100% + 20px how can I get around this? Example
Hailwood
  • 79,753
  • 103
  • 257
  • 412
404
votes
5 answers

Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

I'm getting confused about the various options in the twitter bootstrap grid, and how they go together. To begin with, you can have an ordinary fixed container, or a container-fluid. Then either one can include either an ordinary row, or a fluid…
jrochkind
  • 20,836
  • 12
  • 51
  • 67
337
votes
7 answers

Fluid width with equally spaced DIVs

I have a fluid width container DIV. Within this I have 4 DIVs all 300px x 250px...
What I want to happen…
Lee Price
  • 5,044
  • 10
  • 29
  • 36
247
votes
8 answers

Two divs side by side - Fluid display

I am trying to place two divs side by side and using the following CSS for it. #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } The HTML is simple, two left and right div in a wrapper div.
Waleed
  • 3,477
  • 2
  • 12
  • 11
218
votes
20 answers

Are fluid websites worth making anymore?

I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent. To be honest though, I personally prefer looking at fluid websites…
Adam
  • 2,576
  • 4
  • 17
  • 13
92
votes
7 answers

Fixed sidebar navigation in fluid twitter bootstrap 2.0

Is it possible to make sidebar navigation stay always fixed on scroll in fluid layout?
sl_bug
  • 4,046
  • 5
  • 18
  • 21
74
votes
3 answers

css display:table not displaying the border

…
Vivek Chandra
  • 4,016
  • 8
  • 27
  • 37
69
votes
8 answers

hide div tag on mobile view only?

I'm creating a fluid layout for a site. I'm trying to hide the contents of a
or the whole
itself in the mobile view, but not the tablet and desktop view. Here's what I've got so far... #title_message { clear: both; float: left; …
KoldTurkee
  • 827
  • 1
  • 8
  • 10
54
votes
3 answers

CSS Div width percentage and padding without breaking layout

There may be a simple fix for this, but it has troubled me for ages now... Let me explain the situation. I have a div with the ID 'container' that holds all the contents in the page (including header and footer also) that will keep everything…
Kyle Ross
  • 1,971
  • 4
  • 19
  • 26
52
votes
4 answers

How to center crop an image () in fluid width container

How do I get an image to stay centered when its fluid width (percentage based) container is too small to show the whole image? How can I center the image inside it's container This means it should show the middle of the image instead of the sides…
Bryce
  • 5,791
  • 7
  • 33
  • 64
50
votes
7 answers

Two column div layout with fluid left and fixed right column

I want to make a two column layout using DIVs, where right column will have a fixed width of 200px and the left one would take all the space that is left. It's quite easy, if you use tables:
Silver Light
  • 37,827
  • 29
  • 116
  • 159
48
votes
10 answers

CSS fluid columns, fixed margins; the holy grail of holy grails

Update & Summary I feel obligated to make this question clearer, now that there is a bounty attached. (Also, I'm pretty sure this will be child's play when the calc() CSS3 unit value is supported, doing something like width: calc(25% - 5px); though…
Dan Lugg
  • 18,516
  • 18
  • 99
  • 168
45
votes
2 answers

How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Is it possible to create a 2 Column Layout (Fixed - Fluid) Layout ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) with Twitter Bootstrap (http://twitter.github.com/bootstrap/)? Do you have any solutions?
mbecker
  • 1,613
  • 2
  • 18
  • 21
45
votes
5 answers

Widths to use in media queries

What are the most important media query widths for all devices like desktops, tablets, laptops/Ipads, Iphones and Smartphones? Are there any standard widths for these devices?
Nishantha
  • 4,665
  • 5
  • 29
  • 47
35
votes
3 answers

EM's for line-height

I would like to convert my new website from pixels to ems. My question is, should I also apply ems to my text line-height property?
Caspert
  • 3,977
  • 13
  • 44
  • 88
1
2 3
…
58 59
Column 1