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
Related
I'm attempting to create a responsive column system for my site. Essentially, a block of images in a grid, that will look similar to this in the end:
Where the black lines represent the container, and the colours represent an assortment of images.
The problem is, this layout would require a 6-column grid with 0 gutter. Working with percentages, each column would need to be 16.66% repeating, which would be difficult to keep accurate. What is the best way to deal with creating something like this? The only way I would know of is using CSS to set widths to percentages, but, like I said, that would be difficult to keep accurate with decimal places and all.
If I was producing exactly that layout with static HTML, I'd have classes for multiples of width 16.6% and just round up the rightmost div for each row to make up the 100% (E.g 5x16.6% and 1x17%). Sounds messy but you could do it quite cleanly with Class attributes like "two-col right" etc.
Personally my OCD would force me to rethink the number of columns or add a gutter to make everything add up cleanly. Also, if you are happy to provide javascript dependent pages, this is a fantastic (already responsive) jQuery plugin for this type of layout http://isotope.metafizzy.co/v1/index.html.
When trying to make websites responsive I quite often get horizontal scrollbar on small widths. But often it is quite not obvious which element introduces it and it might take quite some time to pin down. It is even worse when it is interaction of multiple elements... So maybe someone can give some advice, of how to reliably find which elements flow incorrectly?
You get a horizontal scroll bar when some element has width greater than its parent.
If problem is occurring in responsive design, elements which has width in px or em are probably the ones causing issue. Give them width in % and that might solve your issue.
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.
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.
Hey guys, I've struggled with this for a bit and don't seem to find a solution. Need an advise or the simple statement saying this is impossible (so far I think it is - impossible).
Problem is:
need 3 column flixible width layout, left fixed width, right aswell, middle - takes all of the space provided by body or whatever.
Trick is that either right or left columns might be taller then middle, and we need them not to overlap the footer. Also docmode is Strict. I know that Table solves the problem in a sec, but I wonder is there a Div solution around?
This is what you're looking for I think:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
or with pixel widths:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
It's XHTML strict, and supports all current browsers.
YUI Grid CSS is proabably what you want. I am not familiar with the CSS magic involved, but it supports multiple different layouts. It doesn't seem to support fixed left and right columns.
No tables challenges are a bit like waving a red flag to a bull for me:
http://edeverett.co.uk/experiments/noTables2.html
Tested in IE7, FF3, Chrome 2.
This should get you most of the way there, the main idea is to use negative margins on the two side columns with the main column set to 100% width. It would benefit from having a lower limit on the page width.
(I've edited the example html to show how to include content in the centre section)