PDA

View Full Version : Trouble positioning DIVs in CS4 (very simple)


benjamin308
01-13-2010, 08:45 PM
First post! Sorry it's such a boring 'super-noobie' one. Man oh man am I having problems with something that must surely be a pretty easy fix. I'm going bald with frustration with this one.

I have a fixed width container with a number of divs inside. I'm trying to get the right hand column to stop sticking to the floor! I'd like it to hang from the nav bar (like the other two colums).

Any help very much appreciated!!
Cheers,
Ben

(html and css file attached)

edbr
01-13-2010, 11:29 PM
please just post your code . generally we are not keen on downloading zip files im sure you can understand why. :)

benjamin308
01-14-2010, 12:03 AM
please just post your code . generally we are not keen on downloading zip files im sure you can understand why. :)

Ah yes, good point. :grin:

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="layoutcss.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<div id="header">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="655" height="230" id="FlashID" title="property movie">
<param name="movie" value="images/property.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/property.swf" width="655" height="230">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
</div>
<div id="topnav">
<ul>
<li><a href="1">linkone</a></li>
<li> <a href="2">linktwo</a> </li>
<li><a href="3">link 3</a> </li>
<li class="last"><a href="4">link 4</a></li>
</ul>
</div>
<div id="leftcol">
<p>Content for id "leftcol" Goes Here</p>
<p>&nbsp;</p>
</div>
<div id="centre">
<h1>this is a heading</h1>
<p>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
</div>
<div id="right_new">Content for id "right_new" Goes Here</div>
<div id="footer">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>


-----
and here's the css:

@charset "UTF-8";
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
padding: 0px;
width: 655px;
margin-right: auto;
margin-left: auto;
}
#wrapper #header {
height: 230px;
}
#wrapper #centre h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #5287B1;
margin: 0px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#wrapper #leftcol {
width: 125px;
padding: 0px;
float: left;
}
#wrapper #centre {
padding: 0px;
width: 400px;
margin-left: 125px;
margin-right: 125px;
}
#wrapper #footer {
background-color: 5287B1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #36C;
clear: both;
height: 10px;
}
#wrapper #topnav {
background-color: #39C;
text-align: left;
height: 20px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
#wrapper #right_new {
padding: 0px;
width: 100px;
float: right;
clear: left;
}
#wrapper #topnav ul li a {
color: #FFF;
text-decoration: none;
}
#wrapper #topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#wrapper #topnav ul li a:hover {
font-weight: normal;
color: #FFF;
text-decoration: underline;
}
#wrapper #topnav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #topnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#wrapper #topnav ul li {
display: inline;
padding-right: 5px;
padding-left: 5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}

edbr
01-14-2010, 02:50 AM
its the margin right yoiu have added to the centre div, just delete it as you are floating the right new right anyway

benjamin308
01-14-2010, 07:12 AM
its the margin right yoiu have added to the centre div, just delete it as you are floating the right new right anyway

Hi. Thanks for your reply. Unfortunately it's still not working. Where am I going wrong? (I've uploaded the page here: http://www.em-design-london.co.uk/help/layout.html )

Many thanks!

here's the CSS

@charset "UTF-8";
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
padding: 0px;
width: 655px;
margin-right: auto;
margin-left: auto;
}
#wrapper #header {
height: 230px;
}
#wrapper #centre h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #5287B1;
margin: 0px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#wrapper #leftcol {
width: 125px;
padding: 0px;
float: left;
}
#wrapper #centre {
padding: 0px;
width: 400px;
margin-left: 125px;
}
#wrapper #footer {
background-color: 5287B1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #36C;
clear: both;
height: 10px;
}
#wrapper #topnav {
background-color: #39C;
text-align: left;
height: 20px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
#wrapper #right_new {
padding: 0px;
width: 100px;
float: right;
clear: none;
}
#wrapper #topnav ul li a {
color: #FFF;
text-decoration: none;
}
#wrapper #topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#wrapper #topnav ul li a:hover {
font-weight: normal;
color: #FFF;
text-decoration: underline;
}
#wrapper #topnav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #topnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#wrapper #topnav ul li {
display: inline;
padding-right: 5px;
padding-left: 5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}

edbr
01-14-2010, 08:03 AM
sorry i forgot to say delete the clear:left you have on right new

#wrapper #right_new {
padding: 0px;
width: 100px;
float: right;
clear: left;

edbr
01-14-2010, 08:06 AM
i completely forgot i did that i removed the clear then found that the margin was affecting it also. Welcome to the forum BTW

benjamin308
01-14-2010, 08:19 AM
i completely forgot i did that i removed the clear then found that the margin was affecting it also. Welcome to the forum BTW

Hi edbr. Thanks for your replies but it's really still not working:
http://www.em-design-london.co.uk/help/layout.html

Where is it going wrong?
Cheers

Ben

edbr
01-14-2010, 08:28 AM
you still have clear left for the right new
#wrapper #right_new {
padding: 0px;
width: 100px;
float: right;
clear: left;
}

edbr
01-14-2010, 08:29 AM
here in one page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="layoutcss.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<style>body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
padding: 0px;
width: 655px;
margin-right: auto;
margin-left: auto; position:relative;
}
#wrapper #header {
height: 230px;
}
#wrapper #centre h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #5287B1;
margin: 0px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#wrapper #leftcol {
width: 125px;
padding: 0px;
float: left;
}
#wrapper #centre {
padding: 0px;
width: 400px;
position:relative;
float: left;

}
#wrapper #footer {
background-color: 5287B1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #36C;
clear: both;
height: 10px;
}
#wrapper #topnav {
background-color: #39C;
text-align: left;
height: 20px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
#wrapper #right_new {
padding: 0px;
width: 100px;
float: right;

}
#wrapper #topnav ul li a {
color: #FFF;
text-decoration: none;
}
#wrapper #topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#wrapper #topnav ul li a:hover {
font-weight: normal;
color: #FFF;
text-decoration: underline;
}
#wrapper #topnav ul li.last {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper #topnav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#wrapper #topnav ul li {
display: inline;
padding-right: 5px;
padding-left: 5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<p>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="655" height="230" id="FlashID" title="property movie">
<param name="movie" value="images/property.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/property.swf" width="655" height="230">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
</div>
<div id="topnav">
<ul>
<li><a href="1">linkone</a></li>
<li> <a href="2">linktwo</a> </li>
<li><a href="3">link 3</a> </li>
<li class="last"><a href="4">link 4</a></li>
</ul>
</div>
<div id="leftcol">
<p>Content for id "leftcol" Goes Here</p>
<p>&nbsp;</p>
</div>
<div id="centre">
<h1>this is a heading</h1>
<p>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
</div>
<div id="right_new">Content for id "right_new" Goes Here</div>
<div id="footer">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

benjamin308
01-14-2010, 08:40 AM
here in one page


Wayhey! Thanks. It works now. So was the problem entirely resolved by adjusting the float, clear and margin settings on the centre and right divs?
Cheers
Ben

edbr
01-14-2010, 02:40 PM
yes mostly the clear left but the right margin was also to much to allow it to display inline