right float problem...

c_martini · #1 (**permalink**) Jul 31st, 2006, 15:47

I am adapting an existing global layout with css to display a different design and positioning for a specific user. I am limited as to what I can change in the html as this must remain a global template, although I can change whatever css I need to obviously...

I have three div elements in the content section of my layout. The left-panel floats left, the centre-panel is in the middle and the right-panel floats right. My problem is that the right-panel will not float right properly. It is wrapping below the left and centre elements, rather than floating inline to the right as it should. I'm sure I have tackled this problem before but have just forgotten the solution.

I would appreciate any help on this. A cut down basic version of the html is below, followed by a simplified version of one of the stylesheets:

Code: Select all

<html>
<head>
<link type="text/css" media="screen" rel="stylesheet" href="test_files/test.css">
</head>
<body>
<div id="body-layout" title="">
  <div id="header-layout" title=""><h3>Header</h3></div>
  <div id="middle-layout" title="">
    <div id="content-layout" title="">
      <div class="droplet" id="droplet-feature-search" title="Quick Search">
        <div class="box"><h3>Search Panel</h3></div>
      </div>
      <div id="content">
        <div id="left-panel"><h3>Left Panel</h3>
		<br />
		<br />
		<br />
		<br />
		<br />	
		</div>
        <div id="centre-panel">
          <h3>Centre Panel</h3>
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />		
        </div>
        <div id="right-panel">
			<h3>Right Panel</h3>
			<img src="test_files/skyscraper.gif" class="ad-image" height="728" width="160" />
		</div>
      </div>
    </div>
  </div>
  <div id="copyright"><a href="#" target="_blank" title="© 2004 - 2006 Some Company">© 2004 - 2006 Some Company</a> </div>
</div>
</body>
</html>

Stylesheet:

Code: Select all

body {
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: silver;
}
#body-layout {
	width: 995px;
	border: 1px solid black; 
	background-color: white;
	border: 1px solid black;
}
#header-layout {
	height: 116px;
	padding-bottom: 0;
}
#content {
	margin: 0px;
	width: 995px;
}
#content-layout {
	padding: 0;
	margin: 0;
}
#content-layout:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#droplet-feature-search .box {
	position: absolute;
	z-index: 99;
	top: 116px;
	left: 169px;
	width: 826px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0;
	border: none;
	text-align: left;
	background-color: #d3d3d3;
	border: 1px solid gray;
}
#left-panel {
	float: left;
	padding: 0;
	margin: 0 0 0 8px;
	width: 160px;
	background-color: #feffd9;
	border: 1px solid black;
}
#centre-panel {
	width: 618px;
	margin: 50px 0 0 0;
	padding-left: 188px;
	background-color: silver;
	border: 1px dashed black;
}
#right-panel {
	float: right; 
	width: 160px;
	margin: 0;
	padding: 0;
	border: 1px solid black;
}
#copyright {
	text-align: center;
}

moojoo · #2 (**permalink**) Jul 31st, 2006, 15:50

Put rightpanel before leftpanel in your html. That would be the easiest fix.

ukgeoff · #3 (**permalink**) Jul 31st, 2006, 16:15

Looks to me like you are forgetting the efect that adding padding-left: 188px to your center-panel is having on the overall pixel width count. This is what is pushing the right panel down.

I made the count 1126 before adding borders and margins into the equation.

You specified a total width of 995px in body-layout.

IMO this is too wide for a fixed width design as it will cause people with 800 wide monitors to have to scroll horizontally.

ifunky2 · #4 (**permalink**) Aug 1st, 2006, 03:37

I agree with ukgeoff-->

On two counts:
1. That "adding padding-left: 188px to your center-panel" was disastrous.

2. " #body-layout{width: 995px; " is just far to wide for a fixed width.
But then the issue is not the fixed width or design/layout, so much as how to get the page layout to work under code modification constraints.

Few other tips/comments

A. -Allways use a "Doc type"
B. -"Validation" is your (debugging) friend

C. -Never use "position:absolute"
D. -"z index" is (IMO) all but useless
E. -Don't put titles on div's p)
F. -keep track of your div closings with comments

