homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
I wanna stop using tables. but I can't!
shannoncruey




msg:3594582
 11:15 pm on Mar 7, 2008 (gmt 0)

For years, everyone supporting CSS has complained about oldschoolers using tables for display instead of exclusively for data.

Well, sometimes CSS is just downright confusing. Can someone please show me the best way to do this using CSS.

I need a 'thing' that is as wide as the entire page, with text in the upper left and upper right corners. With a table, it's easy:

<table width="100%">
<tr>
<td align="left">left</td>
<td align="right">right</td>
</tr>
</table>

There has to be an easy way to do this using css. Problem is, I can't find any good examples and those I do find use all manner of 'float:something' and don't work the same in my target browsers (IE, FF and Safari)

Thanks for the help!

 

Quadrille




msg:3594663
 1:19 am on Mar 8, 2008 (gmt 0)

I'm with you; I'd be happy to use css for layout if it could guarantee to appear the same in all the major browsers (forget the others!).

But until then, I'm going to be reactionary and proud!

Still, what you ask doesn't sound too complex, so maybe there's a way ...

lexipixel




msg:3594727
 3:04 am on Mar 8, 2008 (gmt 0)

Here's a TABLE layout, (100% wide with each column at 50%, and a border so we can see it)...

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="left" width="50%">left</td>
<td align="right" width="50%">right</td>
</tr>
</table>

The CSS version is more involved to cover browser compatablity issues. Same 100% with two 50% (left and right) "columns"... but I needed to mark them up as 100% wide divs inside the 50% divs or the border would throw it off in FireFox...

<div style="margin:0px; padding:0px; width:100%; clear:both;">
<div style="float:left; margin:0px; padding:0px; width:50%;">
<div style="border:1px solid black; width:100%; text-align:left;">left</div>
</div>
<div style="float:right; margin:0px; padding:0px; width:50%;">
<div style="border:1px solid black; width:100%; text-align:right;">right</div>
</div>
</div>

Not pretty or simple, but it can be done. (NOTE: the border was the problem -- it eats up 2 pixels of screen space and causes the CSS layout to push the right floated div down.. With no border it's as simple as:

<div style="margin:0px; padding:0px; width:100%; clear:both;">
<div style="float:left; margin:0px; padding:0px; width:50%;text-align:left;">left</div>
<div style="float:right; margin:0px; padding:0px; width:50%; text-align:right;">right</div>
</div>

[edited by: lexipixel at 3:07 am (utc) on Mar. 8, 2008]

swa66




msg:3594729
 3:07 am on Mar 8, 2008 (gmt 0)

First the true old schoolers learned HTML before tables existed in HTML. It was netscape that added them, and soon thereafter people started to abuse tables to create fancy layout. That fancy layout was not in the intended use of the world wide web at the basis.

CSS needs to be seen in this context as it brings back the ability to go to HTML that's just content, not layout.
The layout is then controlled in CSS.

To learn something about CSS the best is to start with simple layout, learn how to select item and apply CSS to it. Make sure you understand specificity (you'll bump into it soon or later)
And please .... don't think you need a div or span to apply CSS to something: that's just not true and about as wrong as using tables for layout. In examples div etc are more often used as a means to avoid focusing on the content and focus on the CSS instead.

If you start with just trying components in CSS, you'll make your life hard.

To get back to the element you asked, its harder to answer than it seems is that it's a component, used for a (unknown) reason. Let's see the reason and what you want to achieve and you'll see some really nice examples of how it can be done.

The trick -to go with the flow- in CSS is to think of the document as elements that you can take out of the flow and the main body of it will flow in between it, as opposed to dicing everything in rectangular boxes to fit into tables.

Let me put it this way:
Let's say I want an image (of unknown size) in the top left corner of the page, with a text caption underneath it and some text around it, the font is to be of unknown size (dynamically changeable by the user), and I want both the area next to the image and the area underneath it filled with text.
If you need to do that with a set of tables you will not know where to put the content as you don't know how much content will fit next to the image and when you need to move to the cell below it.

The effort to squeeze CSS layout into a rectangular box model is less than what I show above in the reverse direction, but you'll be pushing the limits easily if you don't change the way you thing about a page, away from the tables structure.

shannoncruey




msg:3594743
 3:28 am on Mar 8, 2008 (gmt 0)

Thanks lexi for the example - it works but as I feared is more complex to look at in the code than the table.

swa, I appreciate your words. I'll admit to being one of those people who focuses on the css instead of the content. That's probably due to the nature of development tools. VS.NET for example has a horrible interface in my opinion. Add to that the fact that we as developers are using one type of code (asp) to dynamically generate another (html) and that forces us to have to not only think in terms of elements, but to have to look at the code all day long.

That being said, in this case my need is as simple as my example. I have a dynamic report application, and need a title bar across the top. I want the report title to be left justified, but to the farthest right I want an 'export' hyperlink. Nothing special. I just heard someone else today complaining about using tables and thought I should make sure I'm not part of the problem :)

Since I am working with asp.net and can expose some 'functions' to my users, I'll probably make a function called DrawTitleBar(Name) that will spit out the table or those divs.

Thanks again! I'm glad I found this site - I'll definitely be back.

lexipixel




msg:3594767
 3:55 am on Mar 8, 2008 (gmt 0)

if you place all the CSS elements in an external style sheet, you can reduce the code in the script -- and make is easy to change the "style" without changing a line of ASP. I do it in perl all the time. When I started using CSS it cut my code in half or less.

Here's another example:

Put the following in a file called "reports.css"

#tbar {
margin:0px;
padding:0px;
width:100%;
clear:both;
}

#tleft {
float:left;
margin:0px;
padding:0px;
width:50%;
text-align:left;
background: #e0e0ff;
font-family: Arial, sans-serif;
font-weight: 700;
font-size:12pt;
}

