<div style="width: 95%">
<div style="float: left;">Link 1</div>
<div style="float: right;">Link 2</div>
</div>
Lennart
2009-02-17 14:02:59
+1
A:
This is much better. However I'm not sure if it gets the height it needs, it can be left with height:0px. A clear:both would be required if that is the case.
Jens Jansson
2009-02-17 14:04:42
Yeah. The parent div has 0px height. clear:both; after second div or making the parent div float: left; should work.
Lennart
2009-02-17 14:11:42
Inline styles and too many divs is not the "correct" way to do it.
Magnar
2009-02-17 14:22:18
I believe the inline styles are simply for demonstration purposes.
Mark Hurd
2009-02-17 14:24:09
It would be more helpful to demonstrate proper development practices when a person new to css asks for help.
Magnar
2009-02-17 14:24:59
Yep the inline is just for demonstration. ;)
Lennart
2009-02-17 14:25:22
This way just adds too many extra tags to the page. It's much cleaner to apply the styles to the links themselves.
Akrikos
2009-02-17 14:27:41
I don't understand the hate for inlines. I think short inlines are fine - style="float:left" or id="the-left-one" clutters the code equally much :)
Jens Jansson
2009-02-17 14:30:47
It's not "hate", Jens. Separating markup and presentation is a well established best practice. If you want to understand more, I recommend reading up on it. Maybe here: http://webdesign.about.com/od/css/a/aa073106.htm
Magnar
2009-02-17 14:37:33
Jens: you should use ids for what something is, not how it should be displayed. What if later you wanted to display an element with the id 'the-left-one' on the right?
Akrikos
2009-02-17 14:38:47
A:
You mean that?
<html>
<head>
<style>
div.fl {
float: left;
}
div.fr {
float: right;
text-align: right;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fr">
B
</div>
</body>
</html>
replace A and B
Johannes Weiß
2009-02-17 14:04:25
A:
I think the best way to do any layout nowadays, is to use Grids. Once you get the hang of using grid layouts, you will never look back.
A good way to get started is to use Blueprint CSS. Its a nice framework to help you design a grid based layout.
Jon
2009-02-17 14:13:03
You didn't actually help the poster with this answer... this comes off as more of an advertisement than anything else.
Akrikos
2009-02-17 14:28:47
Thanks for the answer anyway Jon - I may check out blueprint at some point, cos it might be a longer term answer. Best to put the link though if you can: http://www.blueprintcss.org/ I dont have enough rep to edit your post I dont think!
Rob Y
2009-02-17 14:41:32
+4
A:
You can avoid the heavy markup by leveraging the fact that both links are oneliners. With this markup:
<div id="navigation"></div>
<a id="view" href="...">View this page</a>
<a id="back" href="...">Back to List of Pages</a>
<form></form>
And this simple css:
#view {
float: right;
}
No clearing necessary, and no need to specify widths.
This solution would only work for this scenario: two links. If you need more, then you should look at a set of floating list items.
Magnar
2009-02-17 14:13:11
I like this except that you force him to reverse the order of his links in the html. I'd rather not force him to change the order of his tags on the page so that the css works.
Akrikos
2009-02-17 14:21:58
Yes, that is an unfortunate sideeffect. It's a trade-off I am willing to make in order to avoid "divitis" and simplify the markup and css, but your mileage may vary. :-)
Magnar
2009-02-17 14:24:12
Indeed. I like how elegent it is... but if you add a float:left to the other link, then no matter which order you write them they display correctly.
Akrikos
2009-02-17 14:32:25
Adding float:left to the other link means you will need a clear. You would also probably encounter problems in IE6 unless you specify a width.
Magnar
2009-02-17 14:35:29
Your example still got an upvote from me tho :) It's a lot better than the other one at the top there.
Magnar
2009-02-17 14:38:22
And yours got a vote from me :-) I loaded mine in IE6 and it displayed correctly... I've also got some stuff below it in my test page and there doesn't seem to be a need to put a clear below it.
Akrikos
2009-02-17 14:43:15
They both look great answers guys (both upvoted :-)). I'll give them both a try now and report back...
Rob Y
2009-02-17 14:46:21
I've tested them both, and Magnar's works best for me in this situation, although I've had to add a comment about the order so I remember when I come back to the code! See update to the question for more detail.
Rob Y
2009-02-17 15:11:53
A:
This way you can adjust the column width, I've done it this way for quite some time now. I figured this out by studying Wikipedia HTML and CSS. Column B will occupy the remaining width but stay confined within the width of #outer-wrapper.
<div id="outer-wrapper">
<div style="float: left; width: 200px;">
Column A
</div>
<div style="margin-left: 210px;">
Column B
</div>
<div style="clear: both;"></div>
</div>
You can nest these are have a clear maintainable column based layout.
John Leidegren
2009-02-17 14:13:24
+2
A:
Instead of getting too 'div happy', I'd rather put ids on the anchor tags and apply styles to them directly. You may need to put a tag with 'clear: both;' after the links to clear the floats... I leave figuring that out that as an exercise for the reader.
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#viewpage {
float:right;
margin-right:5%;
}
#listpages {
float:left;
}
</style>
</head>
<body>
<a id='listpages' href="<? echo $url1 ?>">Back to List of Pages</a>
<a id='viewpage' href="<? echo $url2 ?>">View this page</a>
</body>
</html>
The idea behind using CSS 'correctly' in this case is to make your html describe your content in a way that makes sense and then use CSS to change how the content is displayed.
Akrikos
2009-02-17 14:18:37