Beginners best bet on layouts?

Hi I’m new here however I know html and CSS and learning JavaScript. My lever on a scale of 1-10 is in my opinion a 6.5. I totally understand everything, however when it comes to creating a layout or floats or positioning I’m bad. Can you give any pointers as to better understand position/float & layouts. Please refrain from other CSS style sheet such as normalize (forget the name), grids, etc. my simple base is an .html and .css style sheet. Any help is appreciated, contact here or Skype : AndreeU17

-Jonathan

Hi AndreeU17. Welcome to the forums. :slight_smile:

when it comes to creating a layout or floats or positioning I’m bad. Can you give any pointers as to better understand position/float & layouts.

There’s no grand science to it. If you want elements side by side, float them. :slight_smile: As a rule, forget positioning for major layout elements.

Because there’s an infinite way to skin a site (as well as a cat), it’s better to present an actual layout and ask how it might be laid out. And, of course, it’s worth studying sites you like and seeing how they were done. It’s easy to look under the hood.

Welcome Andree! To better understand how to learn how to or build immaculate layouts, then you need to grasp the core concepts of floats, margins, padding, and borders or else you will find yourself pulling your hair out. Understand how floats work and how to clear them, and not just with the clearfix hack. If you choose to not go that route then I can assure you that your page layout will break before you’ve even finished putting it together.

I have a great understanding on borders,margin & padding as well as the width on how everything should be added to a specific number, Exampe be the 960. however lets say I have an “article” and “aside” tags.
I want both tags (not sure what the specific names are) next to each other. I would float the article left and the aside right, and anything after the “aside” would be “clear:both” right?

You could. But rather than clear: both; I would tend to wrap the floated elements in a container, like a div. That’s a neater solution than clearing other elements. Make sure to give the floated elements a width, and give the container overflow: hidden to force it to wrap around its floated contents.

thank you thank you very much as that is a very neat way of doing it. Im a Senior High School student learning all this on my own from books and asking and testing. Its hard to learn all this the best way and the great way since theyre is a bunch of different forms however im taking down every step to reach a well clean markup with a nice css that produces a GREAT Website for my level.
Thank You!