Copy off the code I posted and take a look
(not to close, it was just a 'quicky")

The basic trick was this...
1) float the center panel left as well.
(so that the right panel has no issues and then you don't have to mess around with the order that the div's appear in the HTML, as was suggested in an earlier reply.
2) give the center panel a left margin slightly more than the left panel's width.
(and add a stated width so the center stays inside the right panel's, left margin.)
You could maybe get away with

3) either add a 'claering div" or style the "copywrite div with " {clear:both;} "

You had some Html errors that needed fixing, and the closing order of your div's was a little off as well.
Aside from that you were just about there.

ifunky2

<pre>
<!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>
<title>Experiment in "Left Floated Nav's".</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

</head>

<body>
<div id="body-layout">
<div id="header-layout"><h3>Header</h3></div>

<div id="middle-layout">
<div id="content-layout">
<div class="droplet" id="droplet-feature-search">
<div class="box"><h3>Search Panel</h3></div>
</div>

<div id="content">
<div id="left-panel">
<h3>Left Panel</h3>
<p>Fusce nisl eros, sagittis at, ullamcorper quis, dictum ac, nulla. Vivamus id ipsum. Integer iaculis. Aliquam.</p>
<ul>
<li>ellentesque nec nibh.</li>
<li>Suspendisse fermentum</li>
<li>adipiscing nibh.</li>
<li>Maecenas scelerisque</li>
<li>mattis ante.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ante lectus</p>
</div>

<div id="centre-panel">
<h3>Centre Panel</h3>
<p>Praesent ligula nisl, dapibus at, sollicitudin sit amet, ullamcorper at, erat. Nullam rutrum odio eget arcu. Praesent eros arcu, ultricies eleifend,</p> <p>adipiscing in, dictum et, arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec leo velit, egestas vel, mattis eget, laoreet eu, tellus. Vivamus luctus bibendum libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra,</p> <p>Donec gravida elit a sem. Sed quis eros non odio ultricies consequat. Duis ut erat. Cras vel nibh et arcu eleifend dapibus. Aenean sed tellus.</p>
</div>

<div id="right-panel">
<h3>Right Panel</h3>
<p>Fusce nisl eros, sagittis at, ullamcorper quis, dictum ac, nulla. Vivamus id ipsum. Integer iaculis. Aliquam viverra justo at lobortis elementum</p> <p>massa eros consequat tellus, vitae tristique orci ligula at nulla.</p>

<ul>
<li>ellentesque nec nibh.</li>
<li>Suspendisse fermentum</li>
<li>adipiscing nibh.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ante lectus</p>
</div>
</div>
</div>

<div id="copyright"><a href="http://www.google.com" target="_blank" title="© 2004 - 2006 Some Company">© 2004 - 2006 Some Company</a>
</div>
</div>
</div>
</body>
</html>
</pre>

#########
and the style ---->
#########

*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:verdana, arial, sans-serif;
}
#body-layout {
width: 860px;
background-color: white;
border: 1px solid black;
margin-top:26px;
margin-bottom:0;
margin-right:auto;
margin-left:auto;
text-align:left;
}
#header-layout {
border:solid red 1px;
height: 116px;
background:#f0f0f0;
}
#content {
border:solid red 12px;
}
#content-layout {
border:solid red 1px;
}
#content-layout:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#droplet-feature-search .box {
width: 826px;
border: none;
background-color: #d3d3d3;
border:solid blue 1px;
}
#left-panel {
float: left;
padding: 0;
margin: 0 0 0 8px;
width: 160px;
background-color: #feffd9;
border:solid red 1px;
}
#centre-panel {
float:left;
width:470px;
margin: 50px 0 0 12px;
background-color: silver;
border:solid green 1px;
}
#right-panel {
float: right;
width: 160px;
border: 1px solid black;
}
#copyright {
clear:both;
text-align: center;
border: 1px solid black;
}

########

c_martini · #5 (**permalink**) Aug 1st, 2006, 15:48

Quote:

Originally Posted by moojoo

Put rightpanel before leftpanel in your html. That would be the easiest fix.

Thanks Moojoo, i will give this a go...

Chris

moojoo · #6 (**permalink**) Aug 1st, 2006, 15:49

They have a point about the padding too. Are you familiar with the box model?
http://www.w3.org/TR/REC-CSS2/box.html

c_martini · #7 (**permalink**) Aug 1st, 2006, 15:52

Quote:

Originally Posted by ukgeoff

Looks to me like you are forgetting the efect that adding padding-left: 188px to your center-panel is having on the overall pixel width count. This is what is pushing the right panel down.

