I might be going about self taught html and css the wrong way but I am somewhat confused on how to make boxes or grids flex boxes that contains my divs. I’m also not sure if Im supposed to do all of the html first and then do the positioning of my elements in css after.
How would I go about making making test columns alight up top with my iframe and center it? I tried the columns and rows method in css but I didn’t have any effect. Im also not sure if Im supposed to learn html fully first and how to set it up and organize it along with how I would set up and organize the css as well.
if your page is on your website now, you can just link it and we can look at the html + css! if not, you can copy and paste it in the forum as a code block (the button between “block quote” and “upload image”). it’s hard to tell just from a picture what might be going wrong! (especially since i don’t see any iframes in your picture haha)
perhaps you could also link what w3schools tutorial you’re using? there’s several different ways to do columns in html+css, so the fix depends on what method you’re using.
it sounds like you might need a more basic overview of HTML + CSS than the one you’re using - there’s a bunch linked in the resources list!
it doesn’t reaaaaally matter what order you write your code in, but i think it’s best to do the HTML and CSS simultaneously so you can tell if everything is doing what it’s supposed to do and notice when something goes wrong.
And for w3 schools ive been just going down the list of the html course then possibly stopping to put it into practice. I do the same for CSS. I learn s couple of the lessons then break and write the code of whatever I learned.
However another resource I was following was Brocode from youtube as well.
I just took the style of a div from my page and put in a .column in your code to get this result. I’m believe it’s display:inline-block; vertical-align:top; and having set widths is what’s doing all the actual work.
My diary archives (random, shorter page linked lol) have a pretty similar set up and you’re more than welcome to yoink the code if it’ll help! Adding display:inline-block; and a set width to .main in the style section this page gave me I think exactly what you’re after.