?
Solved

3 divs in line and dinamic width for middle one

Posted on 2011-10-04
10
Medium Priority
?
438 Views
Last Modified: 2012-05-12
Greetings Experts,

My question will be a little tricky,
I need to make HTML page layout with 3 div's in line:
1.left position
2.Center position
3.Right position

It should be:
Global width: 1000px
DIV Left: 200px
DIV Right: 200px
DIV Center: should be stretched to width that left (600px)

Till now it simple. Now my problem, "DIV Left" and "DIV Right" are div's that not ALWAYS present on a page. I mean that combination of div's can be different:

1. DIV LEFT+DIV CENTER+DIV RIGHT (200px+600px+200px)
2. DIV LEFT+DIV CENTER (200px+800px)
3. DIV CENTER+DIV RIGHT (800px+200px)
4. DIV CENTER (1000px)

My problem: "CENTER DIV" width should be dynamically resized to cover ALL free width of global 1000px in case LEFT DIV, RIGHT DIV or BOTH of them are disabled

I tried to do it , but unfortunately i stuck.
I need  CSS/HTML code of this
Graphic explanation of what do i mean attached.

Please dear EXPERTS HELP, you're my only hope...!!!

Very best regards,
Dan Left+Center+Right Left+Center Center+Right Center
0
Comment
Question by:DanSmir
  • 4
  • 3
  • 2
9 Comments
 
LVL 10

Accepted Solution

by:
ienaxxx earned 2000 total points
ID: 36909454
What about this:
<div style="width=100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:block; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>

Open in new window

0
 

Author Comment

by:DanSmir
ID: 36909476
You are amazing person.
Thank you so much!!!
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36909513
Dynamic div width is based on content, not available space. The only way to make a div wider than the content is to give it a fixed width. I would include the content of the center div in a fixed 1000px width div. Then nest the left and right divs inside it, before the content.

<div style="width: 1000p;">
   <div style="width: 200px; float: left;">Left Column Content</div>
   <div style="width: 200px; float: right;">Right Column Content</div>
   Center Column Content
</div>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 10

Expert Comment

by:ienaxxx
ID: 36909557
Glad to be of help. Thanks!
0
 

Author Comment

by:DanSmir
ID: 36909664
IENAXXX
DUDE, not work for me :(
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36913019
I know it's too late to reassign the points for this question. But did you try my solution?
0
 

Author Comment

by:DanSmir
ID: 36913030
Xmediaman: thank you, i solved it other way.
0
 
LVL 10

Expert Comment

by:ienaxxx
ID: 36915605
Please Dan, let us know the solution that worked for you.
0
 

Author Closing Comment

by:DanSmir
ID: 36915933
Hello,

This one was good for me with some modification

<div style="width=100%; border:2px solid #dadada;">
    <div style="width:50px; float: left;"><img src="myleftimage" /></div>
    <div style="width:50px; float: right;"><img src="myrightimage" /></div>
    <div style="display:TABLE; margin-left:auto; margin-right: auto;">Content Goes Here</div>
<div style="clear:both"></div>    
</div>
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question