Aside & Mobile Friendly Layout!

[Yatendra]

I designed many Web Page Layouts, but in all Web Pages there are some issues.

One is the "Aside", Web Pages are misbehaving with Aside, when I check the Web Pages with Mobile Browser, they mess up totally!!

Need help here.

Second, My Web Pages are not totally Mobile friendly, such as the "Header" and "Footer" also misbehaves.

When the Web Pages are open with Mobile Browser, the Header and Footer both don't come up with full width, but the web pages are PC friendly!!

 

I attached the code files, have a look.

Basically I need to know "How to Aside" properly, and as well as I want a review for my code.

 

Layout _4 and Layout_4-Copy.html are same, but with one difference :- I removed "Aside" from Layout_4-Copy.html.

Plz refer Layout_4-Copy.html for Second Problem, specifically.

 

Thank you.

layout_3-3.html

layout_4.html

layout_4 - Copy.html

[Ingolme]

Your layout technique is really bad. This doesn't have to do with aside, this is just what happens when you try to position things with pixel values and negative margins.

 

To allow blocks to be next to each other, use the CSS float property.

 

Do not set the width of elements in pixels, don't use tables for your navigation menu. Be aware that borders add on to the width of the element, so that will affect our layout as well.

[Yatendra]

Hey, Thanks for the review.

Now I know what I have to fix.

I'm a bit confused about different units for various purposes. I mean the specific use of units for positioning or making blocks to be aside.

Plz help me out with this.

And on w3schools they recommend "em" unit instead of "px", I'm very confused with the use of "em" unit.

Can you plz explain the "em" use, and as well as the exact conversion(HOW TO) of it, according to the font-size taken for different blocks or text.

 

And what will be the perfect unit for setting "width"???

And did you referred my second problem with your Last statement..!??? (About the "Header & Footer").

Thank you.

Edited June 30, 2016 by Yatendra