Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 02-21-2010, 01:12 PM
Bansaw's Avatar
Bansaw Bansaw is offline
Contributing Member
 
Join Date: 09-04-06
Posts: 59
iTrader: 0 / 0%
newb - positioning my container in CSS...?

I am quite new to CSS and want to position a box to the RIGHT of my existing box. (proposed box marked by red arrow).
How do I do that in CSS effectively that will work both in IE and firefox?



Here's the code I am using for the first box:

Code:
<div id="container" style="width: 177px; height: 160px;"> <div style="background: transparent url(sbx-top.png) repeat scroll 0% 0%; float: left; height: 31px; width: 177px;"></div> <div style="background: transparent url(sbx-left.png) repeat scroll 0% 0%; float: left; height: 100px; width: 12px;"></div> <div style="background: #e8e8e8 none repeat scroll 0% 0%; float: left; height: 100px; width: 153px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div> <div style="background: transparent url(sbx-right.png) repeat scroll 0% 0%; float: left; height: 100px; width: 12px;"></div> <div style="background: transparent url(sbx-bottom.png) repeat scroll 0% 0%; float: left; height: 13px; width: 177px;"></div> </div>
Also, when I increase text size in IE or firefox, I don't want the text to grow outside the container. Any ideas?
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 02-21-2010, 09:08 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,687
iTrader: 5 / 100%
Change id="container" to a class. You can only use an id name once per page. Don't forget to change the container style "name" in your CSS too.

Float the style container to the left.

Move the existing inline styling you have into the external stylesheet so it's easier to play with when adjusting to get just right.

Play with the horizontal margins and padding until it is placed where you want it horizontally and works at different screen resolutions.

Now the height creates a problem. If you have a fixed height then that limits what you put in the container. If you used em instead of px that would adjust a bit better, depending on the user's screen resolution.
Quote:
Also, when I increase text size in IE or firefox, I don't want the text to grow outside the container. Any ideas?
You could use a fixed font size, but that is not adjustable for your viewers who need to adjust the font size to read your site.

I would lean towards leaving out the fixed height and work on matching the amount of content in each container. This way the container grows if the user wants to increase the font to read it (assuming you are using an adjustable font size ).
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
DIVs go outside of container n0mad Coding Forum 1 11-18-2009 09:43 AM
100% Container Height Conundrum mixelplik Web Design Lobby 0 04-08-2009 11:18 PM
Container positioning. Rushtrack Coding Forum 8 02-04-2008 10:21 AM
CSS positioning vs. table positioning downtroden Coding Forum 2 07-19-2004 11:40 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 10:45 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC