css - How do margins work with div positioning? -


#content As you can see below, there is a top margin of 280px, because This is the height of the header image of the site, which is placed in the background (image / sky 1.jpg).

How do I place a div in the form of holder above the 'margin' of a

#content div so that I can change my # navigation , # Title headers divs up from image?

Only the # top-float div was above the #content div, but every time I add

Lt; Tried to put the div id = "top-float" and

above

and
is in html How should this keep me in this situation?

  html {background: # 73ADD7 url (images / gradient.gif) repeat-x;} body {padding: 0; Margin: 0; Background: URL (images / sky 1.jpg) no-repeat center top; Color: # 666; Width: 100%; Display: table;} #top-float {padding-left: 2.3am; Padding-right: 2.3 AM; Height: 10 AM;} # Material {Width: 890px; Margin: 280 px auto 0; Background: #FFF; Border: solid 0 px # ccc; Padding: 0px;} #fther {width: 890px; Margin: PX Auto 0; Background: URL (Picture / Pastor-BG.JPG) No-duplication center #FFF below; Border: Solid 0px #ccc; Height: 250px; }  

The easiest way to get your # top-float < As> code> 280px height and topcontent for #content as:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; Html {background: # 73ADD7 url (portrait / gradient.gif) repeat-x; Body {padding: 0; Margin: 0; Background: URL (images / sky 1.jpg) no-double center top; Color: # 666; Width: 100%; Display: Table; } #top-float {margin: 0; Padding: 0 2.3 AM; Height: 280px; } # Content {width: 890px; Margin: 0 auto; Background: #fff; Border: Solid 0px #ccc; Padding: 0 pixels; } #footer {width: 890px; Margin: 0 auto; Background: URL (Picture / Pastor-BG.JPG) No-duplication center #FFF below; Border: Solid 0px #ccc; Height: 250px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "#top-float" & gt; & Lt; / Div & gt; & Lt; Div id = "# content" & gt; & Lt; / Div & gt; & Lt; Div id = "# footer" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

If you need the size of the em , then give it to the children shaping #top-float , and #top-float overflow: hidden;

If you want your content to appear above your markup for SEO purposes, then you can do the following:

  & lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; Html {background: # 73ADD7 url (portrait / gradient.gif) repeat-x; Body {padding: 0; Margin: 0; Background: URL (images / sky 1.jpg) no-double center top; Color: # 666; Width: 100%; Display: Table; } #top-float {location: full; Top: 0; Left: 0; Padding: 0 2.3 AM; Height: 280px; } # Content {width: 890px; Margin: 280 pixels auto 0; Background: #fff; Border: Solid 0px #ccc; Padding: 0 pixels; } #footer {width: 890px; Margin: 0 auto; Background: URL (Picture / Pastor-BG.JPG) No-duplication center #FFF below; Border: Solid 0px #ccc; Height: 250px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "# content" & gt; & Lt; / Div & gt; & Lt; Div id = "# footer" & gt; & Lt; / Div & gt; & Lt; Div id = "#top-float" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Comments

Popular posts from this blog

c# - ListView onScroll event -

PHP - get image from byte array -

Linux Terminal Problem with Non-Canonical Terminal I/O app -