Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Layout Problems 2 colums 1

Status
Not open for further replies.
dagger2002

dagger2002

Programmer
Nov 23, 2004
172
US
Guys I need help. I am a newbie to CSS and have a strong html background. I have supplied my code below. my problem is simple, I think. I have a header, navigation, and content areas. For now I just need the divs to work then I will add content. i have also included a color legend for the divs.

legend
wrapper: Main Table is aqua
navigation is black
content area is fuscia.

Here is the page
Code: 
<link rel="stylesheet" rev="stylesheet" type="text/css" href="soe06.css" />
</head>
<body>

	<div id="wrapper">
		<div id="header">
		</div>
		
<!-- Main Navigation -->
		<div id="mainNav">
			
		</div>
<!-- End Navigation -->
<!-- Body Content -->
		<div id="content">
			Hello world
		</div>
<!-- End Body -->
	</div>

</body>
here is the css on the site it is in a seperate file.

Code: 
div#wrapper
{
	border: 0;
	padding: 0;
	width: 800px;
	height: 825px;
	background-color: aqua;
	vertical-align: top;
}

div#header
{
	width: 800px;
	height: 219px;
	padding: 0px;
}

div#mainNav
{
	background-color: black;
	width: 165px;
	height: 606px;
	border: 0px;
	padding: 0px;
	float: left;
}

div#content
{
	width: 635px;
	height: 606px;
	background-color: fuchsia;
	padding: 0px;
	margin-left: 165px;
	float: right;
}

Thanks alot
 
Sort by date Sort by votes
Well i'm stumped, all I can say s this works exactly as it is supposed to in IE and Firefox for windows:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Divs</title>
<style>
body
{
    background-color: gray;
    margin: 0px;
    scrollbar-face-color:#000066;
    scrollbar-base-color:#F3F3F3;
    scrollbar-arrow-color:white;
    scrollbar-track-color:#3366CC;
    scrollbar-shadow-color:#EBF5FF;
    scrollbar-highlight-color:#EBF5FF;
    scrollbar-3dlight-color:#78AAFF;
    scrollbar-darkshadow-Color:#78AAFF;
}

div#wrapper
{
    border: 0;
    padding: 0;
    width: 800px;
    height: 900px;
    background-color: aqua;
    vertical-align: top;
}

div#header
{
    width: 800px;
    height: 200px;
    padding: 0px;
    overflow:scroll;
}

div#mainNav
{
    background-color: black;
    width: 165px;
    height: 500px;
    border: 0px;
    padding: 0px;
    float: left;
    overflow:scroll;
}

div#content
{
    top:0px
   
    width: 635px;
    height: 500px;
    background-color: fuchsia;
    padding: 0px;

    overflow:scroll;
}
div#footer
{
    background-color: white;
    width: 800px;
    height: 200px;
    padding: 0px;
    overflow:scroll;
}
</style>
</head>
<body>
<center>
    <div id="wrapper">
        <div id="header">
        Hello
        </div>

<!-- Main Navigation -->
        <div id="mainNav">
navigation
        </div>
<!-- End Navigation -->
<!-- Body Content -->
        <div id="content">
            Hello world
        </div>
         <div id="footer">
Footer
        </div>
<!-- End Body -->
    </div>
</center>
</body>
</html>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Doctype must be the first thing of your html document, not somewhere in the head. Doctype in the head has no value. Show us your code in its entirety.
 
Upvote 0 Downvote
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>HEAD Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" rev="stylesheet" type="text/css" href="soe06.css" />
</head>
<body>
<center>
<div id="wrapper">
<div id="header">
<img src="images/index_01.gif" width="800" height="200" alt="" hspace="0" vspace="0" border="0">
</div>

<!-- Main Navigation -->
<div id="mainNav">
<img src="images/buttoOff_04.gif" width="162" height="75" alt="">
<img src="images/spacer.gif" width="162" height="10" alt="">
<img src="images/buttoOff_06.gif" width="162" height="75" alt="">
<img src="images/spacer.gif" width="162" height="10" alt="">
<img src="images/buttoOff_08.gif" width="162" height="75" alt="">
<img src="images/spacer.gif" width="162" height="10" alt="">
<img src="images/buttoOff_10.gif" width="162" height="75" alt="">
<img src="images/spacer.gif" width="162" height="10" alt="">

</div>
<!-- End Navigation -->
<!-- Body Content -->
<div id="content">
<img src="images/spacer.gif" width="5" height="350" alt="" hspace="0" vspace="0" border="0" align="left">
<iframe width="625" height="350" src="speech.htm" marginheight="0" marginwidth="0" scrolling="auto" noresize frameborder="no"></iframe>
</div>
<!-- Footer -->
<div id="footer">
<img src="images/index_13.gif" width="628" height="199" alt="" hspace="0" vspace="0" border="0" align="right">
</div>
<!-- end Footer -->
<!-- End Body -->
</div>
</center>
</body>
</html>
 
Upvote 0 Downvote
Ok, seems like you have trouble following simple suggestions. Let's try again. Pick out one of the doctypes in this page: To make it easier, I suggest you take this one:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
Next, place it in your code and make it the first thing in your code. Yes, first thing means before <html> element. No whitespace, no comments, no nothing before doctype, ok?
 
Upvote 0 Downvote
You asked for my code so i gave it to you b4 i fixed it. I already have a fixed set of tags ty
 
Upvote 0 Downvote
You asked for my code so i gave it to you b4 i fixed it
Click to expand...
That's fairly pointless isn't it? Vragabond said "Doctype must be the first thing of your html document" so there's no point posting code that is simply wrong and not the current version you are working on...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 
Upvote 0 Downvote
Ok, now that we are starting from scratch, should we remove the deprecated <center> tags and spacer gifs? With CSS there are much better methods to do those things.

So, why don't you do all that and then post a link to your site as it looks after all the changes. Or failing that, post all your code here (css and html).
 
Upvote 0 Downvote
Sorry, it took me so long to answer,
The center tags are my mistake not Dagger2002's, I was just testing out something and forgot to remove them.

Other than that, the code is everything you posted, but i put the CSS in the same file.

By the way I gave them all overflow:scroll so I know exactly where they are. It helps determine if somethng is actually overlapping something else or not.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
211
tyutghf
tyutghf
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
158
Carlvic
Carlvic
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
157
vacunita
vacunita
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
219
Katerine
Katerine
c0deM0nK424
  • Locked
  • Question
Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ? 2
Replies
3
Views
137
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top