Lay-out problem

Question

dwlamb_001 0 Light Poster

14 Years Ago

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?

web-design

4 Contributors
8 Replies
139 Views
2 Days Discussion Span
Latest Post 14 Years Ago Latest Post by almostbob

techsheaven 45 Posting Pro in Training

14 Years Ago

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!

almostbob 866 Retired: passive income ROCKS

14 Years Ago

<!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 14 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dwlamb_001 0 Light Poster · Answer 1 · 2010-01-15T22:25:56+00:00

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>

almostbob 866 Retired: passive income ROCKS · Answer 2 · 2010-01-16T00:40:03+00:00

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

tranchibinh 0 Newbie Poster · Answer 3 · 2010-01-17T09:13:29+00:00

<!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>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>

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2010-01-17T11:56:12+00:00

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?

tranchibinh 0 Newbie Poster · Answer 5 · 2010-01-17T14:25:29+00:00

<!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>

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2010-01-17T20:46:10+00:00

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