| Author |
 Topic  |
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
 Posted - 17 February 2004 : 13:43:34
|
I am trying to get something left aligned and right aligned within the same DIV, and on the same line.
e.g.
------------------------------------------
left align right align
------------------------------------------
the border around the text is made by a Div style, and I tried to align the text using a SPAN:
.right{
float: right;
text-align: right;
}
.left{
float: left;
text-align: left;
}
but it doesn't work. the text on the right appears under the bottom line.
whats the trick !? (nb removing the floats, does nothing) |
|
|
Jezmeister
Senior Member
United Kingdom
1141 Posts |
Posted - 17 February 2004 : 13:51:22
|
| does removing the gap between them do nything? |
 |
|
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
Posted - 17 February 2004 : 13:58:21
|
the gap you see is what i am trying to achieve. but unfortunately on my page it looks like this:
------------------------------------------
left align right align
------------------------------------------
or
------------------------------------------
left align
------------------------------------------
right align
It's got to be easy but i cant get it exactly right. |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 17 February 2004 : 14:03:37
|
So you're saying that something like this doesn't work?:
<head>
<style type="text/css">
.content {width: 100%; text-align: center; border: 1px;}
.left { float: left; text-align: left; width: 150px; margin: 0px;}
.right { float: right; text-align: right; width: 150px; margin: 0px;}
</style>
</head>
<body>
<div class="content">
<div class="left">this text is to the left</div>
<div class="right">this text is to the right</div>
<span style="clear:both;"> </span>
</div>
</body>
|
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
Jezmeister
Senior Member
United Kingdom
1141 Posts |
Posted - 17 February 2004 : 14:13:07
|
nooo i meant:
float: right;
text-align: right;
}
<-- this gap
.left{
float: left;
text-align: left;
}
|
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 17 February 2004 : 14:55:19
|
quote:
Originally posted by Jezmeister
nooo i meant:
float: right;
text-align: right;
}
<-- this gap
.left{
float: left;
text-align: left;
}
Huh? Can you tell me if this is what you're looking for it to do? If so, just view the source and use that css code as a basis for what you want to do.
If not, then please post the code you're talking about (all of it) so we can see what you're talking about - or else post a link to the page with the problem. |
Dave Maxwell
Barbershop Harmony Freak |
Edited by - davemaxwell on 17 February 2004 14:56:13 |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 17 February 2004 : 14:57:51
|
quote:
Originally posted by D3mon
Use a two-cell table - save yourself (and some of your surfers) the misery.
As long as you're using basic css properties, most if not all your browser types will support css properly or degrade gracefully.
In most cases, more dialup users will thank you if you use css than people with non-css compliant browsers will thank you for using the tables. |
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
Posted - 17 February 2004 : 15:04:34
|
quote:
Originally posted by davemaxwell
In most cases, more dialup users will thank you if you use css than people with non-css compliant browsers will thank you for using the tables.
If you're talking about saving Bandwidth, then the example code you offered gives a poor representation of the savings to be made using a CSS solution, as it appears to use almost twice the amount of code. |
Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won" |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 17 February 2004 : 15:34:45
|
quote:
Originally posted by D3mon
If you're talking about saving Bandwidth, then the example code you offered gives a poor representation of the savings to be made using a CSS solution, as it appears to use almost twice the amount of code.
No, not really. I'll show you what I mean, but just to eliminate any doubts, I removed any excess white spaces and carriage returns etc, which I typically leave in simply to make it easier for people to analyze, etc.
In the example he gave (which my code does) is trying to fit two objects in a bordered area. If you don't use css at all, you'd need two nested tables, or code basically like this:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<table width="100%" border="0" cellpadding="2">
<tr bgcolor="#00C"><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="white"><td width="50%" align="left">this text is left aligned</td><td align="right">this text is right aligned</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Now, you commenting on it did make me go back and relook at my code and I was able to eliminate some extra code, but I personally would leave it in to reduce any question on what it's supposed to do. This code achieves the same effect as my original code:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.content { width: 100%; border: #00C 2px solid;}
.right { float: right; text-align: right; margin: 0px;}
</style>
</head>
<body>
<div class="content">
<div class="right">This text is to the right</div>This text is to the left<span style="clear:both;"></span>
</div>
</body>
</html>
The css version has a footprint of 395 bytes. The table version has a footprint of 419 bytes. You can reduce the css version even more by using an external stylesheet which is then cached by the browser for a footprint of 344 bytes:
html:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" media="screen" title="default" />
</head>
<body>
<div class="content">
<div class="right">This text is to the right</div>This text is to the left<span style="clear:both;"></span>
</div>
</body>
</html>
css file:
.content { width: 100%; border: #00C 2px solid;}
.right { float: right; text-align: right; margin: 0px;}
|
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
Posted - 17 February 2004 : 15:58:03
|
No need for nested-tables:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body>
<table style="border:1px solid black;" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" align="left">this text is left aligned</td>
<td align="right">this text is right aligned</td></tr>
</table>
</body>
</html> |
Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won" |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 17 February 2004 : 16:13:26
|
quote:
Originally posted by D3mon
No need for nested-tables:
True. Even still, the external stylesheet is slightly smaller and would be cached by the browser.
In a case of something this small, it's more a case of symantics than anything else. |
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
Posted - 17 February 2004 : 16:20:33
|
Granted its an arguable point, but my experience in using CSS for side-by-side layout has proven that using tables in this instance will give a much more predictable results in a range of browsers/conditions.
As an example, it may be unacceptable to the coder (or design) that when the window is reduced to a small horizontal width, the content on the right hand side drops down below the left hand side. |
Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won" |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
Posted - 17 February 2004 : 16:48:07
|
quote:
Originally posted by D3mon
Granted its an arguable point, but my experience in using CSS for side-by-side layout has proven that using tables in this instance will give a much more predictable results in a range of browsers/conditions.
As an example, it may be unacceptable to the coder (or design) that when the window is reduced to a small horizontal width, the content on the right hand side drops down below the left hand side.
I guess I haven't run into a situation like that, but perhaps I've been lucky.
As for your example, if they use hard coded widths, then I would agree they could run into problems with things dropping like that. But since I never use the hardcoded widths and strictly deal in ems and percentages, I don't have a whole lot of problems with that. |
Dave Maxwell
Barbershop Harmony Freak |
|
|
|
miperez
Junior Member
Spain
243 Posts |
Posted - 18 February 2004 : 04:16:30
|
Hi all!
Interesting topic, this one! I am currently rebuilding an old site using CSS (I am not an expert, though), and this is what I think I can tell you:
- Really if we speak of only such a small piece of htm code as a the one involved in this message, building it using CSS or just html won't make much difference in terms of bandwidth saving. But, if we think on a medium site with 100 pages, and several different font-styles, just defining a class that declares the font-family, weight, size and so, and applying it to DIVs will surely save a lot of bandiwth compared to defining >font family="..." size="..." weight="..."></font> everywhere around the site.
- Regarding the problem that was the origin for this topic: AFAIK, DIV defines a text block, that you can use for positioning text, floating and so, whereas SPAN can just be used for inline styling, that is, applying a different style to an element inside a block, so the float:right or float:left won't apply to something enclosed within <span></span>, but it will do to a <div> block. |
Best Regards
Mikel Perez
"Hell is the place where everything test perfectly, and nothing works"
|
|
|
|
chumbawumba
Junior Member
United Kingdom
304 Posts |
Posted - 18 February 2004 : 06:14:24
|
Thanks for the informative replies. This has indeed become an interesting thread and a lesson in CSS!
If you paste the following into notepad you can see what i meant initially.
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
div.pathbar {background-color: #FFF8DC; border-bottom: #000000 1px solid;text-transform: lowercase;}
.left { float: left; text-align: left; width: 250px; margin: 0px;}
.right { float: right; text-align: right; margin: 0px;}
</style>
</head>
<body>
<br><br>
---The current look, the right aligned text appears below the line:
<br><br>
<DIV class=pathBar>you are here: <a href="index.asp">home</a> » news<div class="right">[Members: 0 | Guests : 1 ] [Total : 1]</div></DIV>
<br><br>
---with that extra span, it looks correct:
<br><br>
<DIV class=pathBar><div class="left">you are here: <a href="index.asp">home</a> » news</div><div class="right">[Members: 0 | Guests : 1 ] [Total : 1]</div><span style="clear:both;"> </span></DIV>
<br><br>
---without span, it looks mighty strange. no bg colour, and the line is now above the text:
<br>
<DIV class=pathBar><div class="left">you are here: <a href="index.asp">home</a> » news</div><div class="right">[Members: 0 | Guests : 1 ] [Total : 1]</div></DIV>
</body>
</body>
</html>
it seems the <span style="clear:both;"> </span> makes it look the way it needs to. Even though, in all honesty i dont know what that bit means.
@DaveMaxwell the example you posted is indeed what i needed
@D3Mon I can't use tables in that part of the page. The whole header above and below it is made up from CSS
A point to note is, if the width of the left aligned text is greater than the value you specify in the style declaration, then it will wrap.
|
|
|
|
Topic |
|
Topic Locked
