[Solved] Colspan problem

[sensationikke]

@Soronbe: http://jsfiddle.net/kzM6a/7/ Note that a small title will add a huge blank spot, where instead the text would have been.

@MDMueller: For making the use of tables correct and instead using divs. Any idea how to make the row-divs and info_box div act as the table example?(http://codepen.io/anon/pen/tDhIG?editors=110): 1) Rows stay a row, with all columns divs NEXT to eachother and 2) the table stays one solid piece, so it’s all next to the image div, or all under the image div.

I guess i’ll just accept I cannot get it to work as i wish it would. In case of the table solution I will just go with the original solution and accept that the red text of different tables is not horizontally aligned.
I am still interested in a better div-solution though!

[MDMueller]

@sensationikke – since IE8 there are the following possible display values: table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, and table-caption

So anything possible with table/tr/th/td-tags may be done without them :)

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Btw, I already made a CodePenin my first post on the first page, which shows a solution to what I think is your problem (divs sticking next to each other).

[sensationikke]

@soronbe: I will have to rethink it tomorrow ;)

@MDMueller: Your solution also had the problem that it does not get pushed under the image div when being resized a lot. I personally dislike,however it’s effective, playing around with margins and paddings like that. Often i search for a cleaner solution.

@wolfcry911: I had not yet though of lists! Your solution seems quite interesting. After altering a few things this so far seems te best solution too. I do have a few questions: 1) Did you alter any of the code I had supplied(except for the html-list and corresponding css)? Making sure I didn’t miss anything. 2) Why the left-margin of 100px on the list? Deleting it doesn’t seem to make any difference on full size, and when resized the box jumps nicely too the side under it. You can see it in my version (I made both boxes a list too): http://codepen.io/anon/pen/uvgbk?editors=110

[sensationikke]

I am going to use wolfcry’s list solution, as it acts exactly as what I wanted it to and seems the most neat solution.

I would like to thank all of you very much for your time and patience! How do I add the [SOLVED] sign?

[Paulie_D]

How do I add the [SOLVED] sign?

I do that…all part of the service. :)

[sensationikke]

I do that…all part of the service. :)

Lucky me

EDIT:

@wolfcry911 I came across a small problem. I was trying to get rid of the nth-child selector by adding a class=”double”. This does not work, why?

[sensationikke]

Strange enough it works perfect in the codepen: http://codepen.io/anon/pen/Dbnxd

Even stranger: i got it to work in my css file by putting
.product_box .double{width:50%; clear:left;}
instead of
.double{width:50%; clear:left;}

Well it works, I don’t know why yet….

[sensationikke]

All widths were set like in your example, but only the selector changed (nth-child(3n+1) to .double). I guess I wanted it just to be sure… Old people use old browsers

[Author]

Posts