WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > preventing overlapping left right aligned divs

Reply
  Thread Tools Display Modes
Old 16th October 10, 09:58 PM   #1
hcetiner
WLC Member
 
Join Date: Jun 2010
Posts: 17
Default preventing overlapping left right aligned divs

I got 2 div layers left and right aligned.
when I resize page second div (pink) overlaps the first (green)

but I want right div can compress the left div as animated image.

[Image Removed Due to Annoyance ]

is it not possible just via css ?
JQuery can do this with some code but how can do via CSS only?
any clue ? thanks for any answers.

Last edited by meesa; 18th October 10 at 07:53 PM.
hcetiner is offline   Reply With Quote
Old 17th October 10, 10:55 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: preventing overlapping left right aligned divs

Well that is one very annoying image that is of no use whatsoever!

Images cannot be debugged.

but my guesses are:

Use a correct doctype.

Don't use absolute positioning.
chrishirst is offline   Reply With Quote
Old 18th October 10, 06:04 PM   #3
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: preventing overlapping left right aligned divs

Give the pink box a set width, and float it. Then don't set the width of the green box, and it'll expand to the edge of the pink box. If you don't want the green box wider than X, then set it's max-width.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 18th October 10, 07:39 PM   #4
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: preventing overlapping left right aligned divs

Please kill that animated gif ... thanks!
rkrause is offline   Reply With Quote
Old 18th October 10, 10:07 PM   #5
hcetiner
WLC Member
 
Join Date: Jun 2010
Posts: 17
Default Re: preventing overlapping left right aligned divs

I did it via Jquery after posting this question here.That didnt take time.
thanks for suggestions also...I will try it (CSS way)later.

(but dont understand why the description image removed. can you refer a link for welovecss site that is not legal or what ?
I thought I honoured the site by adding an extra description image.
"an image can describe thousand words" ;D
if not legal.why dont you try to remove image functionality from Editor ? Than no1 lose time for creating images and removing them for)
hcetiner is offline   Reply With Quote
Old 18th October 10, 10:11 PM   #6
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: preventing overlapping left right aligned divs

What do you mean, can't?

It was removed due to two requests. And most likely were're you only answerers.

But a text description for future readers:
The OP wishes to have two boxes, one in which will compress, if the given space is not enough, and will expand till a certain width.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 19th October 10, 01:49 AM   #7
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: preventing overlapping left right aligned divs

There was nothing wrong with your attempt to post the image. In fact, i like the effort to provide us with something useful and visual. I think the color scheme was the nuisance.

It would be better, if you post static images. That way we can look at it and study it without going blind.

Ryan.
rkrause is offline   Reply With Quote
Old 20th October 10, 07:59 PM   #8
hcetiner
WLC Member
 
Join Date: Jun 2010
Posts: 17
Default Re: preventing overlapping left right aligned divs

(for annoyance images click here for rehabilitation centers )

if you look animated image (that you deleted somehow)the right div is fixed. and when it reaches the left div it penetrates the left div to wordwrapped.

I want a right div with fixed width that must enforce to make left div wrapped down (say wordwrap,multirow or what ?)when right div reaches left div.

so I wont post animated image. but here is same question on another site with same descriptive accepted image.

___http://forums.asp.net/t/1613593.aspx

doesnt it so simple for CSS ?
and no solution on CSS?

instead of posting useless answers or removing images etc.

this means CSS cannot give a page treating as shown image ?

and this _text_ thread will be finalized unanswered ?

I believe this is not much complicated question and css should enough to do as same as the animated image.

so in conclusion
answer is "kill animated image" ? instead of a simple CSS example solution as an absolute answer ?

if I found anwser via CSS, I think I will write the end message as a responder of this unanswered question too.

Last edited by hcetiner; 20th October 10 at 08:19 PM.
hcetiner is offline   Reply With Quote
Old 20th October 10, 08:35 PM   #9
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: preventing overlapping left right aligned divs

hmmm. i'm not a member of that site or i would i have said something

Is the entire page done in % , or px?

Ryan.
rkrause is offline   Reply With Quote
Old 20th October 10, 08:46 PM   #10
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: preventing overlapping left right aligned divs

This is how it would work a simple HTML/CSS example.

Code:
<div id="right"></div>
<div id="left"></div>
Code:
#right{float:right;width:200px;}
#left {max-width:200px;}
The #left can shrink, but will only go so wide.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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


All times are GMT. The time now is 09:58 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.