Im trying to build a fluid layout in CSS with percentages instead of pixels. I want it so that if the user tries to zoom in on the website, all internal proportions should stay the same.
Right now, when I zoom in, the text grows out of the drivs and the layout breaks.
I'm using a wrapper and three columns which has about 30 percent in width each.
Since this is sort of a layout problem, I've posted the entire layout on JSBin. The problem is apparent there as well. When you zoom in, the internal proportions break and the text grows out.
http://jsbin.com/zerewuto/1/
Anyone got any ideas how to fix this?
In top of your css add:
* { box-sizing: border-box; }
This makes the box model calculate paddings and borders inside of the box. It's best to use when working with relative measures. (Or always)
EDIT: Forgot to mention. The reason the layout breaks is because of margins. At a point they + the percentage becomes more than 100%.
Consider a page that is 100px wide only. Then each 10px margin would be equal to 10%.
Lycka till!
You could try to add word-break: break-all to your CSS.
I would like to warn you that Liquid / Fluid layouts do not prescribe the use of percentage values for everything as this can easily cause display problems like this.
Use pixel values and percentage values reasonably to achieve a robust liquid design.
Related
This is a tough question and I've struggled with it long enough - time to ask people who probably know more than I about CSS layouts and why my layout is such a nightmare.
Consider this image:
The blue line represents the viewport. The layout is forced by the application to be horizontal / landscape. The user understands this, so not an issue.
The constraints... The column on the left can occupy no more than 30% of the available viewport space. That's easy enough. The tic-tac-toe grid to the right will occupy the remainder. Between the left column and the grid, there is about 12px space (margins, padding, whatever gets it done). The grid on the right, in this example, has 9 boxes, but can have less and needs to flow accordingly. The widths of the columns in the grid must be equal. The heights of the rows in the grid must be equal. The text in each box in the grid cannot force the size to become unbalanced (width or height), meaning overflow: hidden is acceptable or truncate and add ellipsis.
This can be displayed on a desktop computer, phone, tablet, etc. The layout should adapt, but that's not a huge issue. Maintaining the ratios/sizes is.
So, that's about it. Tricky. I intentionally haven't posted code because my code for this has become such a monstrosity as to become useless and likely to taint any ideas the enlightened folks here might have.
Thoughts? Help? Thank you so much in advance!
You can do it pretty easy using flexbox . Here's a complete tutorial on flexbox
Also, you can do it by using javascript, getting the wrapper width and height and divide by 3, and assign the values to the tic tac cells
It would be great if u have included your code
Try using Flexbox for this. That would help you solve your probelm easy.
Hope this links help you to solve your problem.
1.Link 1
2.Link 2
I have the following layout I need to solve
I understand that the whole idea of the responsive design is to leave the height to adjust to the content, but for this particular work the customer wants it this way no matter how I have to figure it out but I'm struggling hard to achieve it
In my mockup I have a 100% height and weight body, and then a container taking 85% height of the body size.
Inside that container there are the following elements:
A Top div container with the company logo
A Progress bar with a step number
A small div with some instructions for the current step
A Div containing the form elements that the user has to fill
A bottom div with 2 navigation buttons
The content should be always visible no matter the device used (see image below)
Number 4. has a inner scrollbar with overflow-y because that content will change
In order to do this i set heights in percentage (%) for each div within the container, however I need some padding for the elements, but when the browser resizes or the device changes height and width the elements overlap each other
I don't want to rely on a bunch of media queries to fix this. I wonder if anyone can find an approach or some reference for this since i can't seem to find it
Thanks
If you don't want to use many media queries, I think you should use Jquery (or Javascript) like this:
Fixed height of all div except FORM CONTENT (include padding, margin, border with box-sizing: border-box). You can use some media queries for best style.
Use Jquery to calculate height of FORM CONTENT (this is scrollable content)
Example:
$('#form-content').height($(window).height() - X);
// With X = total height of other divs includes margin, padding, border
Call this script in $(document).ready(...) and $(window).resize(...)
Hope this help.
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
I am building a very simple page, powered by tumblr.
It has 3 columns of content in the main area. The content divs are all set to a width of 33% and floated left, most of the time this arranges itself as you would expect, but as you resize the window it seems to sometimes revert to 2 columns. Anyone know how to solve this?
The html is here: http://emilestest.tumblr.com
Try to set the .item css width to: 32%. The browser probably miscalculates width sometimes so you probably have a extra pixel or two, so the float overlaps to next line.
There is a Javascript action involved. Your article html elements gets the absolute position and some coordinates. Have a look over those scripts (or disable them, in order to use only CSS for positioning).
In your specific case, there are several solutions:
Place + size the divs with JavaScript and disable CSS layout
Use display: table
Use a table element
Disclaimer: For all those who cry out when they read table:
Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to control graphic and page layout.
Source: http://en.wikipedia.org/wiki/Tableless_web_design#The_use_of_tables
I have a layout with two main divs. The width of each div is 45%. Yet when I inspect the divs at different page widths the the divs are usually one pixel different from each other. 639 vs 640. I don't really care about this, the only problem is that items inside the smaller div aren't lining up properly with other items. It only happens at certain page widths but it is broken more than it is correct. It seems the elements in the larger div line up at any window size and the smaller div is almost always wrong, but is correct at some sizes.
What is going on here, is there a way to force the smaller div to act like the larger div?
This is a bug/sub-pixel issue.
I've asked a similar question a while back and found out that webkit-based browsers have a rounding issue when it comes to percentages.
Here's the link that bookcasey shared with me to answer my question.
Widths must be in integer amounts.
What is 45% of 955? 429.75px. Can't have that. So one of them has to be wider than the other.
Don't use percentages, and if you do, make sure the total width adds to a bit below 100%. I've always run into overflow and misalignment issues when using 100%.
I'm assuming you have another div that takes up the remaining 10%. So, perhaps try 44% on both.