|
Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues |
|
Topic Tools |
#1
|
|||
|
|||
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> |
#2
|
|||
|
|||
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> |
#3
|
|||
|
|||
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> Last edited by FrEaKmAn; July 25th, 2008 at 03:29 PM. |
#4
|
|||
|
|||
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> |
#5
|
|||
|
|||
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? |
#6
|
|||
|
|||
Add left floats to the left and center columns for IE and I believe it corrects.
|
#7
|
|||
|
|||
not really... I think we need to find alternative to table-cell for IE...
|
#8
|
|||
|
|||
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> |
Bookmarks |
«
Previous Topic
|
Next Topic
»
Topic Tools | |
|
|
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.