#tright {
float:right;
margin:0px;
padding:0px;
width:50%;
text-align:right;
background: #FFffe0;
color: red;
font-family: Georgia, serif;
font-weight: 500;
font-size:12pt;
}

In the HEAD of the HTML you generate for your report add in:

<link type="text/css" rel="stylesheet" href="reports.css">

In your (ASP) code use:

<div id="tbar">
<div id="tleft">This is on the Left</div>
<div id="tright"><a href="#">This is on the Right</a></div>
</div>

Now you can change the look of your report heading without changing the ASP code. You can also specify screen or print style.

I am old school, and didn't use CSS for years -- about 2 years ago I converted most of my existing scripts from TABLE based layouts to CSS... never looked back since.

jessejump




msg:3594808
 6:06 am on Mar 8, 2008 (gmt 0)

Look at this:

1 <div style="margin:0px; padding:0px; width:100%; clear:both;">
2 <div style="float:left; margin:0px; padding:0px; width:50%;text-align:left;">left</div>
3 <div style="float:right; margin:0px; padding:0px; width:50%; text-align:right;">right</div>
1</div>

as:

1 Table
2 left cell
3 right cell
1 close table

fside




msg:3594921
 10:47 am on Mar 8, 2008 (gmt 0)

Tables were, I think, intended as grids, for tabular layout. And they quickly were utilized to block articles and content, as one would do for a print newspaper or magazine. With row and col span, one could also create elaborate and non-intuitive rollover layouts.

