0

Good day,

I am having a challenge with a layout for a div that will contain three divs for some navigation aids.

I see the three divs as justified right, justified center and justified left respectively. Something like this:
-------------------------------------------------------------------------------------
<---------------------div 1> | <div 2> | <div 3------------------->
-------------------------------------------------------------------------------------
<div 2> will be small and constant for it will only contain a back to top icon. <div 1> and <div 3> will contain text links to previous and next topics.

How do I do the lay-out with CSS? Off-hand, will there be browser compatibility issues?

4
Contributors
8
Replies
9
Views
8 Years
Discussion Span
Last Post by almostbob
0

Besides breaking convention, I'm not sure what problems you expect.

Off the top of my head, I would say use "position:absolute;" for your divs because resizing browsers can make a mess of your work.

If you would like to post some samples of what you are thinking, I would gladly throw in my two-cents worth!

0
<!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">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="AlmostBob" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<style type='text/css'>
.left {width:40%; text-align:right; float:left; padding-right:1%; border:1px solid black;}
.right {width:40%; text-align:left; float:right; padding-left:1%; border:1px solid black; }
.center {text-align:center; border:1px solid black; }
</style>
</head>
<body>
<div class='left'>left 123 456 789 0 </div>
<div class='right'>right 123 456 789 </div>
<div class='center'>text 123 456 789 </div>
</body>
</html>

Edited by almostbob: n/a

0

Thanks for the help again.

Your code works well but I am having a challenge to integrate it as the screen capture jpg demonstrates.

This is the code from my stylesheet:

.left{
      width:40%;
      text-align:right;
      float:left; 
      margin: 0;
      border:1px solid black;
    }
    .center{
      text-align:center; 
      margin: 0;
      border:1px solid black;
    }
    .right{
      width:40%;
      text-align:left;
      float:right;
      margin: 0;
      border:1px solid black; 
    }

No matter what is specified as the width for left & right, center takes up all space for the remainder of the line, pushing right below the other 2 divs. Even specifying a measly 1% width to center causes the right div to wrap to a new line.

Looking at the page in firebug or IE's debugger, I can't find anything to explain why this is happening. Can you give any thoughts as to likely culprits? I should add this problem is presenting in all browsers, so I don't think it is an issue with any single browser.

<!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">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="AlmostBob" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<style type='text/css'>
.left {width:40%; text-align:right; float:left; padding-right:1%; border:1px solid black;}
.right {width:40%; text-align:left; float:right; padding-left:1%; border:1px solid black; }
.center {text-align:center; border:1px solid black; }
</style>
</head>
<body>
<div class='left'>left 123 456 789 0 </div>
<div class='right'>right 123 456 789 </div>
<div class='center'>text 123 456 789 </div>
</body>
</html>
Attachments result.jpg 28.37 KB
0

screen captures are not much good
cant see what you may have done different to the example

div (p span whatever) order matters class='center' is a block element not floated, must come last
left right center in the html works per example
right left center in the html works
left center right in the html dont work - I know why I did what I did, pity I didnt tell you

Edited by almostbob: doh Moment

-1

<!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">
<!-- @(#) $Id$ -->
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="AlmostBob" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<style type='text/css'>
.left {width:40%; text-align:right; float:left; padding-right:1%; border:1px solid black;}
.right {width:40%; text-align:left; float:right; padding-left:1%; border:1px solid black; }
.center {text-align:center; border:1px solid black; float:left; }
</style>
</head>
<body>
<div class='left'>left 123 456 789 0 </div>
<div class='right'>right 123 456 789 </div>
<div class='center'>text 123 456 789 </div>
</body>
</html>

Edited by tranchibinh: n/a

0

tranchibinh,
simple answer, and like such answers, wrong
the point of the final nav element not being floated, is to break between nav and subsequent elements .center { float:left; } :: the subsequent element will continue on the same line, screwing up the menu
Not what the op requiresI know why I did what I did,Do you?

Edited by almostbob: n/a

-1
<!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>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Generator" content="AlmostBob" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<style type='text/css'>
.left {width:403px; text-align:right; float:left; padding-right:10px; border:1px solid black;}
.right {width:403px; text-align:left; float:right; padding-left:10px; border:1px solid black; }
.center {text-align:center; border:1px solid black; width:596px; float:left}
.table{width:1013px; margin:0 auto;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="table">
<div class="left">left 123 456 789 0 </div>
<div class="center">text 123 456 789 </div>
<div class="clear"></div>
</div>
<div class="table">
<div class="right">right 123 456 789 </div>
<div class="clear"></div>
</div>

</body>
</html>
0

10 extra lines of code, unneccessary markup, to correct an error created by unneccessary markup
html KISS = "Keep It Small S*****"

Edited by almostbob: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.