Trying to understand Floating / Positioning - Example given

HTML & CSS
1

Hi all,

Im trying to learn, more so get a good solid understanding of how floating / positioning elements with CSS can be achieved.

I do already have some basic knowledge but getting my head around block/inline level elements and parent/child relationships is becoming somewhat a nightmare! :eek:

Please have a look at a very basic test page Ive knocked up to try and get to grips with the CSS. With this particular example, Im trying to set the #container <div> element set within the background colours - All background colours have been set at the same height as the containing div elements ( header / navigation / content and footer ).
I know I can quite easily put margin-top:-1005px; under the #container selector but this is bad practise, and would like to position it hopefully using floats or positioning styling…

I glady await to hear off anybody with expertise in this area, and would be absolutley thrilled if anyone could lend a hand, and more so explain there theories to me - “More knowledge = More Brain food”

I will put the HTML on first followed by the CSS coding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Learning CSS</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<div id="backgroundheader">
</div>
<div id="backgroundnavigation">
</div>
<div id="backgroundcontent">
</div>
<div id="backgroundfooter">
</div>

<div id="container">

<div id="header">
</div><!--header-->

<div id="navigation">
</div><!--navigation-->

<div id="content">
</div><!--content-->

<div id="footer">
</div><!--footer-->

</div> <!-- Container -->

</body>
</html>

/RESET STARTS HERE/

html, body{
margin: 0;
padding: 0; }

/*RESET ENDS HERE*/

#backgroundheader{
background:#0000ff;
width:100%;
height:100px;
border:1px solid black; }

#backgroundnavigation{
background:#eee;
width:100%;
height:50px;
border:1px solid black; }

#backgroundcontent{
background:#3366ff;
width:100%;
height:800px;
border:1px solid black; }

#backgroundfooter{
background:#eee;
width:100%;
height:50px;
border:1px solid black; }

#container{
border:1px solid black;
width:900px;
height:1005px;
margin:auto; }

#header{
width:900px;
height:100px;
border:1px solid black; }

#navigation{
width:900px;
height:50px;
border:1px solid black; }

#content{
width:900px;
height:800px;
border:1px solid black; }

#footer{
width:900px;
height:50px;
border:1px solid black; }

Thanks once again & I :shifty: forward to hearing from anyone.

Benisjamin

2

Hi benisjamin! Welcome to SitePoint. :slight_smile:

Here’s basically how I would go about this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning CSS</title>

<style>
html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {margin: 0;padding: 0;}
img {border: 0;vertical-align: bottom;}

#header-outer, #content-outer, #nav-outer, #footer-outer {min-width: 900px;}
#header-outer {background:#0000ff;}
#content-outer {background:#3366ff;}
#nav-outer {background:#eee;}
#footer-outer {background:#eee;}

#header, #content, #navigation, #footer {width: 900px; margin:0 auto; border:solid #ccc; border-width: 0 1px;}
#header{height:100px;}
#navigation{height:50px;}
#content{height:800px;}
#footer{height:50px;}
</style>
</head>

<body>
<div id="header-outer">
	<div id="header">
	</div><!--header-->
</div>
<div id="nav-outer">
	<div id="navigation">
	</div><!--navigation-->
</div>
<div id="content-outer">
	<div id="content">
	</div><!--content-->
</div>
<div id="footer-outer">
	<div id="footer">
	</div><!--footer-->
</div>
</body>
</html>

I don’t think much explanation is needed here. Basically, the bands of color are provided by 100% wide divs, each of which contains a centered inner div of width 900px. Quite simple, but quite robust, and is normally how a design of this type would be coded.

Of course, once the content is in, remove the heights on those divs … or at least the Content div. Let the actual content dictate its height.

Also, instead of a “navigation” div, you’d be better off using just an UL instead. No need for that div, but I left it there for demo porpoises.

3

Hey there Ralph,

Thanks for replying back with your idea, thats great.

Im intrigued to find out the reason why you have chosen to use an embedded style and not an external style sheet ? The reason I say this, is because from reading articles online and watching video tutorials (maxdesign.com an Ozzy neighbour of yours :slight_smile: ) states not to use embedded or inline but only Eternal style sheets.

Look forward to hearing from you

p.s Are you in full-time work @ the mo, and if so whats the current job market like in Oz as a whole for junior web designer roles ? ( Im looking to emigrate from the UK within 3 years hopefully… )

BenISjamin

4

you may have gotten confused by seeing the <style></style> tag in use. There is nothing wrong with that for posting examples here or for development purposes. I generally style a page … and once am marginally happy with the CSS export it and link it back to the site ( removing the old style tags of course.

For thsi forum, I find it far easier to test their code if they put the whole markup and CSS as one (that way is one single copy paste into a text editor and test). but thats just for this site and that extra step is no harm for testing, but is is an extra step. ==:P

BTW
<style> tags do have a purpose; when you want to override your external CSS for a specific page CSS in a <style> tag in that page takes precedence over the rules imported via link.

5

As dresden_phoenix said, it’s for testing purposes. It’s much more convenient to test code—especially from here—when you can just copy one lot of code and paste it into a .html file. I don’t do that on live sites.

Are you in full-time work @ the mo, and if so whats the current job market like in Oz as a whole for junior web designer roles ?

I do freelance stuff, and don’t have a good feel of the market, but the economy here is quite strong, having avoided the worst of the GFC.

6

Hey Ralph & Dresdon,

Appreciate your comments and have taken them onboard for future creative projects.

I must say this site is very helpful and I`ll definately be recommending it to people I know who are also currently trying to enter the web design world.

Cheers once again

Benjamin / Benisjamin