3 replies [Last post]
frederickrl
frederickrl's picture
Offline
newbie
Last seen: 4 years 32 weeks ago
Timezone: GMT-5
Joined: 2015-02-10
Posts: 3
Points: 5

Hello i need some help with my css document. I really love css but im having trouble with it. I looked everywhere in the internet and didnt found nothing

html

__________________________________________________________________________

<!DOCTYPE html>
 
<html>
 
	<head>
		<title>Home</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
 
 
	<body>
 
 
		<div id="wrapper">
 
 
		<header>
			<p>Home</p>
 
		</header>
 
 
		<nav>
			<ul>
 
				<li>Home</li>
				<li>Downloads</li>
				<li>Contact Us</li>
				<li>About</li>
		</nav>
 
 
		<div id="content">
		<h2>Welcome</h2>
		<p>Welcome to page, this is only a practice website which means it is not going to be published. If you can see this content which is in the content div it means it worked.</p>
		</div>
 
		</div>
</html>

----------------------------------------------------------

css

-----------------------------------------------------------

#wrapper {
width: 800px;
min-height: 600px;
background: #bbb;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
 
}
header {
margin: auto;
background-color: yellow;
font-size: 20px;
text-align: center;
width: 70%;
margin: 25px 50px 0px;
 
}

------------------------------------------------------

thanks for your help

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Not tested

You're probably experiencing margin-collapse. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing.

Simple fix;

#wrapper {
  width: 800px;
  min-height: 600px;
  background: #bbb;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  overflow: auto;  /*add this property declaration*/
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

frederickrl
frederickrl's picture
Offline
newbie
Last seen: 4 years 32 weeks ago
Timezone: GMT-5
Joined: 2015-02-10
Posts: 3
Points: 5

Thanks for the help, but

Smile hey thanks for the help but i dont really know what the overflow does can you explain it better

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

New block formatting context

Overflow's default value is 'visible', that is its content is allowed to flow beyond its box. When overflow is set to another value, e.g. hidden, auto or scroll, the content is contained; including the content's margins.

The overflow property generally has fewer unintended consequences compared to using padding1, float or the display property with values of table or inline-block.

Block formatting context is complex, to say the least. Use Google to find explanatory articles. Favor those from the Mozilla Developer Network (MDN) and W3C (not W3 school; it is a separate site and has a history of errors and examples of poor practices).

cheers,

gary

1. Padding and border do not set a new block formatting context, as do the other properties, but they do corral the margin-collapse.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.