CSS alignment issue [Archive]

spicypixel

04-22-2007, 04:48 AM

Hello, I'm extremely new to CSS and can't figure out how to sort out the alignment of my elements.

The code involved is here:
#leftcol {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-size: 14px;
line-height: 17px;
font-family: Trebuchet MS, sans-serif, Arial, Helvetica;
}

#leftcol a {
display:block;
padding: 1px;
margin-left:10px;
width:160px;
background-color: #FFF;
border-bottom: 1px solid #DDF;
}
#leftcol a:link, #leftcol a:visited {
color: #369;
text-decoration: none;
}
#leftcol a:hover {
background-color: #369;
color: #fff;
}

#content {
padding:1em;
font-size:small;
margin-left: 200px;
}

#content h2 {
margin-top:0pt;
font-size:medium;
font-style:italic;
}

Screenshot is attached to show where id prefer content to be.

In summery the content is being shown under the navbar and all the links in #signpost should be inline, not carriaged returned.

Thanks in advance.

twodayslate

04-22-2007, 04:50 AM

It looks like a float issue but we need the rest of your code.
How to properly float/clear a div can be found here.
http://www.quirksmode.org/css/clearing.html

spicypixel

04-22-2007, 04:57 AM

Ok thankyou. more code here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CMP1017 Web Assignment</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="banner">
<h1>Pork</h1>
</div>

<div id="signpost">
<h3>/ <a href="index.shtml">home</a> / Bacon </h3>
<p class="nextbutton"><a href="JavaScript:history.back()">< Back</a>
<a href="index.shtml">Up Level</a>
</p>
</div>

<div id="leftcol">

</div>

<div id="content">
<h2>Bacon</h2>
<p>Wikipedia:</p>
<p></p>Bacon is defined as any of certain cuts of meat taken from the sides, back or belly of a pig that is cured and possibly smoked. Meat from other animals may also be cured or otherwise prepared to resemble bacon, such as chicken or turkey bacon.</p>
<p><img src="images/bacon.jpg" alt="bacon"></p>
</div>

<div id="footer">

</div>
</div>
</body>
</html>

The CSS is attached.

The URL is http://cpanel.lincoln.ac.uk/dci084/bacon.shtml

koyama

04-22-2007, 02:28 PM

Give your #leftcol a background color and you'll see the problem. It extends the full width. You will need to float it:

#leftcol {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-size: 14px;
line-height: 17px;
font-family: Trebuchet MS, sans-serif, Arial, Helvetica;
float: left;
width: 200px;
background: green;
}

Next step is to validate your style sheet. I see errors.

spicypixel

04-22-2007, 03:46 PM

ok, the sheet now passes W3C validation as you required.

however the pages are now irratic in presentation:

http://img393.imageshack.us/my.php?image=dontworkqp1.jpg
http://img292.imageshack.us/my.php?image=worksdz0.jpg

Strange

koyama

04-22-2007, 03:57 PM

Ohhh... from the live link I see you have replaced this

#content {
padding:1em;
font-size:small;
margin-left: 200px;
}
with this:

#content {
float:left;
padding:1em;
font-size:small;
}

Your first version was fine. This is the approach for the liquid layout. Only #leftcol should be floated. Not #content

spicypixel

04-22-2007, 04:00 PM

you have saved hours of pulling my hair out, thank you.:thumbsup: