CSS DIV positioning of 3 columns

[LambdaEnt]

I have created a site using tables with 3 columns, and would like to change it to DIV sections.

The left and right columns are a fixed size, and should slide vertically as the page is scrolled.

The center column width needs to expand or contract with the width of the page, and should not slide vertically.

The contents of all 3 columns are pulled via virtual includes.

Here is what the page looks like using tables (without the sliding):
http://www.wordsforall.org/7/testa.shtml

I have made a first attempt, with only partial results:
http://www.wordsforall.org/7/testb.shtml

The CSS code for the column DIV’s are the last 3 entries:
http://www.wordsforall.org/style.css

Thank you!

[Paulie_D]

Could you make a demo in Codepen.io rather than linking various sections of code?

[LambdaEnt]

I did so, but the virtual includes don’t appear. Do you know how to fix this?

Tables
https://codepen.io/LambdaEnt/pen/JRYRRr

DIV
https://codepen.io/LambdaEnt/pen/ZpbpBL

[Paulie_D]

Try just supplying the actual output HTML…we don’t need the whole page, just enough to demo the problem.

Oh…and the minimal CSS as well.

[I.m.learning]

If you need a width to change, you could use width: auto and overflow-x: hidden works for some occasions of stopping the horizontal scroll.

There are also other ways to go about creating columns. Another option could be setting widths as percents and using media query to control content that will change sizes

[LambdaEnt]

OK. DIV Is new to me. I was hoping for some more complete formulas.

[I.m.learning]

Div is a division tag
Basically use them for grouping block elements to make styling easier.

[LambdaEnt]

I’m not that clueless! Ive been coding for 10 years, just not used to using DIV. i posted some of what I did. I was looking for someone to actually help me work through and correct the code to do what I need. General question I can look up. I posted a specific situation that I’m hoping to find some assistance with.

Thank you.

[I.m.learning]

The only thing I see is you styling the width on a couple items without stating it, but could be set to max min or auto. My phone won’t let me open the pen to edit.

When I open your page, it looks okay except your image stops. You could look into how frameworks use columns to see if anything helps. Many are using Bootstrap; they have a complex column system. Might be overkill.

[I.m.learning]

The only thing I see is you styling the width on a couple items without stating it, but could be set to max min or auto. My phone won’t let me open the pen to edit.

When I open your page, it looks okay except your image stops. You could look into how frameworks use columns to see if anything helps. Many are using Bootstrap; they have a complex column system. Might be overkill.

[LambdaEnt]

Again, is there someone else here who can actually help troubleshoot the code, not offer generalizations?

[Author]

Posts