Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 06-07-2006, 05:53 PM   #1
In Runtime
 
Join Date: Sep 2005
Posts: 168
Default problems with 2 column CSS page

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!
__________________

__________________
www.bradyounglaw.com
here_is_gone is offline   Reply With Quote
Old 06-08-2006, 07:16 AM   #2
Site Team
 
root's Avatar
 
Join Date: Mar 2004
Posts: 8,003
Default Re: problems with 2 column CSS page

Code:
#navbar {width: 25%; height: 60%; background-color: #0095BF; float: left;}
Code:
#navbar {width: 25%; height: 100%; 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.
__________________

__________________
I didn’t fight my way to the top of the food chain to be a vegetarian…
Im sick of people saying 'dont waste paper'. If trees wanted to live, they'd all carry guns.
"The inherent vice of capitalism is the unequal sharing of blessings; The inherent vice of socialism is the equal sharing of miseries."
root is offline   Reply With Quote
Old 06-08-2006, 12:12 PM   #3
In Runtime
 
Join Date: Sep 2005
Posts: 168
Default Re: problems with 2 column CSS page

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.
__________________
www.bradyounglaw.com
here_is_gone is offline   Reply With Quote
Old 06-08-2006, 01:55 PM   #4
In Runtime
 
Join Date: Sep 2005
Posts: 168
Default Re: problems with 2 column CSS page

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?
__________________
www.bradyounglaw.com
here_is_gone is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 11:54 PM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0