I am working on the interface for a small web module and am having some problems with the CSS. Right now I have the container DIV and then tables to layout the sub-sections. I am floating 3 of the tables left and 3 tables right, which until now has worked great.
I recently added a feature that allows for additional fields to be added by the user as needed and as the height of a table in the right column grows, it breaks the layout. Is there a better way to do this so that the layout won't break?
After adding "clear:left" and "clear:right" to each table, it appears as follows...
After moving the 3 left floated tables to the top of the code and removing the "float:right/clear:right" from the other 3, it works well except for this.
For each float left, add clear:left, for each float right, add clear: right.
It'd depend on the order of each floated container though. Another option would be to try keeping one set of floats from one column (i.e. the float lefts or float rights) and remove the float property from the others in the other column so they wrap to the side of the floated boxes.
EDIT: a working example: http://cssdesk.com/Xan5j
It would be better to show a live example of this, but the easiest way to handle this—if this is an option—is to wrap each column in its own div.
Related
I am new to css. I am having an alignment issue in one of my html pages. I have created an invoice page, which can be viewed at: https://www.w3schools.com/code/tryit.asp?filename=G6HQYBZLNH3Y .
When you will open this page you will notice that one of DIVs is slightly more to the right and one of its edge is pointing out. i have tried multiple things but i am unable to set its alignment. I will be really thankful if anyone can solve this issue.
The Bootstrap .row class adds negative margin to the left and right, and the .col classes add padding to the left and right. You have tried to counteract this padding by adding columns to the container to wrap your rows which in turn wrap additional columns.
Try removing those wrapper columns. This will allow the previous rows with black backgrounds to extend further, the text will line up better, and then the div in question won't extend further than the previous rows.
https://www.w3schools.com/code/tryit.asp?filename=G6HS3SOMWWM8\
I am working on a product page layout that has two columns with various height items. I am trying to avoid nesting the items in two column containers, so that I can have optimal order of elements on small screens that go to one column.
The problem I am running into is that sometimes the second block (floated left) is longer than the first block (floated right), and sometimes the opposite is true. The problem occurs when the third block is given clear: left to make sure it's as far right as it can go, the fourth block will not go above the top of the third block.
Here is a CodePen with the code: http://codepen.io/anon/pen/jAQdEK?editors=1100#anon-login
What you want to do looks like a layout table to me. Using display types table, table-row and table-cell might be an easy and solid solution for that. See:
http://codepen.io/wortwart/pen/grQqzv
I've seen examples here and there of a trick to use
position:absolute
on the first column of a table, and then make the rest of the table scrollable horizontally.
This works, as seen here: http://jsfiddle.net/YMvk9/4289/
However, as soon as I added the vertical scrollbar you can see that it does not scroll the frozen pane, instead, the frozen pane now sticks down from the rest of the table in a ugly sort of way.
I need the frozen column on the left to scroll vertically. Can anyone fix the jsfiddle code?
Assuming that what you want is for the user to be able to scroll the table vertically or horizontally there are several ways to achieve this. The most straightforward would be to put your headcol cells in a table all there own then position the two tables so they are right up against each other and wrap them both in a div with overflow:scroll. I did come up with a patch-work fix for your current layout though.
Here is the FIDDLE
You had several problems:
Your overflow property was only applying to the second column of the table.
Your containing div was not containing anything because it had no positioning rules so I gave it some absolute positioning and assigned the overflow:scroll: property to that.
Once you position the container absolutely it screws up the long class so I assigned that to float:right; and gave it a margin-left to account for the headcol cells.
Finally, since you are floating an element, you have to use a "clear fix" to make sure it doesn't wrap so I added a new class and a new cell to each row to fix the layout.
Hope that helps!
UPDATE: After posting I noticed one issue in that adding margin-left to your long class screwed up the way the table looked to I removed that rule and added padding-left to the div to fix the issue. There may still be a couple minor margin & padding tweaks you need to do to make the table look just right; but it works! I updated the fiddle too.
I have a layout in which there are three columns all stacked by floating to the left. In the inner div, I have 4 columns in which three columns are floated left, 1 floated right. This results in not being able to select any text. If I remove the float, I'm able to select things but it messes up the layout.
The page can be found here: http://2006scape.com/services/hiscores
What I've tried: I've tried changing the z-index on various divs, checking all float to see if there were any conflicts and I've been unable to locate the problem.
The inner layout should be done with a table. A ranking table is tabular data.
Tables are not all evil you know...
Live Example
Here is the example.
http://jsfiddle.net/wnud4/1/
I'm wanting all of the green boxes and blue boxes to fall into order one after the other with no large gaps, aside from the established margins. For some reason, the second element in the blue column is complaining about alignment. Does anyone have any suggestions, or could provide guidance if I am approaching this the wrong way. I don't want to predefine columns, but other than that I'm open to anything. Thanks!
Rather than using floats on both columns, you could only use float: left on the left column, and simply use margin-left on the right column, to push those divs past the floated divs. Then you'd just need to clean up your widths and margins to keep everything even.
Here's an example: http://jsfiddle.net/UZY6t/2/
Untested in anything except Google Chrome and FF but you could try using a combination of float: left and margin-left:
http://jsfiddle.net/wnud4/7/