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

Bootstrap: fluid layout with no external margin

if i have:
Some Element....
Other Element
With this code…
Tom
  • 4,007
  • 24
  • 69
  • 105
31
votes
2 answers

CSS fluid layout: margin-top based on percentage grows when container width increases

I'm just learning CSS fluid layouts & responsive design, and I'm trying to use all percentage values with no px values in a layout. So far it seems to be working, but in one spot, I'm seeing something I didn't expect. I'm trying to put a margin…
Gregir
  • 1,574
  • 5
  • 21
  • 43
30
votes
2 answers

Why doesn't min-content work with auto-fill or auto-fit?

Basically, I do not understand why this works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } But this doesn't work: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I really wish to…
timetowonder
  • 5,121
  • 5
  • 34
  • 48
29
votes
2 answers

bottom align a button in R shiny

I cannot figure out a way to bottom align downloadButton with a selectizeInput, i.e., library(shiny) runApp(list( ui = shinyUI(fluidPage( fluidRow(align="bottom", column(12, align="bottom", h4("Download Options:"), …
guyabel
  • 8,014
  • 6
  • 57
  • 86
24
votes
3 answers

How to design a multi-level fluid layout in QML

I have designed a layout in QML to learn more about its features and have some questions on the "Best Practices" in designing such layout. Here it is: It is essentially a ColumnLayout consisted of three RowLayouts, each one with some Rectangles.…
Isaac
  • 2,332
  • 6
  • 33
  • 59
21
votes
6 answers

Bootstrap: fluid table too wide for window

I'm working on a project using twitter bootstrap. We have a table that has lots of columns and is going to be larger than the browser window almost every time. This is what happens on the right : The table border stays in the browser window, while…
ksol
  • 11,835
  • 5
  • 37
  • 64
20
votes
9 answers

How to fill 100% of remaining width

Is there any work around to do something like this work as expected? I wish there were something like that width:remainder; or width:100% - 32px;. width: auto; doesn't works. I think the only way possible is working around with paddings/margins,…
Vitim.us
  • 20,746
  • 15
  • 92
  • 109
19
votes
7 answers

CSS side by side div with Pixel and Percent widths

I have two div's (side by side) inside a parent div, i want right div to occupy 100% of remaining space (i.e. 100% - 200px) and should always stay next to left div (not below left div):
Faizal
  • 1,693
  • 6
  • 20
  • 24
19
votes
10 answers

How to make Bootstrap responsive layout work on IE8

I've been search for a while and found some people got it working, but none of them provide any code samples. I tried their suggestions but it didn't work for me. By suggestions, I tried adding
Ray Cheng
  • 12,230
  • 14
  • 74
  • 137
19
votes
7 answers

Fluid width fixed position

Imagine:
Where: .outer is part of a column structure, and its width is a percentile and therefore fluid. .inner represents a fixed position element that should fill with a 100% width…
nderjung
  • 1,607
  • 4
  • 17
  • 38
18
votes
1 answer

Bootstrap - Fill fluid container between header and footer

This may be a very simple question, but I've been out of the CSS scene for awhile and I can't seem to figure it out. I am using the Bootstrap framework and I have a fixed header and footer. The container in between includes a navbar and content…
fortune
  • 1,527
  • 2
  • 15
  • 22
17
votes
4 answers

Bootstrap Affix plugin with fluid layout

If I would like to use the affix plugin for sidebar in fluid layout but the width of the sidebar always change when it is affixed and the responsive design don't work too. In the Bootstrap documentation the affix plugin is not used with fluid…
Toki
  • 173
  • 1
  • 1
  • 6
17
votes
4 answers

How to implement fluid font size using pure CSS

I have text wrapped in
s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element. I came across a Javasript + CSS solution, but just…
skyork
  • 7,113
  • 18
  • 63
  • 103
15
votes
9 answers

auto resize text (font size) when resizing window?

I have been trying(in vain) to build a page whose elements would resize as I changed the window size. I have it working in css for images no problem, but I can't seem to accomplish the same for text, and I am not sure it is even possible in CSS. And…
Stephen
  • 8,038
  • 6
  • 41
  • 59
14
votes
2 answers

How can I avoid media query overlap?

The cascade is what makes CSS special and powerful. But in the case of media queries, overlap can seem problematic. Consider the following CSS (continuing rules for CSS media query overlap): /* Standard - for all screens below 20em */ body { color:…
Baumr
  • 6,124
  • 14
  • 37
  • 63
1
2
3
…
58 59