Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 03-06-2008, 07:27 AM 2 problems
Experienced Talker

Posts: 31
Trades: 0
I would like to have a div that looks like on the image attached to this thread, but I would like it to be maximum flexible, so that width and height are in %, not in px.
Any ideas how to do that?

Also, I would like to have a layout that have 3 columns, first one should be in percents and second and third in px, but second and third are NOT generated on every page, and I would like the first one to take their space also if they are not generated, so this is an example:
1)

[ div 1 ] [ div 2 ] [ div 3 ]

2)

[ div 1 ] [ div 2 ]




3)

[ div 1 ]


I hope you understand and sorry for bad English!
Attached Images
File Type: jpg div.jpg (48.2 KB, 7 views)
goranbaxy is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 03-06-2008, 09:38 AM Re: 2 problems
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
So something like;
HTML Code:
<div style="position:relative;width:25%;border:1px solid #666666;padding:5px;">
<div style="position:absolute;text-align:center;width:15%;left:5%;top:-10px;background-color:#ffffff;">Text</div>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
For Q1

and Q2
You would create a single column as a 100% wide container. Then cols 2 & 3 would be created inside the parent and floated to the right at 100% height.
This way the parent container content would flow around the other 2 if they were there and occupy full width if they are not.

The only proviso, would be to ensure that the right most columns are in the parent before the text content.

If I get time I'll do a DHTML demo of it.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 03-06-2008, 03:24 PM Re: 2 problems
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Lots of 2 and 3 column layout examples can be found here:
http://css-discuss.incutio.com/?page=CssLayouts
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-08-2008, 09:44 AM Re: 2 problems
Experienced Talker

Posts: 31
Trades: 0
Thanks people, I'll try this, sounds like a good solution!
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
--> my fun portal!

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
--> my forum

Last edited by goranbaxy; 03-08-2008 at 11:21 AM..
goranbaxy is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to 2 problems
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.13351 seconds with 13 queries