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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - very basics :/ 1

Status
Not open for further replies.
youradds

youradds

Programmer
Jun 27, 2001
817
GB
Hi,

I've got a problem with this CSS/HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL] 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Star Gazer</title>

<style>

#wrapper {
	 margin: 0 auto;
	 padding: 0px;
	 width: 750px; 
}

#header {
	 float: center;
	 margin: 0 auto;
	 padding: 0px 20px 0px 0px;
	 width: 750px; 
	 background: purple;
}

#content {
	 float: center;
	 margin: 0 auto;
	 padding: 0px 0px 0px 0px;
	 width: 750px; 
	 	background: blue;
}

#content {
	 float: left;
	 margin: 0 auto;
	 padding: 0px 0px 0px 0px;
	 width: 750px; 
	 background: orange;
}

#footer {
	clear: both;
	position: absolute;
	bottom: 0 !important;
	bottom: -1px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: red;
}

#sidebar {
	float: left;
	width: 200px;	
	background: green;
}


</style>
</head>

<body>

<div id="wrapper">

	<!-- Start Header -->
	<div id="header">
		main header
	</div>
	<!-- end header -->

	<!-- Main Content -->
	<div id="content">
	
		<!-- Start SideBar -->
			<div id="sidebar">
				main sidebar
			</div>
		<!-- END SideBar -->
	
		main content nbla

	</div>
	<!-- END Main Content -->


	<!-- Start Footer -->
		<div id="footer">
		the footer	
		</div>
	<!-- END Footer -->


</div> <!-- end wrapper -->

</body>

</html>

1) the "main content nbla" bit doesn't seem to be going wide enough (there is about a 20px gap)

2) the footer doesn't seem to wanna play ball :( In IE 7, it shows all the way to the right (and causes the whole thing to scroll over) - and in FF 3, it shows at the bottom kinda ok - but it seem to go far too wide :/

Can anyone explain to me why this is happening? I'm trying to learn CSS, but seems I've stumbled quite early on :( (just brough a good book, but don't think I'm quite far enough along to work out whats going on here <G>)

TIA!

Andy
 
Sort by date Sort by votes
Looks like
Code: 
#header {
     float: center;
     margin: 0 auto;
     padding: 0px [b]20px[/b] 0px 0px;
     width: 750px; 
     background: purple;
causes your problem. Change it to padding: 0px 0px 0px 0px; and that solves it.

Also there is no float:center value.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
I don't know what float center and margin 0 and margin auto is doing for you. That 20 px of padding on the header is your gap. 2 content styles one blue one orange aren't really needed. I don't really like the sidebar div inside the content div but ok whatever.

See what this does for you:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL] 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Star Gazer</title>

<style>

#wrapper {
margin: auto;
padding: 0px;
width: 750px; 
}

#header {
margin: auto;
padding: 0px
width: 750px; 
background: purple;
}

#content {
margin: auto;
padding: 0px 0px 0px 0px;
width: 750px; 
background: blue;
}


#footer {
clear: both;
position: absolute;
bottom: 0 !important;
bottom: -1px;
width: 100%;
margin: 0;
padding: 0;
background: red;
}

#sidebar {
float: right;
width: 200px; 
background: green;
}


</style>
</head>

<body>

<div id="wrapper">

<!-- Start Header -->
<div id="header">
main header
</div>
<!-- end header -->

<!-- Main Content -->
<div id="content">

<!-- Start SideBar -->
<div id="sidebar">
<p>main sidebar</p>
<p>main sidebar</p>
<p>main sidebar</p>
<p>main sidebar</p>
<p>main sidebar</p>
</div>
<!-- END SideBar -->

<p>main content nbla</p>
<p>main content nbla</p>
<p>main content nbla</p>
<p>main content nbla</p>
<p>main content nbla</p>
<p>main content nbla</p>
<p>main content nbla</p>
</div>
<!-- END Main Content -->



<!-- Start Footer -->
<div id="footer">
the footer 
</div>
<!-- END Footer -->


</div> <!-- end wrapper -->

</body>

</html>
 
Upvote 0 Downvote
Hi BigRed,

That 20 px of padding on the header is your gap.
Click to expand...

Yeah, I've removed that now :)

2 content styles one blue one orange aren't really needed.
Click to expand...

The colors are just so I can see the areas the divs are taking up :)

The orange is gonna be for the main content - and the blue one is just for the "wrapper", which shouldn't get shown, as the other stuff should take up the whole of the "wrapper" section :)


I don't really like the sidebar div inside the content div but ok whatever.
Click to expand...

