HTML/CSS layout help

[Ragingwasabi]

Hey guys,

 

I have to make a simple website as an assignment, but I have an issue with getting the layout to what I want.

 

I want my site to have 2 columns (navigation on the left, content on the right). I found a css template from 

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols

that does this.

 

However, that setup stretches the page across the whole width of my screen. I've figured out how to set a fixed width for the columns, but now I cant figure out how to centre them on the screen.

Can any one help me please?

 

 

[duncannah]

38 minutes ago, Ragingwasabi said:

now I cant figure out how to centre them on the screen.

Try `margin: auto` on the parent element. Seeing the source code would be helpful

[Ragingwasabi]

Just now, duncannah said:

Try `margin: auto` on the parent element. Seeing the source code would be helpful

the source code is the same as the one i linked, i just changed the widths to use absolute  values rather than %.

 

I have tried margin:auto on everything i could but it doesnt seem to work.

[duncannah]

2 minutes ago, Ragingwasabi said:

the source code is the same as the one i linked, i just changed the widths to use absolute  values rather than %.

  

I have tried margin:auto on everything i could but it doesnt seem to work.

Looks like you also have to set the width as well.

.clearfix {
	width: 600px; /* width here */
	margin: auto;
}

[Ragingwasabi]

oh wow its working! Thank you so much!

A further question though, is the width supposed to be the combined width of both columns?

[duncannah]

5 hours ago, Ragingwasabi said:

is the width supposed to be the combined width of both columns?

Yes, otherwise the layout might either break or be off center

[Ragingwasabi]

3 hours ago, duncannah said:

Yes, otherwise the layout might either break or be off center

alright, I see. thank you!