Html, body <div id="outer> <div id="maincontent>

I’m having small alignment problems.

CSS
html, body

here is where I should set . . .

color
background image
font-family
font-size
font-color
line height

correct?

<div id=“outer”>

Here is where I set the screen width, (not view port), correct?
In my case . . .

max-width:1200px;
min-width:400px; (Do I need to have min-width ?)
width:100%;
margin-right:20px;
margin-left:20px;
position:relative;
margin-top:30px;

Then there is . . .

<div id=“maincontent”>
In my case . . .

float:right;
width:73.33%; /* 880px as a percent of 1200 */
margin-top:30px;

<div id=“header”>
float:right;
display:block;
position: relative; /presently used to set header images./

Basically maincontent is the right 2 thirds of the screen and a <nav id> for the left 1 third.

There are two header type images 880px wide, and a smaller pic (float left).

There is <p> text throughout the main content

There is the footer.

QUESTION.

Does everything in the body inherit downward into maincontent unless otherwise changed with divs, etc?

So does a <p> in the css page need to define font-family and all of the other font elements here, or is it already inherited from the body{}?

What I’m looking for is a default alignment of all items within the maincontent div.

Of course there is a simple answer - correct?

Thanks . . . Rick

yes, generally people set the default font properties on the body so that everything in the page inherits them.

<div id=“outer”>

Here is where I set the screen width, (not view port), correct?
In my case . . .

max-width:1200px;
min-width:400px; (Do I need to have min-width ?)
width:100%;
margin-right:20px;
margin-left:20px;
position:relative;
margin-top:30px;

It’s impossible to say without looking at your design. Not all designs require a wrapper.
But the margin looks wrong because they will add to width: 100% and force scrollbars to appear.
You don’t have to have a min or max width.

Then there is . . .
<div id=“maincontent”>
In my case . . .

float:right;
width:73.33%; /* 880px as a percent of 1200 */
margin-top:30px;

<div id=“header”>
float:right;
display:block;
position: relative; /presently used to set header images./

Basically maincontent is the right 2 thirds of the screen and a <nav id> for the left 1 third.

There are two header type images 880px wide, and a smaller pic (float left).

There is <p> text throughout the main content

There is the footer.

Not sure of the questions here…

Does everything in the body inherit downward into maincontent unless otherwise changed with divs, etc?

So does a <p> in the css page need to define font-family and all of the other font elements here, or is it already inherited from the body{}?

Yes, Font properties will be inherited by default.

What I’m looking for is a default alignment of all items within the maincontent div.

You can set default properties on any element type. Most people have a block of ‘reset’ styles first which overrides the margin / padding / font properties on all these elements in the page.


body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 100%;
}
h1,h2,h3 { font-size: 140% }
h2 { font-size: 120% }
h2 { font-size: 130% }
p { margin: 1em 0 }
a { color: blue }

All the best,

What is the difference between these two?

They both do the same thing! ! !


margin-left:26.67%; /*320px in a 1200 width px page*/

Float-left;
width:26.67%; /*320px in a 1200 width px page */

This is my <div id=“nav”> width on the left 1/3rd of my page under my <div id=“maincontent”>. (880px)

I think I should reduce my nav width by about 10 or 12 pixels to add a few margins around my nav, correct?

What is the difference of the two?

As always, thanks much . . . Rick

It’s really difficult to answer without seeing a live page, or at least the full HTML/CSS. Without those, we’re really just guessing what’s going on.

margin-left:26.67%;

is setting a left margin of that size on some (here unspecified) item.

width:26.67%;

Is setting that width on another unspecified item, which may be designed to sit in that margin, or may have no connection - I can’t tell from what you’ve posted.

Float-left;

is not a proper declaration. Do you mean

{float:left;}

or is Float-left a class or id?