Yeah, thats a bit of a weird one. If I don't have it inside the "content" div, then it doesn't work right.

The example you gave doesn't work at all for me (the content is all over the place =))

TIA

Andy
 
Upvote 0 Downvote
Ok, I've given up on trying to show the div at the very bottom of the page (too many issues, with IE 5 and 6).

Now - I have:


However, the main content in:

Code: 
	  <div class="main_content">
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
		main content nbla <br />
      </div>

...isn't working right (its going underneath the menu)

How would I go about fixing that up? I've tried putting it in a different "div", but that doesn't seem to have done any good :(

TIA

Andy
 
Upvote 0 Downvote
youradds said:
All of its looking good now, appart from the footer still
Click to expand...
It looks ok in IE6.

You will have major problems with this layout if your data fills your main content. (in IE6, the footer disappears)
I try to avoid absolute positioning wherever possible. What about something like:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL] 
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Star Gazer</title>

[blue]<style type="text/css">[/blue]

#wrapper {
	 margin: 0 auto;
	 padding: 0px;
	 width: 750px; 
}

#header {
	 margin: 0 auto;
	 padding: 0px 0px 0px 0px;
	 width: 750px; 
	 background: purple;
}


#content {
	 float: right;
	 margin: 0;
	 padding: 0;
	 width: 550px; 
	 background: orange;
}

#sidebar {
	float: left;
	margin: 0;
	width: 200px;	
	background: green;
}
#footer {
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
	background: red;
}



</style>
</head>

<body>

<div id="wrapper">

	<!-- Start Header -->
	<div id="header">
		main header
	</div>
	<!-- end header -->

	<!-- Main Content -->
	<div id="content">
	

	
<p>main content nbla</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque non dui et orci aliquet accumsan. Nam vel augue vulputate pede mattis aliquam. In aliquam rhoncus velit. Ut volutpat sodales nisl. Ut nisl. Donec commodo justo vel tellus. Donec adipiscing justo ac quam. Suspendisse ante. Donec at ligula. Suspendisse fringilla diam non metus. Cras diam nibh, pretium eu, rutrum vitae, hendrerit ut, pede. Ut sodales, massa nec euismod euismod, dolor nunc elementum magna, id rutrum mi sem sed turpis. Suspendisse potenti. Nullam faucibus nunc sed lectus.
</p>
<p>
Praesent non odio. Morbi porta, sem nec gravida ullamcorper, ligula nisl rutrum ipsum, sed pretium nulla erat sit amet felis. Nullam hendrerit, urna sagittis luctus pellentesque, nisl nunc tempus mi, non luctus orci ipsum non est. Nullam eu mi. Donec feugiat ante. Aliquam condimentum enim quis justo. Aenean nibh ligula, vehicula sed, bibendum at, condimentum a, ante. Fusce placerat metus eget mauris. Fusce eu pede at dui interdum volutpat. Aliquam sem purus, lacinia in, bibendum eu, suscipit faucibus, eros. Quisque tellus elit, varius scelerisque, vulputate ultricies, feugiat facilisis, purus.
</p>
<p>
In eget elit id nulla dapibus ultrices. Nullam arcu nibh, laoreet lacinia, tincidunt quis, interdum at, eros. Sed sit amet purus in nisi euismod gravida. Maecenas a justo in velit fringilla tincidunt. Cras tortor. Morbi eget sapien. Sed magna. Nulla facilisi. Maecenas dui odio, aliquam eget, pretium pharetra, venenatis vitae, nibh. Morbi vestibulum massa. Sed non turpis non erat dapibus tincidunt. Donec a dolor. Duis posuere ipsum non mauris. Pellentesque viverra. Curabitur sed nisi ac risus consectetuer laoreet. Pellentesque sagittis quam a diam. Nulla facilisi. Nulla in odio in nisl imperdiet feugiat.
</p>

	</div>
	<!-- END Main Content -->

		<!-- Start SideBar -->
			<div id="sidebar">
				main sidebar
			</div>
		<!-- END SideBar -->
	<!-- Start Footer -->
		<div id="footer">
		the footer	
		</div>
	<!-- END Footer -->


</div> <!-- end wrapper -->

</body>

</html>
I moved the sidebar outside of the content and floated the content right and the sidebar left. I also removed the absolute positioning from the footer. (and added type="text/css" to your style declaration)

This is just one of many ways to do this. Search on faux columns if you really need to extend the sidebar background color.

If you want the content to actually float around the sidebar, move the sidebar back above (and outside)the content and adjust the floats (left) and widths again.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
735
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
589
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
625
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top