JoHubb Posted October 25, 2018 Share Posted October 25, 2018 At present, using this at the top of the document, I have four columns. I would like to change this to three columns towards the end of the document. I have experimented without success. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Using Internal CSS</title> <style type="text/css"> body { font-family: Arial, Verdana, sans-serif;} h3 { text-align: center; color: BlanchedAlmond;} p { line-height: 1.21em; font-size: 1.18em; } * { box-sizing: border-box; } .column { float: left; width: 25%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } </style> I'd be grateful for advice. Thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2018 Share Posted October 25, 2018 https://www.w3schools.com/code/tryit.asp?filename=FWKPNGXED0NO Link to comment Share on other sites More sharing options...
JoHubb Posted October 25, 2018 Author Share Posted October 25, 2018 (edited) Thanks. I get the general drift but don't understand about nth-last-child I need one row of three columns for photos between perhaps 5 or 6 rows of text. I can do this when i am using four columns for the photos, but I don't know how to make the change to three columns half-way through. I can see that the changes I need are made at the top of the document which is a start. And 'nth-last-child' must refer to either the last column, or is it the last row? Am confused. Edited October 25, 2018 by JoHubb Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2018 Share Posted October 25, 2018 nth-last-child is the last .column element .column:nth-last-child(-n+3) { width: 33.33%; background:red; } The (-n+3) essentially counts backwards targetting each of 3 elements from last .column:nth-last-child(3) {clear: left; background:blue;} targets the third from last to give it a clear left to force it and its sibling elements below it, a row of 3 of its own. Link to comment Share on other sites More sharing options...
JoHubb Posted October 25, 2018 Author Share Posted October 25, 2018 Maybe I am being very slow, but when I use your code, I get 3 columns throughout the document. Perhaps I did not make myself clear. For the first two-thirds of the paper I need 4 columns for rows of photos. I have rows of text spanning the entire width of all four columns between these. For the last one-third I want only 3 columns also for rows of photos but I want these photos to take up almost all the available space i.e. they will be larger than the 4 column photos. Again, there will be text spanning the entire width of all four columns between them. Am grateful for your help and interest. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2018 Share Posted October 25, 2018 IS the link i gave what you want? It shows all columns but the last three at 25% of total 100% width, the last three 33.33% of total 100% width, in my calculation that make it what you want! by your first post. If you are going to add extras, that I can't possible account for, that's your problem not! mine! I am not a mind reader, I suggest you provide the html so I don't waste my time playing your silly guessing games. Link to comment Share on other sites More sharing options...
JoHubb Posted October 25, 2018 Author Share Posted October 25, 2018 (edited) 4 hours ago, dsonesuk said: IS the link i gave what you want? It shows all columns but the last three at 25% of total 100% width, the last three 33.33% of total 100% width, Is this statement what you mean by a 'silly guessing game'? I was grateful for your help but clearly it only goes a certain distance. Edited October 25, 2018 by JoHubb Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2018 Share Posted October 25, 2018 No! The guessing game began when you supplied css but no html to go with IT! The guessing game continued when you add text boxes to the scenario, expecting me to know how they are styled, where they are! are they in there own containers? I don't know? I was expecting you to show me! You had 3 chances, yet No! nadda, so i guessed! THERE STARTED THE SILLY GUESSING GAME, and with me also the guessing goes so far. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now