Jump to content
JoHubb

Change Column width in Document

Recommended Posts

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!
 

Share this post


Link to post
Share on other sites

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 by JoHubb

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by JoHubb

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×