|
| |
|
|
BeTheBall
Posts: 6381
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
 |
Run and Hide - Novice Question - 1/19/2006 17:49:16
I am giving in to peer pressure and trying to go away from doing everything in tables. So here's my first dilemma. At the top of my page I have two links. One appears on the far left and the other on the far right. How can I do this with <div>s? I guess what I need to know is how to have two divs on the same line. If I simply insert one div after another one appears one line above the other. I thought maybe nesting two divs within a third might do it, but didn't seem to.
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
|
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Run and Hide - Novice Question - 1/19/2006 18:24:43
There's a couple of things you could do.
Firstly - have a div for the left stuff and a div for the right stuff. Put both of these in a containing div to hold them where you want them then float the right hand div - make sure you give it a width or it won't work properly.
<style type="text/css">
<!--
#right {float:right; width:200px; background-color:red; height:200px;}
#left {width:200px; background-color:blue; height:200px;}
-->
</style>
</head>
<body>
<div id="container">
<div id="right">
</div> <!-- end right -->
<div id="left">
</div> <!-- end left -->
</div> <!-- end container -->
The div that you float comes first in the code.
Second way would be to have a single div and float the links themselves:
<style type="text/css">
<!--
#container .left {float:left; width:200px;}
#container .right {float:right; width:200px;}
-->
</style>
</head>
<body>
<div id="container">
<span class="left"><a href="#">Left Link</a></span> <span class="right"><a href="#">Right Link</a></span>
</div> <!-- end container -->
Which version you choose depends on what else you want to do with the page.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
BeTheBall
Posts: 6381
Joined: 6/21/2002
From: West Point Utah USA
Status: offline
|
RE: Run and Hide - Novice Question - 1/19/2006 18:33:13
Thanks Helena, that helps. So, if a div's height isn't specified, such as in your second example, does it simply default to fit its contents?
_____________________________
Duane
Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs.
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Run and Hide - Novice Question - 1/20/2006 2:57:00
Hi Duane
If you specify a height for a div then the standard compliant browsers will stick to it and if you've got too much content then it's cut off. IE will expand to fit the content whatever height you set - it basically treats height as a min-height. I'll use a height for stuff like footers or sometimes headers - depending on the design and what will be in the divs. I generally avoid heights for stuff like big areas of text which are likely to expand a lot if people change the font size. You can use the "overflow" attribute to let the browser know what to do with excess content if you do specify a height.
Widths are generally easier to manage and absolutely must be included on floats unless the width is already implicit (i.e. if it's just got an image in it which is obviously a set size).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
dpf
Posts: 7126
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Run and Hide - Novice Question - 1/20/2006 6:43:58
quote:
I am giving in to peer pressure ..pppsssttt..Duane...wanna go get a beer?
_____________________________
Dan
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