I made the count 1126 before adding borders and margins into the equation.

You specified a total width of 995px in body-layout.

IMO this is too wide for a fixed width design as it will cause people with 800 wide monitors to have to scroll horizontally.

I agree totally with this. But this is not my decision and was specified by the client, whose company has had another designer build their site. I am simply doing a white label branding of an existing templated buy process that we have in order to make it flow seemlessly with their site. This is the first time I have worked on a site which is so far outside my "good design comfort zone", but I do not have creative input on this one, so I must make this work with what I have been provided by the client.

Thanks for the input though...

Chris

c_martini · #8 (**permalink**) Aug 1st, 2006, 16:01

Quote:

Originally Posted by ukgeoff

Looks to me like you are forgetting the efect that adding padding-left: 188px to your center-panel is having on the overall pixel width count. This is what is pushing the right panel down.

I made the count 1126 before adding borders and margins into the equation.

You specified a total width of 995px in body-layout.

IMO this is too wide for a fixed width design as it will cause people with 800 wide monitors to have to scroll horizontally.

Quote:

Originally Posted by ifunky2

I agree with ukgeoff-->

On two counts:
1. That "adding padding-left: 188px to your center-panel" was disastrous.

2. " #body-layout{width: 995px; " is just far to wide for a fixed width.
But then the issue is not the fixed width or design/layout, so much as how to get the page layout to work under code modification constraints.

Few other tips/comments

A. -Allways use a "Doc type"
B. -"Validation" is your (debugging) friend

C. -Never use "position:absolute"
D. -"z index" is (IMO) all but useless
E. -Don't put titles on div's p)
F. -keep track of your div closings with comments

Copy off the code I posted and take a look
(not to close, it was just a 'quicky")

The basic trick was this...
1) float the center panel left as well.
(so that the right panel has no issues and then you don't have to mess around with the order that the div's appear in the HTML, as was suggested in an earlier reply.
2) give the center panel a left margin slightly more than the left panel's width.
(and add a stated width so the center stays inside the right panel's, left margin.)
You could maybe get away with

3) either add a 'claering div" or style the "copywrite div with " {clear:both;} "

You had some Html errors that needed fixing, and the closing order of your div's was a little off as well.
Aside from that you were just about there.

ifunky2

Funky,
As for your comments, I totally agree. I will say though that I am quite limited as to the changes I can actually make to the html. I cannot specify doc types for one, as I am unable to change the source html, except for some minor changes which will affect hundreds of other users with different platforms and branding. All these other users' sites use the same set of templates which are cgi scripted and generated dynamically. I can really only affect the css to change the look and feel. So I must get the current markup to work with the clients' specified layout and branding guidelines.

Thanks for your helpful suggestions though and I will try then once I am back at the office tomorrow...

Chris

moojoo · #9 (**permalink**) Aug 1st, 2006, 16:21

Maybe this will help you

http://www.alistapart.com/articles/holygrail/

c_martini · #10 (**permalink**) Aug 2nd, 2006, 08:38

Quote:

Originally Posted by moojoo

Put rightpanel before leftpanel in your html. That would be the easiest fix.

Thanks Moojoo, I tried your suggestion, and since this is one of the html elements I am able to edit, it worked fine.

c_martini · #11 (**permalink**) Aug 2nd, 2006, 08:40

Quote:

Originally Posted by moojoo

Maybe this will help you

http://www.alistapart.com/articles/holygrail/

This doesn't apply exactly, but it does give some helpful advice...
Many Thanks,

Chris

moojoo · #12 (**permalink**) Aug 2nd, 2006, 13:47

Glad it worked for you.

Quote:

Originally Posted by c_martini

Thanks Moojoo, I tried your suggestion, and since this is one of the html elements I am able to edit, it worked fine.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Float problem with Firefox	Emzi	Web Page Design	10	Apr 4th, 2008 12:02
CSS float problem Advanced	Kropotkin	Web Page Design	7	Aug 15th, 2007 16:21
css float problem	milly	Starting Out	3	Jul 9th, 2007 02:51
Image float problem	timmytots	Web Page Design	6	Jul 8th, 2006 13:40
site ok in Firefox, not in IE : float problem??	bbbobo	Web Page Design	1	Sep 30th, 2005 08:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
right float problem...