Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML CSS

Posted on 2016-11-28
7
Medium Priority
?
52 Views
Last Modified: 2016-11-28
In a html code, <nav> (left menu) is followed by <section>. Will margin of section is calcuated based on the left most of the page, or based on the nav ?

Is nav a inline or block element ?

Thx

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
0
Comment
Question by:AXISHK
  • 3
  • 2
  • 2
7 Comments
 
LVL 19

Expert Comment

by:Montoya
ID: 41905112
your nav and your section tags are separate elements.

the nav tag, by its nature, displays inline

The section does not, unless you tell it to do so. Your margins as they are displayed, are looking at the page.

If the section tag was part of the nav tag..

<nav>

     <section> my section <section>
</nav>

then the margins would be relative to the parent container.. unless you change them.

Hope that helps.
0
 

Author Comment

by:AXISHK
ID: 41905125
In case the code appear as

<nav> ... </nav>
<section> .... </section>

Then, how does the margion of <section> base on ?

Thx
0
 
LVL 19

Expert Comment

by:Montoya
ID: 41905147
It is very useful to understand the box model https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Another to look at it, is a shoebox.

a container div, is a shoe box. Everything inside it is contained by default inside that box. (being that its the web, you can break that rule, but we're talking defaults).

So if my shoe box is 20px from the edge of the screen, then the items inside it will start at the distance of the shoebox. Therefore, if my <section> inside my shoebox has a 5 px margin, it will be 25 pixels from the edge of the screen... and so on.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:AXISHK
ID: 41905200
To clarify my understanding

<div>
  <nav> .... </nav>
 <section> ... </section>
</div>

<nav> is configured as float. So margin of <section> will be calcuated based on <div>, not <nav> even though <nav> is followed by <section> ?

Thx
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41905239
The margin is relative to its parent. Your nav is floated left and the section has sufficient left margin to be able to accommodate the <nav> so these two elements will be side by side.
The gap between the will depend on the box-sizing style specified for each. For instance

box-sizing: border-box

On the elements will mean the border 3px is drawn inside the element as part of its width.

If it is not specified then the border is outside the element and is added to the width.

This results either in the containers being right next to each other or having a 6px gap.

To answer your question the margin of the <section> is dependent on the <section>'s container - not the <nav>
0
 

Author Closing Comment

by:AXISHK
ID: 41905242
Thx
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41905283
You are welcome.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question