HTML was intended for layout, presentation and content. Some prefer there be NO overlap, that their academic (and we're talking academic types here) classifications be 'pure', without any overlap. But one finds in the sciences that overlap is inevitable. But here they want, pure. So that's what W3C began pushing. And it became 'purists', back when, vs 'experimentalists' or 'pragmatists'. Of course, where the 'purists' do succeed, there still will be a number of ways to hack to a solution. It's always going to favor the 'experimentalists'.

I have no problem with the overlap. There's some layout, some presentation, in HTML. You can get rid of the FONT tag, and you still have BR for adjustable vertical spacing. You still have basefont. One can argue about italic and bold, or emphasized or strong, but it's still content that has to be styled, or lose important information. The style is part of the content. But it is a style. So.

I think people should understand the 'meta', as it were, and not get hung up on trying create perfectly exclusive categories. You can add before/after content, and it's literally called, content, in css. The fact that you can hide entire sections has to do with what content is displayed, not merely how it's styled.

DHTML is still alive. Scripts require certain styling, such as position, for what are behaviors, and not mere styling. As mentioned, same for - display. I think it's fine. But if one isn't comfortable with what kind of information constitutes information, then it might be interesting to see how HTML5 ends up. And of course anything new like that has to catch on. And that means major browser support. Same for any new css.

lexipixel




msg:3595201
 8:01 pm on Mar 8, 2008 (gmt 0)

fside... Content is content. Style is style. Layout is style, (and is not content).

Tables were designed to organize tabular data. I am a convert. I used TABLE layouts for more than 10 years.

If you were a car mechanic, you could probably use a hammer, screwdriver and a pair of "vice grips" to fix just about any part of a car. These are "tools". If you had more or better tools, your work would be better, faster, and more professional. While you can remove a brake spring with a hammer, screw driver or vice-grips, using a brake spring tool will do the job faster and reduce the possibility of damaging other parts.

I made the same arguments a few years ago for TABLE... I complained that if a TABLE would render the same look as using CSS DIV's -- why should I take the time to learn CSS ?

I can tell you now, that I had to widen the main container div of every page on a 2000+ page site a couple weeks ago. This was an older site, designed for 640x480 display. Luckily, about 2 years ago I converted most of the TABLE layouts to table-less CSS. Rather than going in and resetting the TABLE WIDTH="" values on 2000+ pages, (and any TR and TD widths), I simply made a few small changes to the external CSS stylesheet and the change cascaded throughout the entire site.

Extreme CSS aficionados will take this approach even further, having a separate stylesheet for screen layout or print layout (specifying only positioning related widths, padding, margins, borders, etc), then have another stylesheet for fonts, another for colors, etc.

By making the design/layout aspects of the site granular and independent from content, you reduce dependency on one element affecting another.

If I could easily revise every HTML page I ever created to use DOM and CSS and XML, I would.

mattur




msg:3595217
 8:37 pm on Mar 8, 2008 (gmt 0)

Tables were designed to organize tabular data.

Tables were designed "to markup tabular material or for layout purposes" - W3C HTML3.2 Reference Specification [w3.org]

The table features in HTML3.2 were based on RFC1942: HTML Tables [ietf.org]:

Design Rationale:
The HTML table model has evolved from studies of existing SGML tables models, the treatment of tables in common word processing packages, and looking at a wide range of tabular layout in magazines, books and other paper-based documents.

See also Joe Clark's chapter on tables [joeclark.org]. As swa66 notes, old timers will remember building pages with no layout at all. Layout tables revolutionised web design.

But I'd still recommend learning CSS layouts for professional reasons. You may find this thread useful: Tips to move away from table-based layouts [webmasterworld.com]

MarkFilipak




msg:3595244
 9:37 pm on Mar 8, 2008 (gmt 0)

See: [webmasterworld.com...]

lexipixel




msg:3595252
 9:46 pm on Mar 8, 2008 (gmt 0)

Thanks for the w3c reference mattur. I was repeating what I heard all the time when I used to defend tables for layout over CSS.

I am a CSS convert, (and an old dog willing to learn new tricks). I do remember the pre-table days --- all the way back to LYNX and HTML1.0, (I was heavily involved with competing protocols and never thought HTML would win out against NAPLPS, RipScrip or any of the other graphical protocols that were maturing and in the running in the early 90's).

swa66




msg:3595261
 10:00 pm on Mar 8, 2008 (gmt 0)

... In this case my need is as simple as my example. I have a dynamic report application, and need a title bar across the top. I want the report title to be left justified, but to the farthest right I want an 'export' hyperlink. Nothing special. I just heard someone else today complaining about using tables and thought I should make sure I'm not part of the problem :)

How about something simple:

<html>
<head>
<title>t</title>
<style>
* {margin:0; padding:0; border:0;}
p {margin:2px;}
h1 {background-color: red; font: bold 16px arial, helvetica, sans; padding: 2px;}
#export {float:right; margin: 2px 5px 0 0; padding: 1px; background-color:white; font: normal 12px arial, helvetica, sans;}
</style>
</head>
<body>
<a id="export" href="#">export</a>
<h1>tile of document</h1>
<p>body goes here</p>
</body>
</html>

It's a quick and dirty derivation of the way I position print buttons in a menu bar.

rocknbil




msg:3595296
 10:49 pm on Mar 8, 2008 (gmt 0)

Welcome aboard shannocruey!

There are two things that "opened the door" for me. The first relates to your statement:
and don't work the same in my target browsers (IE, FF and Safari)

The very most important thing (I found) about non-tabled layouts: understanding Quirks Mode versus Standards Compliance Mode. Use a valid document type [webmasterworld.com] and validate your code [validator.w3.org]. Not only will things begin to look the same (almost always) in standards compliant browsers, it will all start to work as you expect it to. Well, except for IE 6. But it plays along most of the time.

The other is just red-headed stubborn Irish persistence. You're going to fail a lot, but you gotta keep coming back for more punishment until you get it. :-)

fside




msg:3595368
 12:43 am on Mar 9, 2008 (gmt 0)

>tabular layout in magazines, books and other paper-based documents.<

I didn't know that. But it was the way these were actually used. And my comment had to do with that.

"I think people should understand the 'meta', as it were, and not get hung up on trying create perfectly exclusive categories."

I think people also didn't understand the good sense of this. There will be overlap. That shouldn't create a need for 'purists'. Purists are rigid, and do not understand the proper use of things. They can be, at worst, tunnel vision tyrants, blind to all but their own 'good intentions'. Or else they filter out all but the academic or ideal problems to solve. At best, and no longer purists, they provide a general framework, and vague organization, and allow for its exploitation in ways not anticipated. Experimentalists inevitably exploit tools in ways unintended. But in any other sphere, the word we use for that is - resourcefulness, and creativity. Getting the job done, on time, with the tools at hand.

Standards are always trailing edge, and threaten to always be more of historical importance than anything else. One might say, look at construction or the trades. They have ISO standards. Yes, they also have a HOST of other competing organizations with their own standards.

You have the same, here. W3c, ECMA, etc, wish compliance from manufacturers who have their own way, all attempting to hook into the www, from game consoles to cell phones. Some builders get together with one group, for a while, just as in the trades. Some go it alone for awhile. Some try to anticipate a 'standard' which inevitably becomes some proprietary extension. Same as in the trades.

You have to understand the 'meta', not the standard. The standard follows. The standard can help reduce common errors. It can make communication easier, and so encourage more intelligent and mistake-free maintenance, in the trades, and in this context too.

But regarding resourcefulness, sometimes the hack is embarrassing. Sometimes it seems an inspired work of art. And that ought to figure in to what is promoted by way of some trailing edge standard. Sometimes, it's just used on a dare, because the deadline approaches, and somehow, for that day, the trick works. Even that must be considered. Committees can provide vague frameworks, which is what we've seen from W3c and ECMA, for example. But to go much beyond that is to get ahead of themselves. When the hacks are worked out, when it's understood what is pleasing, what is art, and what worked but shouldn't have by all rights, then it can become part of the 'system'.

And we're still waiting for rounded corners. As Crockford said, even Macs in the mid-80s had rounded corners. We should be shooting for the stars, not getting over the next hill. The committees are sometimes slow to incorporate what works. So are the big manufacturers, on that committee, or one committee removed. Look at IE, itself. Wilson has had much 'splainin to do over the years. Yet their attempt to push a standard provided a number of things that met the 'meta'. And so for tables, the layout is the layout, and a logical concept, not merely one of drafting tables and pencils. CSS is not yet designed in that way. And HTML tables are. A print table scales, perfectly, if the scaling is done with a lens. A css 'table' may not. And an HTML table may not if the graphics become aliased, etc.

shannoncruey




msg:3598814
 7:31 pm on Mar 12, 2008 (gmt 0)

Beating my bloody forehead on the table, this is still not really working. It blows up on the padding in my title class. Of course, without the padding the labels are crammed to the edge and look nasty.

FWIW, if I change the doctype to strict, IE also fails in the same fashion. So, I can't get FF to slip into 'loose' mode like IE will?

Either way, any mode will work, as long as it looks good and is consistent.

The exact code of my test page. (FF2, IE7)
-------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mind numbing CSS test</title>
<style type="text/css">
.c_title {
height: 20px;
background-color: #960000;
color: #FFFFFF;
font-weight: bold;
font-size: 9pt;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<div style="width: 100%;">
<div class="c_title" style="float: left; width: 90%; text-align: left;">
Showing Asset Group: All
</div>
<div class="c_title" style="float: right; width: 10%; text-align: right;">
<span class="exportlink" onclick=''>export</span>
</div>
</div>
</body>
</html>

fside




msg:3599583
 2:56 pm on Mar 13, 2008 (gmt 0)

> blows up >

Would this work?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Mind numbing CSS test</title>

<style type="text/css">

BODY {
margin: 0px;
padding: 0px;
}
#banner {
width: 100%;
height: 1.5em +10px;
background: #960000;
position: fixed;
min-width: 400px;
}
.c_titleL, .c_titleR {
height: 1.5em;
background: #960000;
color: #FFF;
font-weight: bold;
font-size: 1.1em;
margin-top: 10px;
}
.c_titleL{
float: left;
padding-left: 0.5em;
}
.c_titleR {
float: right;
padding-right: 0.5em;
}
</style>

</head>
<body>

<div id="banner">
<div class="c_titleL">
Showing Asset Group: All
</div>
<div class="c_titleR">
<span class="exportlink" onclick=''>export</span>
</div>
</div>

Assorted text<br><br><br><br>
Assorted text<br><br><br><br>
Assorted text<br><br><br><br>
Assorted text<br><br><br><br>
Assorted text<br><br><br><br>

</body>
</html>

SuzyUK




msg:3599654
 4:26 pm on Mar 13, 2008 (gmt 0)

the thing I find is that people who are not sure about a newer/different way of doing things often try and make things more complicated than they need be.

if you want a table use one, but for the sake of decency, times moved on for everyone since tables were all that existed..there's no need to keep up with zealots, purist thing.. Instead of focusing on what it can't do, focus on what it can do, and be grateful to the early purists who hacked away, made recommendations etc.. and got it this far already!

Anyone remember the "challenges" of 4-5 years ago to recreate table layouts in CSS? The only thing they were ever good for is as a learning curve, CSS is not and never will be (with it's present lot of properties) a benchmark for tables comparisons, it's already much much more than that. There are more than a few people, I am one, who will tell you that trying to copy tables in order to "prove" CSS is a fruitless and unnecessary exercise.

anyhow back to the question, why float both sides?

left is the natural alignment, use it

div span {padding: 5px;}
.tdr {float: right;}

<div>
<span class="tdr">right</span>
<span class="tdl">left</span>
</div>

or if left first in source, float comes first..
then overrule text align for right

div span {padding: 5px;}
.tdl {float: left;}
.tdr {text-align: right;}

<div>
<span class="tdl">left</span>
<span class="tdr">right</span>
</div>

[edit]sorry added the alternative, though I did that already!

[edited by: SuzyUK at 4:41 pm (utc) on Mar. 13, 2008]

rocknbil




msg:3599724
 5:22 pm on Mar 13, 2008 (gmt 0)

To add to fside's post, one of the reasons fside's version may work is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Your original doctype will put your document in Quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Easy check for either: in FireFox, right-click the background area of the page OR select Tools->Page Info from the main menu and look at the value for "Render Mode."

swa66




msg:3599981
 9:48 pm on Mar 13, 2008 (gmt 0)

height: 1.5em +10px;

That doesn't seem like valid CSS to me (and the validator agrees with me)

fside




msg:3600556
 2:22 pm on Mar 14, 2008 (gmt 0)

> doesn't seem like <

Yep. Sorry. It does validate, via the web developer toolbar call to W3C in Firefox, but only because it or W3C strips that 10px away. They don't understand that there's nothing actually there. In other words, it works not because of the 10px. You could put anything there. What it does is tell the browser that there's no dimension or value there at all. It can't parse it. The line simply shouldn't be there, but rather just down in the next two styles. So where it says - height: 1.5em +10px; - erase it. Thanks for pointing it out. My mistake.

sgietz




msg:3600814
 5:47 pm on Mar 14, 2008 (gmt 0)

Like I said in another thread, I avoid tables whenever I can, but sometimes you just have to work smarter, not harder. The example you showed is a great way to illustrate why tables are still a good alternative to bloated CSS. It's silly how tedious it can be just to make stuff align both left and right on the same line (to name one issue). And once you use floats, you open up a whole other can that needs to be addressed with even more CSS. Quite frankly, you have to use CSS hacks to make it all work, and where is the "code ethics" in that? Only the purist will argue that tables are evil for layout.

Until CSS can successfully emulate table functionality, I won't completely convert to it. Having said that, my sites heavily rely on divs for layout, but only to the point where it doesn't require a ridiculous amount of markup to make things happen.

That's just my 4.2 cents (adjusted for inflation).

swa66




msg:3601000
 8:45 pm on Mar 14, 2008 (gmt 0)

Perhaps you only ready to a given point in the threat before you posted:
a great way to illustrate why tables are still a good alternative to bloated CSS

While some of the more generic early answers are complex I think a few examples (once we understood what the OP wanted to achieve) are really simple easy and will work cross browser. If you ask for CSS to emulate tables you get complex stuff, if you ask CSS to achieve what you need (without being locked in your mind into tables) you'll find it easy.
my sites heavily rely on divs for layout

While you can use divs in HTML, it makes one wonder how your HTML looks in a text browser where CSS is ignored.
I'd suggest a more back to the source approach and use the h1-h6, p, ... tags instead of forcing everything in a div.
Using divs in html to achieve layout without giving it some reason to be there on itself is IMHO just as bad as using tables to do layout.

Dave75




msg:3601558
 6:13 pm on Mar 15, 2008 (gmt 0)

Hi,

Just a few thoughts.

Firstly, your divs are wider than 100%. If you remove the padding on the divs you will get them to sit in alignment on the page. Your declaration makes their widths 90% + 10px and 10% + 10px respectively, which makes it 100% + 20px. You can find more about the box model at W3C Box Model [w3.org].

Be careful with IE, it defines margin as being an addition to the total width. For more information search for IE box model, there are plenty of IE bug sites out there.

The other bug to be careful of when floating is the IE6 double margin bug. Again you can do an easy search for an explaination.

Also, to reduce browser rendering differences I recommend something like Eric Meyer's Browser Reset [meyerweb.com], he has released a newer version two weeks ago but, I'm still using the one I linked to.

Anyway, here's something kinda like what you may have had in mind with you last post. Notice I have used background colours to view the boxes, borders don't work because they are hard to see and they change the display width and heights. I have simply inserted an extra div to control the difference in the box models between IE and the rest, I have used margins for spacing but, you can use padding depending upon your style requirements.

The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mind numbing CSS test</title>
<style type="text/css">
.c_title {
background-color: #960000;
color: #FFFFFF;
font-weight: bold;
font-size: 9pt;
padding-left: 0px;
padding-right: 0px;
}
.red{background-color:red;}
.green{background-color:green;}
.buffer{margin:10px;}
</style>
</head>
<body>
<div style="width: 100%;">
<div class="c_title red" style="float: left; width: 90%; text-align: left;">
<div class="buffer">Showing Asset Group: All</div>
</div>
<div class="c_title green" style="float: right; width: 10%; text-align: right;">
<div class="buffer"><span class="exportlink" onclick=''>export</span></div>
</div>
</div>
</body>
</html>

Clark




msg:3601684
 11:42 pm on Mar 15, 2008 (gmt 0)

Lexi,

I'm looking for something like your code:
<div style="margin:0px; padding:0px; width:100%; clear:both;">
<div style="float:left; margin:0px; padding:0px; width:50%;text-align:left;">left</div>
<div style="float:right; margin:0px; padding:0px; width:50%; text-align:right;">right</div>
</div>

However, what happens to wordwrap?
I'm working with a template. Both the right and left sides vary in width, sometimes considerably. The right much less than the left.

I'd like the right side to expand as wide as the text. I'd like the left side, which can grow beyond a single line, to wrap as soon as it "hits" the right side.

Would your code listed above work for this scenario? Does it need to be tweaked a bit? I assume the 50% would be inappropriate in this instance?

Dave75




msg:3602535
 3:38 am on Mar 17, 2008 (gmt 0)

Clark,

To achieve a the text wrap layout you are after the left div should not be floated. Instead, it should have margin-right:50%; and the right box(floated) should appear before the left box in the html. Like this:


<div style="margin:0px; padding:0px; width:100%; clear:both;">
<div style="float:right; margin:0px; padding:0px; width:50%; text-align:right;">right</div>
<div style="margin-right:50%; padding:0px; width:50%;text-align:left;">left</div>
</div>

Of course, you might want to margin-right:45% for the space.

Dave75




msg:3602536
 3:41 am on Mar 17, 2008 (gmt 0)

I just realised, you are after a wrap under the floated box, so, remove the margin-right declaration and you get that standard wrap behaviour.

lexipixel




msg:3602542
 3:50 am on Mar 17, 2008 (gmt 0)

Would your code listed above work for this scenario?
- Clark

Try 80% and 20% or other combinations. It should wrap.

NOTE: You need to make sure you have the HTML BODY styles set to margin:0px and padding 0px.

NOTE2: I set the background colors so you could see what's happening.

<div style="margin:0px; padding:0px; width:100%; clear:both;">
<div style="width:20%; float:left; margin:0px; padding:0px; text-align:left;background:#ffe0e0;">LEFT Left left...</div>
<div style="width:80%; float:right; margin:0px; padding:0px; text-align:right;background:#e0e0ff;">
RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right... RIGHT Right right...</div>
</div>

Someone else here may have a more elegant solution.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved