problems with 2 column CSS page

here_is_gone · Jun 7, 2006

I'm creating a two-column web page in CSS and I'm having a problem with the right column extending into the left column (image below).

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Your Title Here </title>

<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<link rel="stylesheet" type="text/css" href=".\bradyounglawcss.css">

</head>

<body>

<div id="maincontainer">

	<div id="header">
		<h1>Bradford M. Young</h1>
		<h2>Attorney At Law</h2>
	</div>

		<div id="navbar">
			<ul>
			<li><a href="home.htm">Home</a></li>
				<hr>
			<li><a href="aboutme.htm">About Me</a></li>
				<hr>
			<li><a href="fees.htm">Fees</a></li>
				<hr>
			<li><a href="areaspractice.htm">Areas of Practice</a></li
				<hr>
			<li><a href="resume.htm">Resume</a></li>
				<hr>
			<li><a href="attentionlawyers.htm">A Note For Other Lawyers</a></li>
				<hr>
			<li><a href="contact.htm">Contact Information</a></li>
				<hr>
			<li><a href="disclaimer.htm">Disclaimer</a></li>
				<hr>
			</ul>
		</div>
			<div id="textblock">
				<br>
				<center>
				<table width="200px" border="1">
					<tr>
						<td>
							<img src="file:///C:/Documents%20and%20Settings/Kyle%20Young/Desktop/sitepicture2.jpg" alt="sitepicture2.jpg" height="230" width="180"></center>
						</td>
					</tr>
				</table>






</div>

</body>
</html>

CSS

Code:

body {background-color: #D2EBFF; font-family: arial}

#maincontainer {width: 70%; height: 100%; margin-left: auto; margin-right: auto; background-color: #FFF}

#header {width: 100%; height: 20%; border-style: solid}

	#header h1 {text-align: center;}

	#header h2 {text-align: center; }

#navbar {width: 25%; height: 60%; background-color: #0095BF; float: left;}

#navbar ul li {text-align: left; color: #FFF; font-weight: bold; list-style-type: none}

#navbar hr {width: 75%; margin-right: 50%}

#navbar a {color: #FEE}

#navbar a:hover {background-color: #2D6912}

#textblock {width: 75%; height:  100%; background-color: #FFF; float: right}

#textblock table {background-color: #D2EBFF}

#textblock td {padding: 5px;}

Thanks!

root · Jun 8, 2006

Code:

#navbar {width: 25%; height: 60%; background-color: #0095BF; float: left;}

Code:

#navbar {width: 25%; height: [b]100%[/b]; background-color: #0095BF; float: left;}

it's not that the div extends past it's left margin, (it just can't do that).

it's that the menu only comes down 60% of the page.

here_is_gone · Jun 8, 2006

alright I changed to navbar height and it fixed it. Thanks! The page is up now at www.bradyounglaw.com. Unfortunately it looks pretty bad in Internet Explorer. I think I'm going to have a main page where you can choose if you want to view an IE version of the page or a Firefox version.

here_is_gone · Jun 8, 2006

Actually, I think that if instead of setting the #textblock div height to something over 100%, I could add a scroll bar to the textblock div and a footer. That would probably make it look decent in Internet Explorer. (If I set the textblock height to 100%, in some of the pages, the text goes beyond the div and outside of the #maincontainer. If I set the height to around 130% in those pages, it looks fine in Firefox, but when I view those pages in Internet Explorer, the textblock div extends way further than it should) Adding a scrollbar and a footer would be easier than redoing all the pages and having a different version for each browser, so if that's possible, how would I do it?

problems with 2 column CSS page

here_is_gone

In Runtime

root

Site Team

here_is_gone

In Runtime

here_is_gone

In Runtime

Similar threads