Jump to content

CSS Woes

jesh

By jesh
in CSS

 Share

Recommended Posts

jesh Devoted Member

jesh

Posted
Posted

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
aspnetguy Sacred Member

aspnetguy

Posted
Posted 
<!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
ible-white Member

ible-white

Posted
Posted

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
aspnetguy Sacred Member

aspnetguy

Posted
Posted
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
ible-white Member

ible-white

Posted
Posted
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
jesh Devoted Member

jesh

Posted
  • Author
Posted

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
jesh Devoted Member

jesh

Posted
  • Author
Posted
when you test that in IE6 you'll probably notice it flicker on rollover, hopefully that is fixed IE7
The 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
aspnetguy Sacred Member

aspnetguy

Posted
Posted

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
  • 1 month later...
GhostRider2110 Newbie

GhostRider2110

Posted
Posted

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
jlhaslip Devoted Member

jlhaslip

Posted
Posted

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...