• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 446
  • Last Modified:

3 divs in line and dinamic width for middle one

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
DanSmir
Asked:
DanSmir
  • 4
  • 3
  • 2
1 Solution
 
ienaxxxCommented:
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
 
DanSmirAuthor Commented:
You are amazing person.
Thank you so much!!!
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ienaxxxCommented:
Glad to be of help. Thanks!
0
 
DanSmirAuthor Commented:
IENAXXX
DUDE, not work for me :(
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I know it's too late to reassign the points for this question. But did you try my solution?
0
 
DanSmirAuthor Commented:
Xmediaman: thank you, i solved it other way.
0
 
ienaxxxCommented:
Please Dan, let us know the solution that worked for you.
0
 
DanSmirAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now