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
Joined
Nov 23, 2004
Messages
172
Location
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
For now I just need the divs to work
Click to expand...
What do you mean you need them to "work"?


____________________________________________________________

Need help finding an answer?

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

 
Upvote 0 Downvote
to align in the right place.

it should be

--------header----------
Navigation|Content------
Navigation|Content------
Navigation|Content------
Navigation|Content------
Navigation|Content------

like that
 
Upvote 0 Downvote
Take out the [red]float: right;[/red] on the content div and it should work.

----------------------------------
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
Tahnk you veyry much that has fixed it
 
Upvote 0 Downvote
Try removing the "margin-left: 165px;" from your content...


____________________________________________________________

Need help finding an answer?

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

 
Upvote 0 Downvote
You're welcome.

----------------------------------
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
cas8msm that didn't work it hides part of it.
 
Upvote 0 Downvote
That's not strictly true - it floats perfectly to the right of it in FireFox (not in IE though)...


____________________________________________________________

Need help finding an answer?

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

 
Upvote 0 Downvote
ok guys I have run into another error and need some help.

I ahve added 2 things for my footer

CSS

div#footer
{
background-color: white;
width: 800px;
height: 200px;
padding: 0px;
}

code
Code: 
<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">
			
		</div>
<!-- End Navigation -->
<!-- Body Content -->
		<div id="content">
			Hello world
		</div>
[COLOR=red]<!-- Footer -->
		<div id="footer">
			
		</div>
<!-- end Footer -->
[/color]
<!-- End Body -->
	</div>
 
Upvote 0 Downvote
ok guys I have run into another error and need some help.
Click to expand...
And would you like to tell us what this error is?


____________________________________________________________

Need help finding an answer?

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

 
Upvote 0 Downvote
You really need to tell us what is wrong with the footer.

Anyway:
Check your heights, your containers height is not big enough
to accomodate everything.

:
Wrapper height=825


header height=219
nav and content height=606

that is 209+606=825px, thats all you wrapper can handle. either make your wrapper bigger, or add an [fuchsia]overflow:scroll[/fuchsia] to it to see the rest of the footer.

----------------------------------
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
sorry I forgot I chabged the CSS here it is.

Code: 
/*
Updated:	1/24/05
Created:	1/24/05
*/
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;
}

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

div#content
{
	width: 635px;
	height: 500px;
	background-color: fuchsia;
	padding: 0px;
	margin-left: 165px;
}
div#footer
{
	background-color: white;
	width: 800px;
	height: 200px;
	padding: 0px;
}
 
Upvote 0 Downvote


[red]So what is the problem with the footer? [/red]
Is it not visible?
Is it overlapping something???
exactly what is the problem?

----------------------------------
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
I can see it at the bottom of the page...


____________________________________________________________

Need help finding an answer?

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

 
Upvote 0 Downvote
I can see it to, remember its White. add some text to it so you can see it. Or change the color or add a border.

----------------------------------
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
ok that works.

Now it isn't working in IE on the PC. But it works in FF on Both Win and MAC. Any Ideas.

The Problem is as follows:

The site is jumbled like before. The fuscia is under the black and on the right. thanks again
 
Upvote 0 Downvote
Give it a specific position such as
Code: 
top: 0px;

Maybe that will work.

----------------------------------
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
I meant the content div, give it a top position of 0

----------------------------------
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 Question
Achieving this grid layout in css
Replies
1
Views
424
tyutghf
tyutghf
Carlvic
  • Locked
  • Question Question
How can i make layout 2 columns
Replies
3
Views
454
Carlvic
Carlvic
dvannoy
  • Locked
  • Question Question
Simple Layout
Replies
3
Views
441
vacunita
vacunita
Katerine
  • Locked
  • Question Question
CSS question: Displaying 2-level unordered lists in a table layout?
Replies
7
Views
541
Katerine
Katerine
c0deM0nK424
  • Locked
  • Question Question
Parent Div, with a less wide Child Div which contains 2 child Div inside - Responsive Layout ?
Replies
3
Views
396
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top