On my web-site http://vfm-elita.com (it is not in English, sorry for that) - center and right columns are overlapping, please see screenshot for details:
Between left and center columns you can see a "gap" with a green background - it is expected and good.
But there are no any gap between center and right columns, instead they are overlapping.
Issue exists in all known browsers
There are no special formatting applied to columns. They are usual 'TD' columns, the only CSS modifier is width that is "250px" for left and right columns, and for center - it is "auto".
Please advise how can I correct that error.
Thanks a lot!
You have two divs with class "wrap" in the middle td element. Both divs has width: 100%. When i removed that, overlapping issue was gone.
BTW, table layout is out-of-date for more than 10 years or so.
I had a look and the quickest fix I found was to add a padding of 7px to the left hand side of the last table-cell in the table with class "fon".
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 have no control over the html in this project, so I need a css only solution unfortunately. The html is horrible, and it this wouldn't even be a problem if I could edit it. I have made a fiddle of where I am at at the moment.
I have a fixed width div, with a fixed width table inside it. They are the same width (500px in example) The table has an unset number of rows, generated in asp. I have floated the rows left so they appear in line (I know this is awful, but it was all I could do without editing the html) Each td is 100px. The heights and background colours added in the css are just to make it a bit clearer, they can be changed to whatever.
What I want to achieve is to get the td to start at the right hand side instead of the left. I have tried floating right instead of left, but this makes the links appear in reverse order which is undesirable.
The only solution I can come up with is to change the table width in css and float it to the right, which would be fine if the number of rows was a constant, but there could be some added to it or removed, which would leave it looking incorrect again.
fiddle link
I think you were correct with your thought to change the table width in css and float it to the right. I think I get what you want if I set the table width to 0px (it will expand to contain the tr's) in CSS, and float the table to the right.
Edit: nevermind. I was using Chrome and it worked there, but not in IE
Edit2: width:auto seems to make it work in IE, Chrome, and Firefox
I you have fixed width tds in your table, they should add up to 500px. In this case they add up to 400px. So you have to prepend one tr with auto width to your table.
Update: Hmm, this does not work since you have floating trs instead of tds
Not a front-end UI but have a (probably) very easy problem to fix. Here is a jsfiddle of it: http://jsfiddle.net/trestles/U7mYT/ I have two floated elements shown in this screen shot. One is floated left and the other (index-right-content) is floated right. The floated right div has two columns of content. The second column is much longer but doesn't expand out the box to push down the container. The index-right-content is posistion:relative. The index-right-content is the blue dashed border.
thx
edit #1
fiddle of it: http://jsfiddle.net/trestles/U7mYT/
I think the issue is the 'index-box right' which is right floated needs some way to clear itself but adding a clear:both didn't seem to do it.
don't do this full-time so thx for any help
I don't know why you should use positioning for the div index-right-content. Also, the width is more than it should be... I think I see 640px for the width, which I think is unnecessary, provided that the widths of the columns inside this div is defined.
see the updated jsfiddle adding float to both inner columns in container.
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/
I don't usually post a link to my site when asking questions, though I don't see another way around it. I apologize in advance.
I'm having difficulties with a specific page. The page consists of Team Members, where each member is its own DIV (also each team member is coincidentally a separate post in Wordpress).
For some reason, the DIVs wrapping each post are clearing left, but no clearing attributes are assigned!
The page is located here: http://engineercreativity.com/samples/comsense/?page_id=15
Please, if you can help, I'd love to hear any input.
Thanks a lot!
Amit
Divs are floating on horizontal axis and not vertically, What you are essentially looking for is a Masonry Plugin, its for jquery and should easily solve your problem.
http://desandro.com/resources/jquery-masonry/
edit:
your divs are not clearing on left, please see the computed layout
the whitespace is not because of divs clearing left, the whitespace is because of line height. When you are having two floating elements in a row, then the row will take height equal to the bigger element, so essentially each row will have white space below the smaller div. This is similar to a HTML Table.
Akinator's fix didn't work for me in FF on Win XP. If you change your float on the "team-member" class to float: left it will fix it. It is being caused by your static image being float left and the rest of the divs around it being float right.
If I understood your question correctly, you have a margin-bottom of 15px in the class .team-member, this gives and extra white space.
It should be set to 0 (or not set)
Is this what you ment?