Member Avatar for bibiki

hey there,
I havbe the following html and css files:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
	<link rel=StyleSheet href="style.css" type="text/css">
	<title>My site</title>
</head>

<body>

	<div id="con">
		<div id="navigation">
			<ul>
				<li><a href="http://gagi.zxq.net/star.html">About me</a></li>
				<li><a href="http://gagi.zxq.net/ekes.html">Blog</a></li>
				<li><a href="http://gagi.zxq.net/mbretereshat.html">Links</a></li>
				<li><a href="http://gagi.zxq.net/bouncingball.html">News</a></li>
			</ul>
		</div>

		<hr>


		<div id="main">
			<h1>This is a sample article</h1>

				<p> Just some stuff to help me in building my first page.
					I intend to have a nice site, and I will have it. Just some stuff to help me in building my first page.
					I intend to have a nice site, and I will have it.
		</div>

		<div id="right">
			<p> Just some stuff to help me in building my first page.
					I intend to have a nice site, and I will have it.
		</div>

		<hr>





		<div id="foot">	
			<p>Running since 2011Running since 2011Running since 2011Running since 2011Running since 2011Running since 2011Running since 2011Running since 2011Running since 2011</p>
		</div>

	</div>

</body>


</html>

and my css file is:

#navigation{
	font-size: 100%;
	width: 800px;
}

#navigation ul {
	list-style: none;
	margin: auto;
	padding: 0;
	padding-top: 0;
}

#navigation li {
	margin-top: 0.0em;
	margin-bottom: 0.0em;
	display: inline;

}

#navigation a:link, #navigation a:visited {
	margin-right: 0.2em;
	padding: 0.0em 0.6em 0.0em 0.6em;
	color: #A62020;
	background-color: #FCE6EA;
	text-decoration: none;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #717171;
	border-right: 1px solid #717171;
}

#navigation a:hover {
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #717171;
	border-right: 1px solid #717171;
}

#con {
	width: 800px;
}

#main {
	width: 80%;
	float: left;
	background-color: #FAEFEF;
}

#right {
	width: 20%;
	float: right;
	background-color: #eeeee1;
}

#foot {
	float: left;
}

the problem is that only the first horizontal rule appears on my browser. the <hr> between my 'right' and 'foot' divs won't appeat. anyone, please?

  • 2 Contributors
  • 1 Reply
  • 225 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by twiss

Dani AI

Generated

Floated columns are the reason the second horizontal rule doesn't sit where expected. In the posted layout has #main floated left and #right floated right, so the following <hr> is flowing alongside those floats instead of clearing them. 's suggestion to clear the floats is correct; below are practical fixes, alternatives, and debugging notes.

A minimal stylesheet fix that keeps markup unchanged:

/* force the hr below both floated columns */
hr {
  clear: both;
  display: block;
  margin: 1em 0;
  border: none;
  border-top: 1px solid #ccc;
}

If the goal is to contain floats so the parent expands (rather than individually clearing every hr), apply a clearfix or establish a block-formatting context on the container:

/* modern clearfix on the container */
#con::after {
  content: "";
  display: table;
  clear: both;
}

/* or, as an alternative, make the container contain floats */
#con { overflow: auto; } /* beware: may create scrollbars if content overflows */

Quick diagnostics: inspect the <hr> with developer tools to see computed width/height and any reset rules that might set border: none or height: 0. Temporarily give the hr a bright background and height to locate it visually. Also note the document uses an XHTML 1.0 Strict doctype, so empty elements should be written as <hr /> for validity (browsers are tolerant, but validity helps catch markup issues). Finally, when combining percentage widths (80% + 20%) inside a fixed-width parent, allow a tiny tolerance (or use pixel widths / box-sizing) to avoid rounding/layout surprises.

Member Avatar for twiss

It does appear, to the right below #right. To place it below #main, give it a clear:both style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.