Go Back   Cyber Tech Help Support Forums > Software > Web Development & Graphic Design

Notices

Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues

Reply
 
Topic Tools
  #1  
Old July 24th, 2008, 01:01 PM
FrEaKmAn FrEaKmAn is offline
Senior Member
 
Join Date: Aug 2005
Posts: 477
fixed and auto width

Hello

I'm trying to create 3 columns. 2 have fixed width and 1 has auto or max width. I came to this solution.
Code:
<div>
    <div style="float:right;width:100%;margin-left: -150px;background:#ff0000;">
        <div style="margin-left:150px;">
            <div style="float:left;">center</div>
            <div style="float:right;width:150px;background:#222;color:#fff;">right</div>
        </div>
    </div>    
    <div style="float:left;width:150px;background:#ccc;">left</div>    
</div>
is this good? is there a better solution? Because right now my problem is that if width of left or right column is bigger then 150px, then everything is ruined...
Reply With Quote
  #2  
Old July 24th, 2008, 08:41 PM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
Code:
<ul style="list-style: none; margin: 0; padding: 0;">
    <li style="display: inline; width: 150px; float: left;"> Left Side </li>
    <li style="display: inline;"> Center Content </li>
    <li style="display: inline; width: 150px; float: right;"> Right Side</li>
</ul>
Using a list keeps all your columns the same length. This is really helpful should you want a background color for one of them, or a border.
Reply With Quote
  #3  
Old July 25th, 2008, 03:13 PM
FrEaKmAn FrEaKmAn is offline
Senior Member
 
Join Date: Aug 2005
Posts: 477
hm, this kinda doesnt' work for me...

If I use your code, leftside and center content are in same line, while right side is under both...

my modified code:
Code:
<ul style="list-style:none;margin:0;padding:0;">
    <li style="display:inline;float:left;background:#72B0B6;">
        <div style="width:150px;">left</div>
    </li>
    <li style="display:inline;background:#ff0000;float:left;">
        <div>dddasdasdas asdas as asd as as asd as asd as asas das dasd asdad asdas d asd asd asd ad sfds f fsfsfs fsf sdf sdf sf sf sdfsd fs fsdf sdf sd</div>
    </li>
    <li style="display:inline;float:right;background:#ccc;">
        <div style="width:150px;">right</div>
    </li>
</ul>
I'm using FF 3.0 (same problem in IE) and I'm wondering why the center text doesn't brake into lines

Last edited by FrEaKmAn; July 25th, 2008 at 03:29 PM.
Reply With Quote
  #4  
Old July 25th, 2008, 07:21 PM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
It would probably help if I had given the correct code rather than winging it. Try this....

Code:
<ul style="list-style:none;margin:0;padding:0;">
    <li style="display:table-cell;background:#72B0B6;">
        <div style="width:150px;">left</div>
    </li>
    <li style="display:table-cell;background:#ff0000;">
        <div>dddasdasdas asdas as asd as as asd as asd as asas das dasd asdad asdas d asd asd asd ad sfds f fsfsfs fsf sdf sdf sf sf sdfsd fs fsdf sdf sd</div>
    </li>
    <li style="display:table-cell;background:#ccc;">
        <div style="width:150px;">right</div>
    </li>
</ul>
Reply With Quote
  #5  
Old July 25th, 2008, 10:28 PM
FrEaKmAn FrEaKmAn is offline
Senior Member
 
Join Date: Aug 2005
Posts: 477
well u are a legend!

Works great in FF and opera, but because world is a cruel place and somebody had to invent IE, life isn't perfect. It totally fails in IE because google says IE doesn't know table-cell. Is there a solution?
Reply With Quote
  #6  
Old July 26th, 2008, 01:17 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
Add left floats to the left and center columns for IE and I believe it corrects.
Reply With Quote
  #7  
Old July 26th, 2008, 01:21 AM
FrEaKmAn FrEaKmAn is offline
Senior Member
 
Join Date: Aug 2005
Posts: 477
not really... I think we need to find alternative to table-cell for IE...
Reply With Quote
  #8  
Old July 26th, 2008, 02:08 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
Code:
<ul style="list-style:none;margin:0;padding:0;">
    <li style="display:table-cell;width:20%;float:left;background:#72B0B6;">
        <div>left</div>
    </li>
    <li style="display:table-cell;float:left;width:60%;background:#ff0000;">
        <div>dddasdasdas asdas as asd as as asd as asd as asas das dasd asdad asdas d asd asd asd ad sfds f fsfsfs fsf sdf sdf sf sf sdfsd fs fsdf sdf sd</div>
    </li>
    <li style="display:table-cell;float:left;width:20%;background:#ccc;">
        <div>right</div>
    </li>
</ul>
Should work in everything unless the browser window gets pretty small, then IE will start stacking. Biggest change is the use of % values instead of hard coding the 150px widths.
Reply With Quote
Reply

Bookmarks

Topic Tools

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 Topics
Topic Topic Starter Forum Replies Last Post
Changing displayed width sebastian42 Internet / Browsers 2 November 15th, 2010 10:47 PM
Messed Up Curser Width Orb Weaver The Anything Else Board 3 February 9th, 2007 06:05 AM
Auto dial and Auto disconnect the modem for priod time rprapu Internet / Browsers 1 March 9th, 2006 11:01 AM
Cd Rom Auto Start problem..Auto Insert is enabled Ozark Windows 98 2 February 3rd, 2005 02:58 PM
CSS help for nav bar width mntamimi Web Development & Graphic Design 14 November 29th, 2004 04:18 AM


All times are GMT +1. The time now is 03:03 AM.