jesh Posted October 20, 2006 Share Posted October 20, 2006 OK, here's my problem, I want to use a div element which contains two items. One item is displayed on the left side of the div and the other item is displayed on the right side of the div. If I were using (nested) tables, I would do something like this: <table cellspacing="0" cellpadding="0" border="0"> <tr> <td align="left">Item 1</td> <td align="right">Item 2</td> </tr></table> Any tips on how to do this in CSS without using tables? I'm tired of mucking around with this and have other things I need to get done. Link to comment Share on other sites More sharing options...
aspnetguy Posted October 20, 2006 Share Posted October 20, 2006 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Tableless Layout</title> <style type="text/css"> #wrapper { width: 780px; margin: auto; } #left { float: left; width: 200px; border: 1px solid red; } #right { float: right; width: 576px; border: 1px solid green; } </style></head><body><div id="wrapper"> <div id="left"> LEFT </div> <div id="right"> RIGHT </div> <br style="clear:both"/></div></body></html> NOTE: I used 576px as the width for #right. This is to account for the 4px of border (1px on left and right of both columns) so the math is 200 + 576 + 4 = 780.Keep this in mind. You will always have to account for borders, padding, and margins. Everything must be equal or less then the wrappers width. Link to comment Share on other sites More sharing options...
ible-white Posted October 20, 2006 Share Posted October 20, 2006 try to:give the element an id and float it left or right.or use the position attributes.Edit: aspnetguy responded a couple seconds b4 i did- i did not realised. ohh well- that's the idea.good luck. Link to comment Share on other sites More sharing options...
aspnetguy Posted October 20, 2006 Share Posted October 20, 2006 try to:give the element an id and float it left or right.or use the position attributes.Avoiding absolute positioning is always a good idea. It creates many headaches when you are trying to make your site cross-browser friendly. Link to comment Share on other sites More sharing options...
ible-white Posted October 20, 2006 Share Posted October 20, 2006 Avoiding absolute positioning is always a good idea. It creates many headaches when you are trying to make your site cross-browser friendly.aaahhhhhhh...... thanx for the tip! Link to comment Share on other sites More sharing options...
aspnetguy Posted October 20, 2006 Share Posted October 20, 2006 aaahhhhhhh...... thanx for the tip!Your welcome. Usually my advice comes from personal experience, so I try and help people avoid the same problems Link to comment Share on other sites More sharing options...
jesh Posted October 20, 2006 Author Share Posted October 20, 2006 Thanks for the help everyone! I'm making this .NET page that is one of the more complicated forms I've built to date (having to do with file management and assigning certain files to folders and blah blah blah) and this wasn't something I could afford to spend hours on.This is what I used (thanks aspnetguy): <div style="width: 95%; margin: auto;"><div style="float:left; width: 45%;">Folders</div><div style="float:right; width: 45%; text-align: right;">[Add - Edit]</div><br style="clear: both;" /></div> Incidentally, I did find a neat way to do mouseovers:HTML: <a class="mousy" href="#"><img src="images/clear.gif" width="24" height="24" alt="" />Some text goes here</a> CSS: a.mousy img { background-image: url(images/folder_closed.gif); }a.mousy:hover img { background-image: url(images/folder_open.gif); } Link to comment Share on other sites More sharing options...
aspnetguy Posted October 20, 2006 Share Posted October 20, 2006 when you test that in IE6 you'll probably notice it flicker on rollover, hopefully that is fixed IE7 Link to comment Share on other sites More sharing options...
jesh Posted October 20, 2006 Author Share Posted October 20, 2006 when you test that in IE6 you'll probably notice it flicker on rollover, hopefully that is fixed IE7The image doesn't flicker, but the cursor flickers from the pointer to the pointer/hourglass. Why do people still use IE? Link to comment Share on other sites More sharing options...
aspnetguy Posted October 20, 2006 Share Posted October 20, 2006 because it is the only browser installed by default on windows and a lot of users don't care or know any better about how bad it is or don't want or know how to download and install a different browser. Link to comment Share on other sites More sharing options...
GhostRider2110 Posted November 30, 2006 Share Posted November 30, 2006 Question about this... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Tableless Layout</title> <style type="text/css"> #wrapper { width: 780px; margin: auto; } #left { float: left; width: 200px; border: 1px solid red; } #right { float: right; width: 576px; border: 1px solid green; } </style></head><body><div id="wrapper"> <div id="left"> LEFT </div> <div id="right"> RIGHT </div> <br style="clear:both"/></div></body></html> NOTE: I used 576px as the width for #right. This is to account for the 4px of border (1px on left and right of both columns) so the math is 200 + 576 + 4 = 780.Keep this in mind. You will always have to account for borders, padding, and margins. Everything must be equal or less then the wrappers width. How would I add an img between the left and right.. What I am trying to do is a header which has text on the lft, logo image in the center, text to the right... Below is a tag line and mini inline nav bar... I can get all positioned except getting the img centered between teh two text areas. ThanksSee-yaMitch Link to comment Share on other sites More sharing options...
jlhaslip Posted November 30, 2006 Share Posted November 30, 2006 Ghostrider,First of all, please dont hijack threads.Secondly, to answer your question, this works for a site I have written: <div id="hdr"><div style="float: left;" > <a href="turtles.html" class="no_border" alt="A theme description" title="read about the Turtles"> <img src="images/logo.gif" height="50" width="50"></a></div><div style="float: right;"> <a href="turtles.html" class="no_border" alt="A theme description" title="read about the Turtles"> <img src="images/logo.gif" height="50" width="50"></a></div><h1>Site Text Header Here</h1> <!-- end hdr div here --></div> The first image floats left, the second right and the <h1> slips in between them. Works at 800 px and 1024. Here is the css for the header div: #hdr h1 {margin: 0; margin-left: auto; margin-right: auto; text-align: center; font-size: 2.5em; background-color: #ddffdd; color: green; border: 5px double green; width: 75%; } Except where mine has images on the outside, yours has the image in the middle. It seems to work okay. Tweak the sizes and it should be do-able. Link to comment Share on other sites More sharing options...
GhostRider2110 Posted November 30, 2006 Share Posted November 30, 2006 Thanks.. and sorry... didn't think I was or mean to hijack the thread... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now