Hi everyone,
I'm currently working on gaining an understanding of HTML and CSS and having some trouble with understanding the behaviour of the code and could really use some "setting straight".
(Please bear with the Shocking colors as Im just using these as dummy colors to experiment as that way I can't help but see what happens with each change.)
My problems are:
1.) Why is the "Web page" occupying the full width of my browser when I have it set to 500px??
2.) Why is there empty space above my header? (Is it wise to have to come right out of the gate with negative margins on something like this just to correct it or is there something else wrong here?)
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Test page for testing html, css, php and JS examples">
<title>Test Page for Div Tutorials</title>
<style type="text/css">
body {background-color:#cccccc;}
h1 {font-family:Arial;background-color:transparent;border-bottom:1px solid #000;text-align:center; }+
P {text-align:justify;}
#pagewrapper {500px; border:3px ridge #000;margin:15px auto 15px auto;background-color:yellow;}
#header {background-color:blue;}
#LHColumn {background-color:green;height:350px; width:100px; float:left;margin:10px 20px 10px 5px;}
#MainContentColumn {background-color:#fff; width:200px; float:left;}
#footer {background-color:#000;clear:both;text-align:center;color:#fff;height:150px;}
</style>
</head>
<body>
<div id="pagewrapper">
<div id="header">
<h1>H1 Text Inside Header Div</h1>
</div> <!-- End header -->
<div id="LHColumn">
<ul style="list-style-type:circle;">
<li>Motocross</li>
<li>Off-Road</li>
<li>FMX</li>
</ul>
</div> <!-- End LH Column -->
<div id="MainContentColumn">
<p>jhlfjdfj hjk;dssfsf ikofjdfnkdkofn iodjfjdfjidfj siodfisidfj idfhdifih idfsdfjhsd sdiojfsdjof osdjfjo odfjodofsjo osdjfsdfo sodfjsde sofjs sdofjs sfojsd osjfsjof s fjswofsodj sodfjso jhlfjdfj hjk;dssfsf ikofjdfnkdkofn iodjfjdfjidfj siodfisidfj idfhdifih idfsdfjhsd sdiojfsdjof osdjfjo odfjodofsjo osdjfsdfo sodfjsde sofjs sdofjs sfojsd osjfsjof s fjswofsodj sodfjso jhlfjdfj hjk;dssfsf ikofjdfnkdkofn iodjfjdfjidfj siodfisidfj idfhdifih idfsdfjhsd sdiojfsdjof osdjfjo</p>
<p>jhlfjdfj hjk;dssfsf ikofjdfnkdkofn iodjfjdfjidfj siodfisidfj idfhdifih idfsdfjhsd sdiojfsdjof osdjfjo odfjodofsjo osdjfsdfo sodfjsde sofjs sdofjs sfojsd osjfsjof s fjswofsodj sodfjso jhlfjdfj hjk;dssfsf ikofjdfnkdkofn iodjfjdfjidfj siodfisidfj idfhdifih idfsdfjhsd sdiojfsdjof osdjfjo odfjodofsjo osdjfsdfo sodfjsde sofjs sdofjs sfojsd osjfsjof s fjswofsodj sodfjso jhlfjdfj hjk;dssfsf ikofjdfnkdkofn iodjfjdfjidfj siodfisidfj idfhdifih idfsdfjhsd sdiojfsdjof osdjfjo odfjodofsjo</p>
</div> <!-- End mainContentColumn -->
<div id="footer">
<p>Hihdjd jsddj jsdsjdsdsdd ujsbjb sd</p>
</div><!-- End footer -->
</div> <!-- End pagewrapper -->
</body>
</html>
If anyone could please comment on each of these points, I'd be most appreciative and I thank you all in advance,
Note: I had to edit this to remove the [code] tags otherwise all the css code was not visible
Stuart K
I'm learning CSS and HTML and Need...
Stuart Kaufman
Registered User
129 posts
david wilson
Ambassador
1,707 posts
I made a couple of changes here and got good results
#pagewrapper {padding:0; width:500px; border:3px ridge #000;margin:15px auto 15px auto;background-color:yellow;}
#header {margin-top:-15px; background-color:blue;}
#header {margin-top:-15px; background-color:blue;}
Volunteering to help 
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Stuart Kaufman
Registered User
129 posts
Hi David,
HUGE Thanks on that...
I guess not having a padding causes the layout to expand to the full browser's width so thanks for pointing that out!!
As far as the negative margin right out of the gate... I thought this would be a bad practice so I was avoiding doing this but I guess there's no harm in this as a <div> is considered a "block" element (I've been reading) and ANY block elements (h1, p, div) will place a line break before and after the element so that makes sense now that there's a space above the header (that's the br I now presume?.)
So I'm taking it that a neg margin is no big deal and it's not really like patching up something when it's really something else causing the issue (AKA "jerry riggin") so I'll be using negative margins where needed.
BTW, You've helped me in the past and deffinitley have this code figured out. There's just SOOO many variables and possibilities in CSS.
Thanks for your help David!!
HUGE Thanks on that...
I guess not having a padding causes the layout to expand to the full browser's width so thanks for pointing that out!!
As far as the negative margin right out of the gate... I thought this would be a bad practice so I was avoiding doing this but I guess there's no harm in this as a <div> is considered a "block" element (I've been reading) and ANY block elements (h1, p, div) will place a line break before and after the element so that makes sense now that there's a space above the header (that's the br I now presume?.)
So I'm taking it that a neg margin is no big deal and it's not really like patching up something when it's really something else causing the issue (AKA "jerry riggin") so I'll be using negative margins where needed.
BTW, You've helped me in the past and deffinitley have this code figured out. There's just SOOO many variables and possibilities in CSS.
Thanks for your help David!!
david wilson
Ambassador
1,707 posts
I wasn't just the padding, in your css you had 500px rather than width:500px. you got the 500 right, but you need to tell the browser where to apply it
glad I could help
glad I could help
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Simon Lampitt
Ambassador
163 posts
The difference between margin and padding is that margin applies to the "outside" spacing of an element compared to surrounding elements. Whilst, padding applies to the "inside" (content) contained within an element.
Rather than using the negative value in the #header id within the style, you could have set the margin (outer spacing) for the h1 tag to be 0px as below and this should achieve the same:
Although, bearing in mind, this would then apply the same style to ALL the h1 tags in your page (if you have more than one).
There are many examples of how this works if you want to know more, you can search for "css box model".
Rather than using the negative value in the #header id within the style, you could have set the margin (outer spacing) for the h1 tag to be 0px as below and this should achieve the same:
h1 {margin-top:0px;font-family:Arial;background-color:transparent;border-bottom:1px solid #000;text-align:center; }
Although, bearing in mind, this would then apply the same style to ALL the h1 tags in your page (if you have more than one).
There are many examples of how this works if you want to know more, you can search for "css box model".
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
