Centralize and stretch sections of a website using w3.css

HTML & CSS
#1

Hello Good Morning everyone.

I’m following the w3.css tutorial but I need your help.

My questions are:

- How do I centralize the Work Experience, Education and Skills sections in the middle of the browser window?

- How do you fix datetime on the same level as the timebar, ie on the same line as the timebar?

- How to stretch a footer bar to all the width of the browser window?

I would appreciate your support, please.

#2

If this is a tutorial then the answer will be in the tutorial but as you don’t link to it I can’t point you to the pertinent sections.:slight_smile:

It looks like its some kind of mini framework (like bootstrap) and you would need to use the framework to achieve what you want. It looks as though you should be offsetting the column in the same way that bootstrap does as that panel is floated left and can’t be centred. In vanilla CSS you’d just set a max-width and use margin:auto and job done. In a framework you will have hoops to jump trough first and you probably have utility classes that offset columns into position to centre them because as I stated floats can’t be centreed with margin:auto.

As you are a beginner I suggest that you don’t use a framework until you have taken some basic lessons in CSS or you will just be firefighting the whole time. Also any tutorial that is teaching layout based on floats is well past its sell by date and should not be used.

In vanilla html and CSS:

 <div class="datetime">
      <p id="date"></p>
      <p id="time"></p>
    </div>

.datetime{
  display:flex;
  padding:3rem 1rem 0;
  border-bottom:1px solid #ccc;
}

You’d need to remove it from its current context as that footer is inside a container that is 75% wide and floated left.

You need it to be outside of any of those containers and it will naturally fill the full browser width.

I suggest you re-read the documentation for the framework you are using as I’m sure all that would be covered but I would urge you to discard that tutorial and move on to one that uses flexbox or grid for layout instead.

However before you do that have a go and try and build the page yourself so you understand how css works and once you’ve got a basic grasp then you can use a framework to speed things up but like many others you will find that you don’t need the framework anyway and can work quicker on your own.

If you wish to continue with this tutorial then post a link to it and I will try and identify the important concepts for you.

2 Likes